Grow your CSS skills. Land your dream job.

IE 7 is ruining my site……

  • # May 28, 2008 at 8:18 am

    Hi there,

    Im a noob so ill try to keep the stupid stuff at bay :0

    I designed a site for a friend of mine, testing each time with Opera, FF and Safari. Up to now no problem. So then I tell him to check it out and my menu items, instead of being all inline are now stepped. Whats the deal with that? Can anyone provide a hack?

    Heres the site ( Im hosting it under my own host at the mo ) http://www.vincentnaughton.com

    Heres the code i have for the navigation bar

    ul#nav {
    height: 262px;
    margin: auto;
    background: url(../Images/header.png);
    list-style: none;
    float: left;
    min-width: 95%;
    }
    ul#nav li a {
    display: inline-block;
    position: relative;
    float: left;
    width: 148px;
    margin-top: 188px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    margin-left: 16px;
    }
    ul#nav li a:hover, ul#nav li a:active {
    color:#990099;

    This was all achieved thanks to chris’s tutorials the "awesome website "

    # May 28, 2008 at 9:15 am

    I’m thinking setting the list items themselves (doesn’t look like you have any styling for the li items yet) to inline should fix it. Article about stepdown here:

    http://css-tricks.com/prevent-menu-stepdown/

    # May 29, 2008 at 9:36 pm

    Thanks Chris! But this did not solve all o my problems.

    After looking at the code and previous posts on the forum about lists etc you said "….lists automatically put a </br> tag at the end. My list looked like this:

    <li><a href……….></li>
    <li><a href……….></li>
    <li><a href……….></li>

    So i changed it to this instead:

    <li><a href……….>
    <a href……….>
    <a href……….></li>

    And it works! http://www.vincentnaughton.com

    Now just gotta put an ie only css hack in the stylesheet as it is interpreting the margin and the li items width wrong.

    Thanks for the help!

    # June 2, 2008 at 4:32 pm

    That may work, but it’s not correct. Now you just have four links within one list item, rather than four list items with one link each. That’s fine if you want to do it that way, but if there’s only going to be one list item then there’s no point in even having a list – you could just put four links inside a div.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".