Forum Moderators: not2easy
I want to first mention that I've studied the site in question from dozens of different computers and browsers and there is only ONE computer/browser combination that renders it this way. My colleague saw it when she was browsing the site on her computer at work. I believe she's running IE7. (However, I run IE7 on my computer at home also and it works fine for me).
Here is a description of the problem:
There are 13 list items. On the computer mentioned above, the last three lines appear exactly as follows:
Premium Mannequins
emium Mannequins
All Mannequins
However, it should look like this:
Premium Mannequins
All Mannequins
Basically, it is duplicating the second to last line and adding what looks like two line breaks.
I have 3 other separate instances of this same unordered list on the page with different items and each one is rendering a similar error in the same place at the end of each list.
Here's my HTML code:
<body>
<ul class="left">
<li><a href="#" title="#"><strong class="HideStrong">list item</strong></a></li>
<li><a href="#" title="#"><strong class="HideStrong">list item</strong></a></li>
<li><a href="#" title="#"><strong class="HideStrong">list item</strong></a></li>
<li><a href="#" title="#"><strong class="HideStrong">list item</strong></a></li>
<li><a href="#" title="#"><strong class="HideStrong">another list item this text repeats</strong></a></li>
</ul>
</body>...and here's my CSS:
ul.left {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%;
}
ul.left li {
display: inline;
}
ul.left li a {
font-family: verdana, arial, "trebuchet ms", sans-serif;
padding: 1px 0px 1px 0px;
margin: 0px 0px 0px 0px;
width: 100%;
text-decoration: none;
letter-spacing: 0px;
word-spacing: 0px;
color: #000000;
font-size: 10pt;
float: left;
text-align: left;
font-variant: normal;
}
ul.left li a:hover {
color: #877C00;
background-image:url('left menu hover star.gif');
background-repeat: no-repeat;
background-position: center right;
}
img.catHeading {
padding-bottom: 5px;
}
Does anyone know what's going on here? Any help would be greatly appreciated.
Thank you
[edited by: SuzyUK at 9:34 am (utc) on July 10, 2009]
[edit reason] examplified, shortened HTML [/edit]
This is a known duplicate character bug in IE6, which can be fixed by applying a negative 3px right margin to the last sibling in the series that is floated left. So, adding 'margin-right:-3px;' to the last sibling of ul.left li a, should fix the issue. In reality, you'll need to define either an ID or class to this particular element, and then apply the negative margin to that ID or class; this is since IE doesn't understand the CSS3 :last-child pseudo class.
The simplest way to do that in this case might be to float the <li>'s in these lists, to contain the child floats, the links themselves.
ul.left li {
display: inline;
float: left;
}
ul.left {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%;
display: inline;
}
Initially, I tried adding float: left...
ul.left li {
display: inline;
float: left;
}
Thanks again for your help :)
