Treehouse: Grow your CSS skills. Land your dream job.

Header all over the place in IE7 and 8

  • # July 16, 2012 at 9:17 am

    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

    # July 16, 2012 at 9:37 am

    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.

    # July 16, 2012 at 10:48 am

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.