Forum Moderators: not2easy
I would love to hear from anyone who has encountered a similar problem before, and found a solution. Thank you very much in advance. Christopher.
The Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
From the external Style Sheet:
#mainNav {
float: left;
height: 60px;
width: 880px;
padding: 0 20px 10px 20px;
}
#mainNav a:link, #mainNav a:visited {
float: left;
display: block;
height: 60px;
text-decoration: none;
text-indent: -5000px;
}
.a1 a:link, .mnhp a:visited {
width: 170px;
}
.a1 a:hover, .mnhp a:active {
background: url(../images/a/nav/main/mnS1.jpg) no-repeat top left;
}
From the HTML:
<ul id="mainNav">
<li class="a1"><a href="#" title="x">link</a></li>
<li class="b1"><a href="#" title="x">link</a></li>
<li class="c1"><a href="#" title="x">link</a></li>
<li class="d1"><a href="#" title="x">link</a></li>
<li class="e1"><a href="#" title="x">link</a></li>
<li class="f1"><a href="#" title="x">link</a></li>
</ul>
Thanks anyway.
I *think* it sounds like something that IE would do, it sounds a bit like 'creeping text' (a bug that was supposedly fixed in IE7, but may have other causes!) which would strongly suggest a hasLayout error - however at a glance (and I mean a glance) at your CSS, and at this time of night, it (your code) does not give the ingredients for the 'named' version of this bug, which does not mean to say it's not a variation
will have a look tomorrow..
-Suzy
[edited by: SuzyUK at 6:48 am (utc) on Dec. 13, 2007]
body {background: #eee;}
#mainNav {
float: left;
/*height: 60px;*/ /* this is not required as floated parent should stretch to contain floated children, which it does */
width: 880px;
padding: 0 20px 10px 20px;
margin: 0; /* IE uses margin & FF/Opera uses padding to indent the list so use either padding OR margin and zero the other */
list-style: none; /* remove bullets if required */
background: #fff;
}#mainNav li {
/*float: left;*/ /* uncomment to cure */
}#mainNav li.a {
background: #ff0; /* remove - just to show what IE is doing with a li element */
}#mainNav a:link, #mainNav a:visited {
text-decoration: none;
float: left;
height: 60px;
width: 145px; /* changed width re maths, 880px / 6 links,adjust to suit */
background: #dad; /* purple */
/*text-indent: -5000px;*/ /* put back, I left text in sight for demo */
}#mainNav a:hover {background: #ccc;}
HTML:
<ul id="mainNav">
<li class="a"><a href="#" title="x">link</a></li>
<li><a href="#" title="x">link</a></li>
<li><a href="#" title="x">link</a></li>
<li><a href="#" title="x">link</a></li>
<li><a href="#" title="x">link</a></li>
<li><a href="#" title="x">link</a></li>
</ul>
that sample should show what you are describing.. and the comments in the CSS are bits I added for demo only, I also removed all your classes and styled all links the same just for sample otherwise FF was showing them all squished up too
IE is being a problem child and needs a little help, the <li> elements don't know what to do ;) You see that yellow background on the first link, it is showing that the li elements are 100% wide in IE? the li element should actually be collapsed as nothing in the CSS has told it to stretch to contain its floated child, so in your code the floated link is floating to the 'correct' left position because of the height of the preceding link, but into the next "text linebox" per the <li> element
In this case you would presume that the grandparent <ul> of the link elements <a> should/could/would be enough to keep them links in check, FF and Opera manage ;).. but it seems IE doesn't! So you need to force the <li> elements to take responsibility for the layout of their own child elements.
Simple Fix for this one:
uncomment float: left on the #mainNav li , floating the <li> forces it to 'contain' the <a>
I presume that this is rare to come across as these types of horizontal bars are mainly built using the ul and li elements therefore the li, is a already a main building block - it is floated and given the width for the 'tab', then the <a> element needs very little styling except coloring and should should only need
display: block-Suzy
I have been very busy today so I have only just had time to look at this now. I will have a look and let you know how I get on in a few minutes.
Thanks once again for your detailed reply, you're a superstar!
#mainNav li {
float: left;
}
It makes sense now. I can't believe I missed that. Thank you so much.
The kindest regards.
Christopher.
I never know if people want the detailed reply to aid learning or just the quick fix, so it's nice to get some feedback!
Suzy
:)
