Sent by Drew McLellan on 7 July 2002 14:02
I'm trying to get 5 navigation links to space themselves evenly across
the width of their parent. It works in IE5, but not in IE6 or moz1. The
<a> tags appear to be getting their width from the page rather than from
#mainnav. Hence, they are rendered too wide and wrap.
Are there any values that contribute to the width that I'm not considering?
My HTML looks like this:
<div id="mainnav">
<a href="/" title="News and home" class="alink">News</a>
<a href="/pain/" title="Pain: tutorials" class="alink">Pain</a>
<a href="/grow/" title="Grow: extensions" class="alink">Grow</a>
<a href="/soap/" title="Soap: articles" class="alink">Soap</a>
<a href="/dwwd/" title="Read: my book" class="alink">Read</a>
</div>
and by css:
#mainnav{
position: absolute;
top: 77px;
left: 220px;
right: 10px;
color : #000;
background-color: transparent;
padding: 0;
margin: 0;
}
#mainnav a{
width: 20%;
height: 20px;
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
text-decoration: none;
font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 70%;
font-weight: bold;
color: #000;
background-color: #8BB1D8;
border: 1px #000 dotted;
}
Thanks for taking a look.
--
drew mclellan
WaSP dreamweaver task force
http://www.webstandards.org/
team macromedia volunteer
http://www.macromedia.com/go/team
