Skip to main content

Forums

This topic contains 2 replies, has 0 voices, and was last updated by  ThinkSoJoE 11 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #22829

    ThinkSoJoE
    Member

    I’m sure I completely missed something in my CSS, but I’ve been working on a new design for my oldest website, and decided that in lieu of creating static link names like I did in my other project I’ve been working on, or no navigation bar like I did with my newest site, boredwrestlingfan.com, I thought I’d try my hand at CSS coding the main links in a navbar at the top of the page, in the header image. While it works fine in Firefox and Opera, in IE it comes up weird – the first link is below where it should be, the next one is higher, and it almost creates a stair-like effect leading to the last link, which is in the position it should be. You can check it out at http://testingground.fropac.com/s5pconcept and see for yourself. Obviously I’m just starting this one, as I haven’t done up the link colors or anything. I’m also eventually going to need ideas about getting IE 6 and below to render the transparency properly in my PNG files because I have no clue how to work around that. Anyways, here’s the code as it is now:

    Code:
    ul#nav {
    height: 207px;
    width: 696px;
    background: url(images/header.png) no-repeat;
    margin: -20px auto;
    position: relative;
    }
    ul#nav li a{
    display: block;
    width: 112px;
    float: right;
    margin-top: 150px;
    margin-left: 5px;
    color: #777777;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    }
    ul#nav li a:hover, ul#nav li a:active{
    color: #fff600;
    }

    Anybody have any idea what I’m doing wrong to cause the stair effect in IE, or at least an idea of a workaround? Again, it only comes up wrong in IE, other browsers I’ve tested work fine.

    #48132

    Adam
    Member

    It’s step-down your experiencing.

    Chris has a good article on it:

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

    #48136

    ThinkSoJoE
    Member

    that absolutely worked. I knew I should’ve looked around the site before posting here, but I was just too out of it at the time. Thanks for the help!

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star