Header image cutting off in Width – IE

[GavinCZA]

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.

[apostrophe]

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.

[GavinCZA]

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.

[apostrophe]

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

[GavinCZA]

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.

[Author]

Posts