Header all over the place in IE7 and 8

[beautifulsites]

Hi all

My site is currently in development and the header appears fine in Safari and IE9 however, it appears to break out onto different lines in IE7 and IE8 (viewed using BrowserLab).

I’d be really grateful of any hint/tips on how to fix the CSS.

Site can be seen here:

http://dev.racketstringer.co.uk/

Cheers

Adam

[Senff]

Actually, the header also has problems in my Chrome, Safari and Firefox. The only browser where things seem to be fine, is IE9.

What I would do, for both #headerlinks and #mainnavigation: change float:left to float:right, remove the fixed width, and give it some right margin.

Alternatively, you could keep it as it is but give both those elements a little more width than it has right now.

[beautifulsites]

Thanks Senff – this is now working great by floating right as suggested. Only one thing – the tag line “Simple, quick, online ordering” floats up to the top in IE7. I’ve applied vertical-align:baseline; to the paragraph, but still no joy. Any other ideas on what I could try?
Many thanks

[Author]

Posts