Forums

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

Home Forums CSS Having trouble with Cross Browser Compatability, Could really use a suggestion

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #43338
    jaatendi
    Member

    My site looks how I want it to in all browsers except ie9 and earlier versions of ie. For instance, my menu is a horizontal layout, but in IE, each menu item is appearing lower than intended. They are still spaced horizontally, so the result looks kind of like a staircase, with each button appearing vertically lower than the last. Here is the code I used to create the menu:

    Here is the CSS I applied:

    nav li a {
    float: left;
    margin: 20px 20px 25px 0;
    font-size: 15px;
    border-right: 1px solid #f47920;
    height: 24px;
    padding: 10px 20px 0 0;
    }

    I normally never have cross browser problems, which I think is due to using a CSS reset. For some reason this project is a disaster in IE9 and earlier. I dont even really know where to start.

    The site can be viewed at: http://166.78.31.103/

    All suggestions would be appreciated.

    thanks

    #127957
    Merri
    Participant

    Try taking margin-top off `nav li a` and put it directly on the nav. Safest bet would be to use it as padding.

    **Edit!**

    And it could be margin-bottom too. I can’t remember which way IE bugs with this from the top of my head.

    #127967
    TheDoc
    Member

    This sounds like the classic ‘step down’ bug: https://css-tricks.com/prevent-menu-stepdown/

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