Firefox v. IE6 - Repeating Element?

Hi,

I have a navigation bar on the left hand side of my web pages. This navigation bar looks great in Firefox but has a repeating element in IE6. I can post the code if needed but does anyone know off the top of their heads what can cause this? The words "Age Group" do NOT appear twice in my code but displays twice on the page.

Screen shots included.

 

Ooops, images did not get attached the first time...

 

Here is the CSS...

* {
margin:0;
padding:0;
}


div.sdmenu {
float: left;
width: 220px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
background: #0798d2;
color: #D1CEC7;
text-align: left;
}


.header {
clear: both;
float: left;
display: block;
background: #0798d2 url(/edp_pencilnav_d.jpg) no-repeat 7px;
padding-left: 12px;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
width: 208px;
height: 32px;
line-height: 32px;
color: #000000;
}

div.sdmenu div {
clear: both;
float: left;
display: block;
width: 220px;
background: white repeat;
overflow: hidden;
border-bottom: 2px solid #0798d2;
}

div.sdmenu div.collapsed {
display: block;
clear: both;
float: left;
height: 38px;
width: 220px;
}

div.sdmenu div span {
clear: both;
float: left;
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 30px;
font-weight: bold;
cursor: pointer;
width: 190px;
height: 35px;
line-height: 35px;
}
div.sdmenu div.collapsed span {
clear: both;
float: left;
display: block;
height: 35px;
line-height: 35px;
background: #0798d2 url(/edp_pencilnav_d.jpg) no-repeat;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
width: 220px;
}


#sideNavColumn a{
color: #FFFFFF;
float: left;
padding: 5px 30px;
display: block;
width: 190px;
}

#sideNavColumn .navHeader{
display: block;
float: left;
width: 200px;
height: 38px;
line-height: 40px;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
padding-left: 20px;
background: #0798d2 url(/edp_top_pencilnav.jpg) no-repeat;
}

#sideNavColumn .categoryName{
display: block;
float: left;
width: 200px;
height: 35px;
line-height: 35px;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
padding-left: 20px;
background: #0798d2 url(/edp_pencilnav_u.jpg) no-repeat 7px;
}

#sideNavColumn .alsoShopBy{
display: block;
float: left;
width: 200px;
height: 22px;
line-height: 22px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
background: #0798d2;
}


#sideNavColumn .categoryName:hover,
#sideNavColumn .categoryName:focus,
#sideNavColumn .categoryName:active{
display: block;
float: left;
width: 200px;
height: 35px;
line-height: 35px;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
padding-left: 20px;
background: #0798d2 url(/edp_pencilnav_d.jpg) no-repeat 7px;
}
div.sdmenu div a {
float: left;
background: #0798d2;
display: block;
color: #000000;
width: 220px;
}
div.sdmenu div a.current {
display: block;
float: left;
background: #0798d2;
width: 220px;

}
div.sdmenu div a:hover {
float: left;
display: block;
background: #0798d2;
color: red;
text-decoration: underline;
width: 220px;
}




Here is the rendered html...

<div style="float: left" id="my_menu" class="sdmenu">

<a href="CategoryDisplay?N=1269+1216">Banners</a><br />
<a href="CategoryDisplay?N=1269+1217">Borders</a><br />
<a href="CategoryDisplay?N=1269+1218">Bulletin Board Accents</a><br />
<a href="CategoryDisplay?N=1269+1219">Bulletin Boards</a><br />

<span class="alsoShopBy">Also Shop by...</span>

<div class="collapsed">
<span class="categoryName">Season</span>
<a href="CategoryDisplay?N=1269+1203+4294967271">Fall</a>
<a href="CategoryDisplay?N=1269+1203+4294948080">Other</a>
<a href="CategoryDisplay?N=1269+1203+4294967282">Spring</a>
<a href="CategoryDisplay?N=1269+1203+4294967276">Winter</a>
</div>

<div class="collapsed">
<span class="categoryName">Age Group</span>
<a href="CategoryDisplay?N=1269+1203+4294957710">All</a>
</div>

</div>

 

OK, I have modified my code slightly and still have roughly the same problem... hasn't anyone run into this before? I might have to scrap my code and start over but I really hope that's not necessary.

I've been staring at this for way too long and I've just been spinning my wheels.

Here is the updated code.

CSS

* {
margin:0;
padding:0;
}

#sideNavColumn { /* left column for the side nav */
float: left;
display: block;
width: 220px;
margin: 0 0 0 0;
margin-right: 6px;
padding-top: 7px;
}

#my_menu{
float: left;
display: block;
width: 220px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
background: #0798d2;
color: #D1CEC7;
text-align: left;
}


#my_menu .header {
clear: both;
float: left;
display: block;
background: #0798d2 url(/pages/Edupress/images/edp_pencilnav_d.jpg) no-repeat 7px;
padding-left: 12px;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
width: 208px;
height: 32px;
line-height: 32px;
color: #000000;
}

div.sdmenu div {
clear: both;
float: left;
display: block;
width: 220px;
background: white repeat;
overflow: hidden;
border-bottom: 2px solid #0798d2;
}

div.sdmenu div.collapsed {
display: block;
clear: both;
float: left;
height: 38px;
width: 220px;
}

div.sdmenu div span {
clear: both;
float: left;
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 30px;
font-weight: bold;
cursor: pointer;
width: 190px;
height: 35px;
line-height: 35px;
}
div.sdmenu div.collapsed span {
clear: both;
float: left;
display: block;
height: 35px;
line-height: 35px;
background: #0798d2 url(/pages/Edupress/images/edp_pencilnav_d.jpg) no-repeat;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
width: 220px;
}


#my_menu a{
color: #FFFFFF;
clear: both;
float: left;
display: block;
padding-left: 30px;
height: 20px;
background: #0798d2;
width: 190px;
}

#my_menu .collapsed a{
display: none;
}

#sideNavColumn .navHeader{
display: block;
float: left;
width: 200px;
height: 38px;
line-height: 40px;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
padding-left: 20px;
background: #0798d2 url(/pages/Edupress/images/edp_top_pencilnav.jpg) no-repeat;
}

#my_menu .collapsed .categoryName{
display: block;
float: left;
width: 200px;
height: 35px;
line-height: 35px;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
padding-left: 20px;
background: #0798d2 url(/pages/Edupress/images/edp_pencilnav_u.jpg) no-repeat 7px;
}

#my_menu .categoryName{
display: block;
float: left;
width: 200px;
height: 35px;
line-height: 35px;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
padding-left: 20px;
background: #0798d2 url(/pages/Edupress/images/edp_pencilnav_d.jpg) no-repeat 7px;
}

#my_menu .alsoShopBy{
display: block;
float: left;
width: 190px;
height: 22px;
line-height: 22px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
background: #0798d2;
}


#my_menu .collapsed .categoryName:hover,
#my_menu .collapsed .categoryName:focus,
#my_menu .collapsed .categoryName:active{
display: block;
width: 200px;
float: left;
height: 35px;
line-height: 35px;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
background: #0798d2 url(/pages/Edupress/images/edp_pencilnav_d.jpg) no-repeat 7px;
}

#my_menu a.current{
display: block;
float: left;
background: #0798d2;
width: 190px;

}
#my_menu a:hover{
float: left;
display: block;
background: #0798d2;
color: red;
text-decoration: underline;
width: 190px;
}


HTML being rendered...

<div id="my_menu" class="sdmenu">
<a href="CategoryDisplay?N=1269+1216">Banners</a><a href="CategoryDisplay?N=1269+1217">Borders</a>
<a href="CategoryDisplay?N=1269+1218">Bulletin Board Accents</a>
<a href="CategoryDisplay?N=1269+1219">Bulletin Boards</a>
<span class="alsoShopBy">Also Shop by...</span>

<div class="collapsed">
<span class="categoryName">Season</span>
<a href="CategoryDisplay?N=1269+1203+4294967271">Fall</a>
<a href="CategoryDisplay?N=1269+1203+4294948080">Other</a>
<a href="CategoryDisplay?N=1269+1203+4294967282">Spring</a>
<a href="CategoryDisplay?N=1269+1203+4294967276">Winter</a>
</div>

<div class="collapsed">
<span class="categoryName">Age Group</span>
<a href="CategoryDisplay?N=1269+1203+4294957710">All</a>
</div>

</div>

 

Try getting rid of this....

#my_menu .collapsed .categoryName{
display: block;
float: left;
width: 200px;
height: 35px;
line-height: 35px;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
padding-left: 20px;
background: #0798d2 url(/pages/Edupress/images/edp_pencilnav_u.jpg) no-repeat 7px;
}

 

I tried that and it didn't work.

All that accomplished was making the yellow pencil looking button the orange pencil looking button instead. (button should be yellow when closed, orange when expanded or hovered upon).

Thanks for the suggestion though.

 

You're code is very confusing, I'm trying to figure out what it does but it structured in a way that confuses me. I'll keep trying to figure it out but I cannot guarantee I will.

 

I agree. It's actually code someone at my work took from another site (dynamic drive I think).

I'm thinking about trashing it and starting over.

 

Ugh, Dynamic Drive. That's probably the problem. Why don't you post a link to your page here? I have IE 6, IE 7, Firefox, Opera and Safari open here.

 

Silly question, but do you have any comments near the floats that build the page? (again, this is why we'd need a url to the whole code or the whole code - as Dan suggested) - IE has what's called a 'double render bug' - but it only occurs if comments are placed BETWEEN floats. That's what it LOOKS like is happening here, but without the full code to verify...

Usually if you have something like
</div><!-- end sidebar -->

That will screw up IE bad, which is why my style guide was revised a while back to do comments
<!-- #sidebar --></div>

Which doesn't trip that IE problem - it's the only thing I'm aware of that trips the double render bug. This one can drive you nuts because you think it's a CSS issue while throwing haslayout and other bugfixes at it do nothing, when in fact it's a COMMENT in the html that's making it do that.

Again though, it's just a wild guess.

Apart from that, those spans should probably be header tags (save yourself a class), the list of anchors should probably be a list, and as Dan suggested, stay away from dynamic drive. Thier scripts are cute to see what's possible, but their code sucks donkey SO BAD that it is completely unsuited for live deployment.

 

You do not need display: block; on elements that are also set to float.. floated elements become block level by default, and any element that has float set on it is supposed to ignore the display property anyway..

but you might want to add display: inline; to floated elements as it fixes 2 or 3 IE6 bugs, double margins, duplicating characters (which you're describing) and can't remember the third something to do inherited margins but well anway one fix for three potential problems

all browsers ignore the display:inline; (as in the floated block still remains a block) like they should, but IE mysteriously uses it for help in it's bug war ..