A lil CSS help needed

[HSK]

Hi Hexus - I recently started making my site/portfolio for when i finish uni (not finished completely), everything looks pretty much how I would want it to using firefox, but I notice in IE (the one with vista) at the top on the menu bar, when ever there is a hover, the dotted righter borders becomes a dashed border - but I haven't set it like that. Its fine in firefox. Grrr IE.

Also opinions on the site/layout are welcomed.

http://www.kalay.co.uk/index.html

[Templar87]

In Firefox it looks good, but in IE6 the layout goes all wonky (also the dashed lines you mention seem to be dashed all the time, not just on hover):



This might just be my PC, of course...

[HSK]

Ahh damn, I completely forgot about IE6, seems to be very angry. Something to do with floats maybe, need to find a fix or workaround.

Thanks for taking a look Templar87.

[mike_w]

For the problem with dotted/dashed borders, take a look at Sitepoint's site:

http://reference.sitepoint.com/css/border-style

The compatibility section says that up to IE6 (and IE7 in some cases), dotted borders of 1px width are shown as dashed borders.

Edit: Oh, and I think the problem with positioning of the clouds banner thingy can be fixed just by removing the line "position:relative" from #banner.

[HSK]

mike, that is great, thank you very much for that link - I'll read through it and fix the border thing.

I'll try and resolve with the positioning settings on those frames, thanks for the tip once again.

[Clockwork_Killa]

If youre still having problems with IE6 etc, Ive got a few pointers for you.
First off, IE and firefox dont calculate width the same way, so if you set a iv to be say 300px in firefox an it works, in IE it can sometimes be up to 10px too wide.
Second, a really neat IE hack is to use $ in your css, if for example you set something to 300px and it works great in firefox but not IE you can define a second value of say 290px for ie by putting a $ in front of the property
e.g.
#header{
width:300px;
$width:290px;
}

Firefox will read the first value and ignore the second, IE will read both and use whatever comes last.

Float does work in IE eventually (well sometimes anyway)

Nice site though, very clean and I like the skins

[HSK]

^ nice tip there, and this difference is what I've been noticing, i didn't know why it was before - thanks and cheers for looking!