PDA

View Full Version : Last four characters of my nav repeating in IE6



Kez1975
Apr 28th, 2007, 11:35 AM
Hi,

I have a problem with a site I'm working on. Everything looks fine in IE7, FF and Opera but IE6 is repeating the last four characters of my last navigation li on the line below.

I read somewhere that using too many html comments causes the problem, however i have tested a page stripping out all comments and the extra text is still appearing.

Does anyone have any ideas how I can fix this? My code validates to XHTML Strict and my CSS is valid too. I'm pretty new to CSS so apologies for suffering with divitis!!

http://www.kirk-enterprises.co.uk/kerry/juliescakes/index.htm
http://www.kirk-enterprises.co.uk/kerry/juliescakes/styles/main.css

Many thanks
Kerry

rmedek
Apr 28th, 2007, 09:18 PM
I had a similar issue on a site I was working on and I ended up adding a few non-breaking spaces after the repeating element. Not the best solution but it got it done. I did a bunch of searching and couldn't find any solved examples of the same problem.

On another note, that's a great looking site. :)

koyama
Apr 28th, 2007, 09:41 PM
I have a problem with a site I'm working on. Everything looks fine in IE7, FF and Opera but IE6 is repeating the last four characters of my last navigation li on the line below.

Hmm.. I don't see the repeating characters? Looks like you have fixed the problem.

I read somewhere that using too many html comments causes the problem, however i have tested a page stripping out all comments and the extra text is still appearing.

I guess you are refering to this: http://www.positioniseverything.net/explorer/dup-characters.html

Note that the duplicate characters (as the article explains) may be caused by other things than just HTML comments. Also hidden input elements, elements with display: none cause the bug.

Here (http://www.bingbangboom.us/productions/cssFixes/floatRowIE6/) is shown another way to trigger the bug in IE6. There are even more ways to trigger the bug.

As a side issue, why use imported style sheet? You are suffering from F.O.U.C. (http://www.bluerobot.com/web/css/fouc.asp/) in IE.

kewlceo
Apr 28th, 2007, 10:52 PM
Hmm.. I don't see the repeating characters? Looks like you have fixed the problem.

The letters "TACT" can still be seen beneath the HOME button when viewing with IE6.

koyama
Apr 28th, 2007, 11:53 PM
The letters "TACT" can still be seen beneath the HOME button when viewing with IE6.
whoops... you're right.

I have seen this way of triggering duplicate characters in IE6 before. Unfortunately, I haven't found any reference that describes this variant.

Explanation:
Relevant parts from your source pasted below. What is triggering the bug is display: block. Removing it will fix the problem. However, this one is still puzzling me.

Note that it is unnecessary and superfluous to specify display: block since you at the same time are floating the elements. So they should automatically revert to block-level. It is just IE that behaves strange when you do so. The bug only occurs for naturally inline elements such as a, span, etc..


a.roll1, a.roll2, a.roll3, a.roll4, a.roll5, a.roll6 {
float:left;
height:35px;
display:block;
padding-top:10px;
font-size: 0.75em;
font-weight:bold;
text-transform:uppercase;
text-align:center;
}


<div class="navcontainer">
<a class="roll1" href="http://www.kirk-enterprises.co.uk/kerry/juliescakes/index.htm" title="Bespoke Wedding and Special Occasion Cakes - home page" accesskey="1" rel="home">Home</a>
<a class="roll2" href="http://www.kirk-enterprises.co.uk/kerry/juliescakes/weddingcakes.htm" title="Bespoke Wedding and Special Occasion Cakes - information about out wedding cakes" accesskey="3">Wedding Cakes</a>
<a class="roll3" href="http://www.kirk-enterprises.co.uk/kerry/juliescakes/othercakes.htm" title="Bespoke Wedding and Special Occasion Cakes - information about our birthday, religious ceremony and special occasion cakes" accesskey="4">Other Cakes</a>
<a class="roll4" href="http://www.kirk-enterprises.co.uk/kerry/juliescakes/gallery.htm" title="View our bespoke Wedding and Special Occasion Cakes galleries" accesskey="5">Gallery</a>
<a class="roll5" href="http://www.kirk-enterprises.co.uk/kerry/juliescakes/prices.htm" title="Bespoke Wedding and Special Occasion Cakes - price guide" accesskey="6">Prices</a>
<a class="roll6" href="http://www.kirk-enterprises.co.uk/kerry/juliescakes/contact.asp" title="Contact Julies Cakes about bespoke Wedding and Special Occasion Cakes" accesskey="7">Contact</a>
</div><!-- navcontainer ends -->

kewlceo
Apr 29th, 2007, 01:51 AM
Nice work, koyama. I bet Kez1975 will be relieved to have an easy fix.

koyama
Apr 29th, 2007, 02:26 AM
Nice work, koyama. I bet Kez1975 will be relieved to have an easy fix.
yeah the fix is simple.

I forgot to mention that removing white space between the inline elements will fix the problem as well. One can then leave the display: block (if one for some strange reason wants it).

I leave three samples here: (numbers indicate how many duplicate characters each float contribute with).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head>

<title>Duplicate characters</title>
<style>
.navigation {
width: 600px;
background: red;
}
.xxx, .yyy, .zzz {
background: yellow;
display: block; /*enough to trigger bug*/
width: 100px;
float: left;
}
</style>
</head>
<body >
<h1>display: block on inline elements enough to trigger IE6 duplicate character bug</h1>
<div class="navigation">
<span class="xxx">yes1</span>
<span class="xxx">yes1</span>
<span class="xxx">yes1</span>
<span class="xxx">no</span>
<span class="xxx">yes1</span>
<span class="xxx">abcdefghijk</span>
</div>

<h1>removing white-space between elements fixes the problem</h1>
<div class="navigation">
<span class="yyy">no</span><span class="yyy">no</span><span class="yyy">no</span><span class="yyy">no</span><span class="yyy">no</span><span class="yyy">no</span>
</div>

<h1>classic triggering of IE6 duplicate character bug with HTML comments</h1>
<div class="navigation">
<div class="zzz">yes2</div><!-- hello -->
<div class="zzz">yes2</div><!-- hello -->
<div class="zzz">yes2</div><!-- hello -->
<div class="zzz">yes2</div><!-- hello -->
<div class="zzz">yes1</div><!-- hello -->
<div class="zzz">abcdefghijk</div>
</div>

</body>
</html>

Kez1975
Apr 29th, 2007, 01:48 PM
Thank you sooooo much. I removed display:block and the extra 'tact' has gone.

I'm not quite sure why it was there in the first place. I think I was following a tutorial in a CSS book about navigation lists using a background image. The tutorial only demonstated one list item so used display:block and no float:left.

Obviously once I added more navigation and floated them it didn't cross my mind to remove the display:block!!

I've also changed the imported stylesheet to a link, not sure why I did that either!!

You're all stars!!
Kerry

PS. Thanks for your lovely comment rmedek :)

kewlceo
Apr 29th, 2007, 02:17 PM
I'm glad you posted this issue, as now I'll be aware of the possibility myself.

Your design is terrific. Hope to see more!