SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background not showing in IE but does in Firefox

    Hi guys

    I really don't know why this ain't working ...

    http://chris.lineages.co.uk/purenuke/cja1.htm
    http://chris.lineages.co.uk/purenuke/style.css

    Basically I want to apply the same background to the h2 in the center column as is applied in the h3 in the flanking columns. In Firefox this works fine whereas in IE it dies - but strangely, it renders the font size change and box padding margin as it supposed to it just doesn't "see" the background ????

    Any help much appreciated

    Chris

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

    Try the 1% height hack.
    Code:
    #maincontent h2{
     font-size: 1em;
     background:red url(http://chris.lineages.co.uk/purenuke...tyle/h3_bg.gif) repeat-x bottom left;
     margin:0;
     padding:3px 5px 20px 5px;
    }
    * html #maincontent h2{height:1%}
    That should force it to display.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for that Paul It workled a treat. I've never seen the hack before whats it for/what does it do? and why's it needed here?

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

    IE has a bug that varies slightly but often has the effect of hiding elements. It can hide whole floats or images and seems to overwrite content with the background of the parent.

    The bug is usually evident in children of positioned elements and the usual solution is to add position:relative to the child also and this usually cures it.

    The other cure is to use the height:1% hack which fixes similar bugs and you just have to try both out to see which one is needed as there are always slight variations but the problem is always solvable with either one or the other techniques.

    IE doesn't like it when elements have no specified width or height and adding a height:1% obviously gives ie something it can work with. As ie treats height as min-height the 1% has no detrimental effect to the layout because it will just increase the height to accomodate the content, unlike other browsers which will stay at the specified height.

    Which is why the star selector (* html) hack is used to give style only to ie. (http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html )

    In your cass above you could also just have removed the position:relative from maincontent instead and the background would have re-appeared.
    Code:
    #maincontent {
    float:left;
    width:317px; 
    margin: 0;
    padding:5px 5px 5px 5px; text-align:justify;
    }
    However I assumed that you needed the position:relative for stacking context or positioning context so the height:1% hack would seem to be more suitable.

    Hope that explains it a bit

    paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for that mate - it all becomes clear :-)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I suppose I should point out that ie5mac doesn't like the height:1% hack and for the sake of completeness you should hide it from mac.

    Code:
    /* Hides from IE-mac \*/
    * html #maincontent h2 {height: 1%;}
    /* End hide from IE-mac */
    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
  •