Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

IE7 CSS problems

Works fine in FF / IE6, but big problems in the latest IE.

7:59 pm on Sep 14, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:July 30, 2003
votes: 0

I came here a couple of years ago to get the initial CSS code for my site working properly, but it seems that the curse that is IE7 is causing some rendering problems that I just can't get to the bottom of.

The site in question is url snip and if you take a look in IE6/FF you can see it (should) render correctly.

However in IE7 there are problems with the size of the blue boxes on the main page, the non-existent background colour of the side menus and also the strangely placed footer.

Could anyone shed some light on this so I can try to fix the problem before IE7 is released? I'd be really grateful for any assistance :)

[edited by: SuzyUK at 8:24 am (utc) on Sep. 19, 2006]
[edit reason] No URLs please per TOS... [/edit]

9:07 am on Sept 19, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

Hi Ian,

as we have to go with no site review rule I'll try and be general, and I have to say that I did have a quick look but failed to see any major problems, but I didn't debug to the point of fixing!

Mainly the difference between IE7 and other compliant browsers when it comes to width/height/min-width/min-height should be thought of as none.

But any height or width workarounds you have for lte IE6 (even if you don't know that they're workarounds) could now be adversely affecting IE7, IE7 possibly doesn't need width/height workarounds any more so it would be best if they're in a conditional comment that only applies to IE6 and below or are in a * html hack (or the Holly Hack).

BUT, although some of the "named" bugs are fixed in IE7 their fix in lte IE6 was to trigger the MS hasLayout flag to true, this was done by adding a width or height (the Holly Hack is commonly seen in CSS files). It's quite possible that some of those widths and heights (which IE used to treat as min-height, min-width) may have been inadvertently been fixing some of the many other display issues that IE had, and IE7 still has (coomon bugs fixed but root cause not!).

So if you were using a width/height for IE6 and relying on the fact that it would stretch, you should theoretically only have to make sure that only IE6 and below can see those width/heights, and make sure that IE7 can see your min-height/width rules, which it now supports.

THEN if it turns out that a particular element starts acting weird in IE7 it could be because IE7 still needs "Layout". As I said above some of IE's more well known, "named" CSS bugs have been tackled, but their root cause is still a problem! - 99% of them are caused by IE's "hasLayout [webmasterworld.com]" and it is still present in IE7 :(

So you might not be able to use a width or height for that purpose anymore you might need some other way to trigger "hasLayout" - (you should be able to use height: 0.1% not px in most cases unless your layout it actually meant to based on explicit/inheritable heights)

As always I would say the best thing to do is get your layout working in FF/Opera, move all the IE workarounds (including any widths and heights being used for the purpose) to a conditional comment or make sure they're all in * html rules which IE7 will ignore now, whichever you're more comfortable with.. then see what you're left with for IE7, if there is anything, seperate out the examples if you can and post the code

Sorry if that's a bit too general, but I don't believe this will be the first time this question is going to come up, going by some of the popular CMS/Blog template code I've seen ;)

We would need to come up with a magic formula, which is a bit difficult as IE7 quirks are still appearing, and even more difficult as the previous workarounds weren't applied consistently either ..


1:12 pm on Sept 19, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 12, 2006
votes: 0

Working with any version of IE is like trying to adjust rabbit ear antennas on top of your TV.