SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2004
    Location
    UK
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE bug with CSS box borders?

    Anyone experienced the same problem with background coloring not appearing to be the correct width (check out the ugly thin right-hand gap) in the following example? Certainly in IE6 it doesn't appear to do what I'd expect. Is this a known bug or am I missing something?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
    <head>
    <style type="text/css">
    <!--
    body { margin: 0px; }
    h2 { background-color: #AAA; margin: 0px; }
    #page { border-left: 50px solid #F00; padding: 10px; }
    #box { border: 1px solid #F00; }
    -->
    </style>
    </head>

    <body>
    <div id="page">
    <h1>Header</h1>
    <p>Intro text</p>

    <div id="box">
    <h2>Interesting text</h2>
    <p>Here's some more text about something exciting.</p>
    </div>
    </div>

    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Glasgow, Scotland
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've seen that before. Just a wee 1 px white gap of the right hand side. My solution was to un-nest the h2 tag and apply the border effect directly on it rather than on it's div wraper.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
    <head>
    <style type="text/css">
    <!--
    body { margin: 0px; }
    h2 {
    background-color: #AAA;
    margin: 0px;
    border-top: 1px solid #F00;
    border-right: 1px solid #F00;
    border-bottom: 0px none #F00;
    border-left: 1px solid #F00;
    }
    #page { border-left: 50px solid #F00; padding: 10px; }
    #box {
    border-top: 0px none #F00;
    border-right: 1px solid #F00;
    border-bottom: 1px solid #F00;
    border-left: 1px solid #F00;
    padding: 1em 0em 0em;
    }
    -->
    </style>
    </head>

    <body>
    <div id="page">
    <h1>Header</h1>
    <p>Intro text</p>


    <h2>Interesting text</h2><div id="box">
    <p>Here's some more text about something exciting.</p>
    </div>
    </div>

    </body>
    </html>

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

    IE often has trouble with widths and needs a bit of help at times.

    In your case you could simply add width:100% to the h2 to solve the problem.
    Code:
    h2 { background-color: #AAA; margin: 0px;width:100%; }
    If you had borders or padding on the h2 then you couldn't use the above but you could use this hack.
    Code:
    * html h2 {height:1%}
    This will also help ie find the width (strangely enough). The height 1% has no effect because ie treats height as min-height and will expand the container accordingly. Obviously this has to be hidden from better browsers hence the star selector hack.

    The height 1% can be used in other situations such as to cure the 3 pixel jog on floats and in other situations where widths have been set by margins. (It's worth remembering this hack - even though I don't like hacks )

    Paul

  4. #4
    SitePoint Member
    Join Date
    May 2004
    Location
    UK
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for such clear and useful responses.

    After a little experimentation, I'd found a little fix: set the right-hand margin to -1px for h2. Although this may cause effects in non-buggy browsers (are there any yet!?), it shouldn't cause a problem in my actual design (not the example given), as the h2 background colour and the "box" div border are the same colour.

    As to where the issue comes into play, it seems that having the left-hand border on the "page" div introduces the error, which is a shame, as I often use a thick left-hand border to provide a navigation area background (adding navigation text as an absolute-positioned overlay). The reason I do this is to ensure the navigation bar is the same height as the page content (as its actually the page div's border!) and to avoid the 3 pixel jog on floats you mention (if I were to float the nav-bar to the left instead).

    However, now you've supplied a hack to overcome the float jog, I might re-experiment... although I don't like hacks either, as they always feel like building a house on sand; nice and beautiful during the summer and great for the sea-side view, but suddenly cause you immense head-aches when the first winds blow and you're sat in a pile of rubble!

    (PS Could you point me to a reference re the star selector? I don't quite understand the syntax and why better browsers would ignore this statement)

    (PPS Anyone ever thought of developing a non-buggy browser that is properly standards-compliant? I'm always amazed that for such logical, simple and clearly-defined standards (CSS/XHTML) we still don't appear to have a browser from any major players that is actually reliable!)

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

    The star (universal) selector is used to select any element like a wild card. Therefore by saying * html there would need to be in existance a parent of html which of course there isn't.

    All browsers except IE realise this and do nothing when they meet this statement. IE on the otherhand treats the statement as though the universal selector wasn't there and executes the style accordingly.

    This makes this one of the safest hacks to use (if you must use hacks of course ).

    More info here:

    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    Youyr margin-right-1px solution should really be hidden from other browsers because the background of the h2 will overlap the border of the parent.

    While this is ok in your example, if at a later date you change your colours through the stylesheet then you will also need to hide the negative margin as the background will overwrite the border. Just a minor issue but worth pointing out all the same.

    (As an aside note that your negative margin technique is the one used to clear the extra space that ie puts around floats
    Code:
    * html #floatedelement {margin-right:-3px}
    3px is the exact amount of padding that ie applies around floats and will reduce the float to the correct dimensions. This will also allow content to butt up close to a float when combined with the height 1% for the surrounding content as mentioned above.)

    Paul


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
  •