Forum Moderators: not2easy
I have a nav bar with pipes in between the links. In IE7 when I zoom in or out on the page the top nav gets mangled. The vertical lines, or pipes, in between the top nav doesn't flow with the text. The pipes stay fixed while the text gets bigger or smaller.
Here's the CSS:
#container {
text-align: left;
width: 760px;
color: #000000;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-size: 12px;
#nav {
height: 25px;
width: auto;
color: #FFFFFF;
background-image: url(../images/nav_back.jpg);
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-right: auto;
margin-left: auto;
position: relative;
#navcontainer {
margin-right: auto;
margin-left: auto;
margin-top: 0.3em;
width: 95%;
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li {
display: inline;
border-right-style: solid;
border-right-width: .1em;
border-right-color: #FFFFFF;
padding:0 .9em;
}
#navcontainer ul li.last {
border: none;
}
Please let me know what I'm doing wrong.
Thanks!
Kim
Can you post the relevant HTML including the doctype? Also, did you validate your page? If not, try that first - [w3c.org...] .
Marshall
[edited by: Marshall at 4:38 pm (utc) on Sep. 11, 2007]
Is this the doctype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In Dreamweaver I did the browser compatibility check and there are none in this nav.
This is the html for the nav only:
<div id="nav">
<div id="navcontainer">
<ul>
<li>home</li>
<li>products</li>
<li>support</li>
<li>where to buy</li>
<li>web store</li>
<li>contact us</li>
<li class="last">technology</li></ul>
</div>
</div>
Thanks for helping!
Kim
