开发者

Navigation li styles not rendering in Chrome or Safari, fine in Firefox

开发者 https://www.devze.com 2023-02-17 11:20 出处:网络
I\'m working on a simple HTML site and having trouble with the navigation not rendering correctly in Chrome and Safari but is fine in Firefox (all on Mac).

I'm working on a simple HTML site and having trouble with the navigation not rendering correctly in Chrome and Safari but is fine in Firefox (all on Mac).

The nav li's should each be block开发者_开发技巧s with 15px of padding, floated left next to each other, showing a light green background on hover. In Chrome and Safari, they're just showing up with the page default link styles with no float.

The site can be seen here: http://www.rjlacount.com/clients/GreenTree

Thanks for any help!

And here's the CSS I'm using for the nav menu:

ul#nav {
    font-size:16px;
    border-top:1px solid #a4a4a4;
    border-bottom:1px solid #a4a4a4;
    text-align:center;
    margin:40px auto;
    list-style:none;
}

ul#nav li a:link, ul#nav li a:visited {
    float:left;
    padding:15px 43px;
    text-decoration:none;
    font-weight:normal;
    color:#000;
}

ul#nav li a:active, ul#nav li a:hover {
    background:#e6ffdc;
    text-decoration:none;
}

ul#nav li.highlight a:link, ul#nav li.highlight a:visited {
    background:#e6ffdc;
}


Looking at your source, it seems to be a problem in your markup. The <a> tags should be inside the <li> tags, this seems to be automatically done on firefox, but not in webkit.

In your CSS that you have provided, you are also searching for any anchors within a list item, so it wouldn't be able to find it anyway, as you have them the wrong way around.

0

精彩评论

暂无评论...
验证码 换一张
取 消