Html – Why does IE7 when clearing a float result in a margin bug

IE 6 cannot understand multiple classes on an element correctly so i would suggest you put the

#featured-nav {
     width: 944px;
     height: 131px;
     background: url(/images/site/shadow.gif) bottom center no-repeat; 
}

as the last rule in the CSS so IE 6 picks it up last ..

you are bound to face similar problems elsewhere though ..

To be sure either create full background buttons (the whole button in one image) / create multiple elements to define each side of the button / or scrap IE 6 ...

[EDIT] it does not apply to your case .. scrap my suggestion ..

as an alternative, you can rename you selected classes and instead of using two like left.activeSlide have one named left_activeSlide...

[EDIT 2] here is some code for the specific template you mentioned in your comment

They use the cycle plugin, and in the cycle.js file (at the end) they have the initialization code which is

function onBefore(){

 var slide = $(this).attr('id');

 $('#featured-nav ul li.activeSlide').removeClass('activeSlide');

 $('#featured-nav ul li#' + slide).addClass('activeSlide');

}

now if you change it to

function onBefore(){

 var slide = $(this).attr('id');

 $('#featured-nav ul li.'+slide+'activeSlide').removeClass('leftactiveSlide rightactiveSlide middleactiveSlide');

 $('#featured-nav ul li#' + slide).addClass(slide+'activeSlide');

}

it would work with classes named leftactiveSlide, middleactiveSlide rightactiveSlide

It’s a holdover from the Netscape days:

Missing digits are treated as 0[...]. An incorrect digit is simply interpreted as 0. For example the values #F0F0F0, F0F0F0, F0F0F, #FxFxFx and FxFxFx are all the same.

It is from the blog post A little rant about Microsoft Internet Explorer's color parsing which covers it in great detail, including varying lengths of color values, etc.

If we apply the rules in turn from the blog post, we get the following:

1. Replace all nonvalid hexadecimal characters with 0’s:

   chucknorris becomes c00c0000000
   

2. Pad out to the next total number of characters divisible by 3 (11 → 12):

   c00c 0000 0000
   

3. Split into three equal groups, with each component representing the corresponding colour component of an RGB colour:

   RGB (c00c, 0000, 0000)
   

4. Truncate each of the arguments from the right down to two characters.

Which, finally, gives the following result:

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

Here’s an example demonstrating the bgcolor attribute in action, to produce this “amazing” colour swatch:

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>

This also answers the other part of the question: Why does bgcolor="chucknorr" produce a yellow colour? Well, if we apply the rules, the string is:

c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

Which gives a light yellow gold colour. As the string starts off as 9 characters, we keep the second ‘C’ this time around, hence it ends up in the final colour value.

I originally encountered this when someone pointed out that you could do color="crap" and, well, it comes out brown.