Hi all,
I'm having a senior moment: I am putting together a horizontal button
navigation and using a method that has worked many times before. This
time, I am seeing a weird problem in IE6 (Safari and Firefox are both
OK on Mac and Windows, and IE7 is fine too). Instead of displaying in
a nicely spaced horizontal line each button has grown to the width of
the parent element and showing as a vertical stack of such buttons.
Unfortunately I can't point you to a real page because this is an
internal system.
Anyway, if anyone can help me through the mental block I'd be grateful.
Thanks,
Ian.
--
ianpi...@mac.com
07590 685840 | 01926 811383
==== css ====
ul#mainNav {
margin: 80px 10px 10px 15px;
padding: 5px 0;
list-style: none;
display: inline;
float: left;
width: 990px;
}
ul#mainNav a {
display: block;
width: auto;
height: 18px;
margin-right: 5px;
padding: 2px 15px;
border: 1px solid #c1c1c1;
font-family: Arial, Helvetica, san-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-align: center;
color: #000000;
background-color: #ebebeb;
}
ul#mainNav a:hover {
background-color: #888888;
border: 1px solid #c1c1c1;
color: #ffffff;
}
ul#mainNav li {
float: left;
}
#mainNav li.current,
#mainNav li.section {
}
#mainNav li.current a,
#mainNav li.section a {
background: #224466;
color: #ffffff;
}
==== css ====
==== html ====
<div id="wrapper">
<div id="header">
<ul id="mainNav">
<li class="current"><a href="/stunt/" title="Go to the
"Home" page">Home</a></li>
<li class="link"><a href="/stunt/websites/" title="Go
to the
"Websites" page">Websites</a></li>
<li class="link"><a
href="/stunt/information-management/" title="Go
to the "Information management" page">Information
management</a></li>
<li class="link"><a href="/stunt/training/" title="Go
to the
"Training" page">Training</a></li>
<li class="link"><a href="/stunt/writing/" title="Go to
the
"Writing" page">Writing</a></li>
<li class="link"><a href="/stunt/software-development/"
title="Go
to the "Software development" page">Software development</
a></li>
</ul>
</div>
==== html ====
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
