Hi there,
I have designed a template and everything looks fine in Firefox and Safari, but when I preview the site in IE 6 and 7 the bottom blue banner appears wrong, is there any where on the web that lets us know the problems between browsers and css or does anyone know how to fix this??
You can view my test site at:-
http://www.webdesignerblackburn.com/WebProofs/Blue/
Kindest Regards,
Reders
Hey reders,
Fixing up problems in various versions of IE are an important part of coding CSS these days - the best way to find something out is to do a search for 'ie6 bugs' and take a look at the results.
One of my general rules of thumb for fixing up IE bugs is to give the class that you're having trouble with the properties 'display: inline, height: 1%, and position: relative' - these properties tend to fix up the most common bugs in IE, and then you can just delete the ones which arn't needed. Just make sure to include them in an IE conditional comment, or have use a selector like '* html #footer', so it only targets IE (google 'targeting IE' for more info).
Otherwise it's a lot of trial and error really.
However, in this case, the error is caused by some mis-placed HTMl code. Basically, inside your '.moduletable-blueband' div, you have an extra paragraph ('p'), which is creating the extra space. It doesn't display int he other browsers because they are correctly obeying the 'height' property you said.
So, if you simply remove the extra paragraph and take away the 'height' on that div, everything will work fine.
Cheers,
Guy
You must log in to post.
