Grow your CSS skills. Land your dream job.

Spacing appear when text is enlarged in ie6

  • # September 29, 2009 at 12:05 am

    When i press ctrl + (enlarge text) in ie6 everything will enlarge including my empty header which i specify height only 135 px.
    From the screen shot below, the empty space is actually the header being enlarged despite it does not have anything.

    Can someone tell me how can i make it work as normal i’m trying to make a fluid layout here but this ie 6 is giving me problems.

    [img]http://img38.imageshack.us/img38/774/92585369.png[/img]

    Code:
    *{margin:0; padding:0;}

    body, html{height:100%;}

    body{background:url(“../images/header_bg.gif”) repeat-x;}

    #wrapper{
    margin:0 auto;
    width:80%;
    height:100%;
    }

    #header{
    height:135px;
    }

    #maincontent{
    position:relative;
    overflow:auto;
    background:#e0e0e0;
    }

    #left-col{
    height:auto;
    width:20%;
    float:left;
    background:url(“../images/leftcol_bg.gif”);
    overflow:hidden;
    padding-left:10px;
    padding-right:10px;
    }

    #left-col-data{
    width:100%;
    height:auto;
    }

    ul.menu{
    list-style:none;
    }

    ul.menu li{
    border-bottom:dashed 1px black;
    }

    ul.menu li a{
    width:100%;
    display:block;
    }

    ul.menu li a:hover{
    background:#8b8b8b;
    }

    ul.menu h3{
    text-align:center;
    }

    a{
    text-decoration:none;
    }

    .clear{
    clear:both;
    }

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    # September 29, 2009 at 11:21 am

    Hello, overflow hidden on the header should fix ie6. Also, applying font-size 100% on the body will kill the ie font resize bug, where it otherwise increases ems to much.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".