SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast SComm's Avatar
    Join Date
    Mar 2004
    Location
    Texas
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 and Height Issue

    I couldn't find anything specifically related to this issue when I searhced the forum so here is the problem:

    Example for IE6.

    IE renders padding-top: 6px; just fine but height: 6px; is much larger than 6 pixels.

    Here is the scenario:

    The gray bar sits at the bottom of a menu as a design element denoting the end of that section of links. Following the gray bar are more links and another gray bar...

    It seemed like height would be the approriate property in this case but padding accomplishes the same thing as well as working in IE6. Does it matter whether I use padding or height and why won't IE6 render it properly?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Ie won't render height less than the current font-size/ line height unless you specify overflow:hidden.

    I should use height because nothing at all will show in ie5 and 5.5 if you use padding.

    Remember to take account of the broken box model also with your borders.

    Paul

  3. #3
    SitePoint Enthusiast SComm's Avatar
    Join Date
    Mar 2004
    Location
    Texas
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    overflow:hidden did the trick. It is the little tweaks like this that you can't learn from a book...

  4. #4
    SitePoint Enthusiast SComm's Avatar
    Join Date
    Mar 2004
    Location
    Texas
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just found another problem...

    Adding overflow:hidden fixed IE6 but broke IE 5 (mac). In IE 5 the bar is only 2px wide now. Any suggestions?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Just hide the style from mac:
    Code:
    /* commented backslash mac hiding hack - ie5 fix \*/ 
    * html  .grayBar2 {overflow:hidden}
    /* end hack */
    Paul

  6. #6
    SitePoint Enthusiast SComm's Avatar
    Join Date
    Mar 2004
    Location
    Texas
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now I've got it. Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •