The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS My page header gets jumbled in IE

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #44744

    My page looks fine in all browsers except IE.

    It’s not just one version of IE either its all of them.

    Here’s the site I’m working on:

    Please Help!!!


    Not sure it’s that great in Chrome.

    Are those menu items supposed to be bigger on hover or not?

    In Chrome there is also a ‘gap’ between the menu item and the dropdown list which can sometimes make it hard to select an item from the submenu.


    I was in the process of working on that. That should look/function properly now.


    Part of the problem is that the links are larger (probably due to the padding) than the background image used to create the navbar.

    The list items are currently 59px tall (based on Chrome Web Tools) but the image is 57px. There is part of it.

    Also, a cursory glance shows that you aren’t really containing the floats in the header properly.

    Then you have odd negative margins on the body (presumably because you are trying to get things in the right place because other things are moving around)


    On closer examination I do think you might want to look into restructuring the header.

    You seem to have items that are floated left that you want to appear on the right (like the address) etc.

    The hgroup element has recently been removed from the HTML5 spec so it would be a good idea to remove that anyway.


    There are obviously a few things to review in your html. But at this time, if you just want to make it work. You can do it!
    First, remove the “clear:both” on your hgroup. You need your logo to stand on the left side on top of the page, so remove the line “width:391px;” on #logo. On this same rules, adjust the margin like this “margin:8px 0 19px 0”. Your logo and main menu will be back to their place. Now add a css rule to remove the extra right margin inside your #utility-nav like this :
    #utility-nav > * {
    margin-right: 0;

    Now the last thing to do is to fix your input #CAT_Search, first, remove the “float:right” and add a “display:block;” on it. Finally, remove the
    tag between your input and your anchor “search”. Everything should look great in Chrome, FireFox and IE 8+.

    Hope this help.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.