Grow your CSS skills. Land your dream job.

Header image cutting off in Width – IE

  • # July 3, 2009 at 5:28 am

    Hi everyone,

    I am having an issue with IE and a header image. I originally had it as a .png file and changed it .jpg, thought maybe transparency has an issue with it, but it seems not.

    In Firefox it displays correctly, however in IE (using 8 at work and 6 at home) it seems to cut the image off in width. Now the only explanation I can come up with is that the menu div is making the image cut. If that the case then why does it display fine in Firefox and not IE?

    Link: http://www.gavinza.co.za/brookfield/

    Alot still needs to happen on this site, so excuse the mess here and there, trying to sort out the header first.

    Another question:
    Transparent .PNG is also not displaying properly in IE6, gives this horrible grey – backdrop – any ideas how to fix it?

    Thanks for the help in advance.

    # July 3, 2009 at 7:40 am

    First off, you really should validate your markup http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.gavinza.co.za%2Fbrookfield%2F

    Just because something works in Firefox, there is no rule that says it should work in IE as well. I’m actually starting to think that Firefox lets people get away with far too much.

    Anyway, as a quick fix what happens if you give the header background a specific width?

    IE6 doesn’t support transparent pngs. There are various hacks available, here are 5 of them http://net.tutsplus.com/videos/screencasts/5-easy-ways-to-tackle-ie6s-transparency-issues/ if there’s nothing there you fancy just google IE6 png.

    # July 3, 2009 at 8:19 am

    Hi Apostrophe,

    I agree with you on the Firefox comment. I agree that just cause it works in FF that it doesn’t mean it will work in IE.

    When I give width to the image, it pulls the whole image out in full width, however it looks as if it then gets bumped under the menu. Collicion course if you may. Menu stays in tact and the image gets bumped down.

    Now yes I can edit the image to "not" looked bumped down, but I somehow think that is not the best fix to it, cause of the problem being still there…

    Could it be a POSITION: issue by any chance… Need to sort of let them overlap.

    Thanks for the transparent tips as well.

    # July 3, 2009 at 9:25 am

    The nav menu should actually be inside the header div, the fact that it comes before is why it is bumping the header down.

    # July 6, 2009 at 2:27 am

    Hehe,

    Yeah of course… thanks for that… I missed that.

    Thanks for the help. :)

    Also thanks for the link for the transparent PNG fix for IE. Worked wonderfully.

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

You must be logged in to reply to this topic.

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