Grow your CSS skills. Land your dream job.

Background image displays in FF, Safari but not IE 7

  • # August 15, 2009 at 2:04 am

    I’ve not tried any other IE version yet. I plan on testing IE 8 shortly, once I fire up the VM.

    The problem I am having can be seen on http://www.flame.org/bardbook/

    The content frame (the part between the top and bottom rounded corners which DO display) won’t display a background on IE. On Firefox, Safari it works as expected.

    My guess is that, for some reason, IE thinks the height of the content area is zero, and therefore not wanting to display a background. Setting height: 100px (or any other fixed value) doesn’t help. To ensure I had things right, I tried "background: red" and sure enough, the whole area turned red. I also added a 1px border, which bumped the sidebar down under the main area, and IE did then render the content’s background.

    I have to admit I design in Firefox and then test in other browsers. I’m also a programmer, not a CSS guru. Any help here would be appreciated. I used to care about doing things right rather than doing them as a hack, but right now I’d accept a hack. :)

    Thanks!
    –Michael

    # August 15, 2009 at 2:34 am

    What happens if you give #page-wrap a width of 633px?

    # August 15, 2009 at 3:07 am

    Complete magic, and it works now in IE7. Thanks for the fast and simple response!

    Is this another IE quirk I need to remember?

    –Michael

    # August 15, 2009 at 4:17 am
    "skandragon" wrote:
    Complete magic, and it works now in IE7. Thanks for the fast and simple response!

    Is this another IE quirk I need to remember?

    –Michael

    Cool, that was just the most obvious thing missing.

    I wasn’t particularly aware of it being an IE quirk, but it is general good practice to give anything with a specific width a corresponding css rule.

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

You must be logged in to reply to this topic.

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