Sliding doors - IE6 compatible?

[sarah]

This works fine in the usual browsers and looks nice. But is there anyway to fix it for IE6? I need it to work, because even though the rest of the world seems to have upgraded to IE7 lots of Portuguese and Brazilians seem to stick to the infernal IE6.

If there is no way I will have to say goodbye to it and find something more plain and simple.

 

Home
Quem Somos
Mosaicos
Galeria
Novidades
Cursos
Como Aderir
Links

 

div#navbar  {background-color: #3e5f61;
           height: 44px;
           width: 875px;
           margin:0; padding: 0;
           }

ul#navlist {list-style: none;
           margin: 1px; 
          }

a.button  
   {background: transparent url('buttona.png') no-repeat scroll top right;
   color: #444;
   display: inline;
   float: left;
   font: normal 15px verdana, arial, sans-serif;
   height: 38px;
   margin-top: 3px;
   margin-right: 6px;
   padding-right: 18px; /* sliding doors padding */
   text-decoration: none;
}

a.button span

  { background: transparent url('buttonspan.png') no-repeat;
   display: inline;
   line-height: 38px;
   padding: 10px 0 10px 18px;
} 

ul#navlist a:hover 
                           {background-image: url(buttonahover.png);}
ul#navlist a:hover span  {background-image: url(buttonspanhover.png);}
ul#navlist a:active span {padding:5px 0 3px 18px;}

[jlhaslip]

Well, since png's fail in IE6, start with an image format that IE6 understands. Png is not one of them. Do you need opacity or transparency in the image? Can you use a gif or jpg instead?

[sarah]

Well, the png would be the smallest of the problems that IE6 has with it, and I can change these, I think they are not essential.

The positioning issues are more difficult - the buttons appear on the proper place horizontally, but each of them occupies an own line, if that explanation is more or less understandable. And that is the point I could not fix so far...

[Wickham]

the buttons appear on the proper place horizontally, but each of them occupies an own line, if that explanation is more or less understandable.

 

That's the key!

 

Add this to the css:-

ul#navlist li { float: left; }

 

I've tested it.

 

Edit: Firefox was OK with your code but IE7 put each item on a separate line, but spaced out as if they were horizontal. We've met that problem before. Display: inline is not enough.

Edited March 22, 2009 by Wickham

[sarah]

Thank you all so much!

 

Everything in place, gif-images, buttons in line and you saved me from big headache of rethinking all my design.

 

I am really happy now!!

 

Greetings,

Sarah