IE6 CSS Oddities

csmager · 16 Aug 2007 at 14:34

Hi guys

I'm pretty inexperienced in this lark. I'm doing a bit of web design for free for some friends, and I've come unstuck with some IE6 oddities... so if anyone's got IE6 and IE7/Firefox and knows what they're doing, I'd greatly appreciate some help.

www.csmager.net/SailIonian is the site.

The menu on the left is perfectly correct in IE7 and the latest Firefox, but displays too far to the right in IE6 - not only that, but it ignores the a:hover and a:visited styles. Ill post some screenshots in a min (the fonts differ because the font used on the IE7 machine only comes with Vista or Office 2007).

Draeger · 16 Aug 2007 at 14:50

Hi m8, site looks good in I.E. 7.0, nice one.

I find it quite handy to have different versions of I.E. installed on the system I do my web design on.

You can download a multiple I.E. version from HERE

csmager · 16 Aug 2007 at 14:58

Cheers - I had seen that package, but it doesn't work in Vista. I will install it on the version of XP I'm using in a VM though.

Tripnologist · 16 Aug 2007 at 20:42

In IE6, if you float something and then apply margin or padding on the same side as the float direction, it'll (for reasons unknown) double the margin or padding.

The fix is easy though. Add the following hack to your css.

Code:

* html .menu { display: inline; }

I haven't tested it but it should fix things for you.

csmager · 16 Aug 2007 at 20:57

Genius! That fixed the layout issues perfectly! Thanks.

The next issue is that IE6 is ignoring the h4:hover and just underlining the text when you mouseover. In IE7 the whole of the bar across is clickable and goes red on mouseover. Is this a fixable IE6 oddity, or am I to just accept the madness?

(I fixed the visited link going blue by just putting in an '.menu h4 a:visited' entry.)

blade007 · 16 Aug 2007 at 21:21

look good.

use standard fonts though, arial, tahoma, verdana, times - Calibri is too new .. and everyone ain't got that yet.

csmager · 16 Aug 2007 at 21:26

blade007 said:
look good.

use standard fonts though, arial, tahoma, verdana, times - Calibri is too new .. and everyone ain't got that yet.

Trying to find a font I like best out of those - I've set it as second preference. Calibri still looks best, but it still looks ok if you don't have it.

Tripnologist · 16 Aug 2007 at 21:32

csmager said:
Genius! That fixed the layout issues perfectly! Thanks.

The next issue is that IE6 is ignoring the h4:hover and just underlining the text when you mouseover.

That's because IE6 does not support the hover attribute on anything other than a elements. Try displaying your a in block, giving it a set width and then applying the background and hover background on the a element as well.

Something like..

Code:

.menu a { 
display: block;
width: **px;
background: #******;
padding: *em *em;
}

.menu a:hover { background: #******;}

Once again, haven't tested this and it's off the top of my head so may or may not need some tweaking to work right.

csmager · 16 Aug 2007 at 21:35

I'd just this second googled 'IE6 CSS Hover' and come to the realisation that IE6 didn't support it. I hadn't, however, thought of a solution.

Your suggestion seems pretty sound - I'll give it a go tomorrow.

Thanks for your help - probably saved me hours of messing about with it myself!

Tripnologist · 16 Aug 2007 at 21:38

csmager said:
Thanks for your help - probably saved me hours of messing about with it myself!

NP, we all went through the same problems at some point.

Another bit of advice, doing navigation in <h>'s isn't a great idea.
Not sure if you can use unordered lists with your nav but it's generally considered the correct way of doing nav until CSS3 is in use.