CSS meny problem.

[mindsleep]

Har lite problem med "Sliding doors" tekniken som beskrivs här:

http://www.alistapart.com/articles/slidingdoors2/

 

Fungerar fin fint i på Windows plattformar men det ser ut som om det fungerar mindre bra på Linux plattformar.

 

På fel.gif kan ni se hur det ser ut på Ubuntu. Har även bifogat btn.gif och bar.gif som jag använt i koden.

 

HTML:

[LOG]

<div id="navlist">

<ul>

<li><a href="#">A</a></li>

<li><a href="#" id="act">B</a></li>

</ul>

</div>

[/LOG]

 

CSS:

[LOG]

#navlist

{

height: 50px;

background: url(../images/bar.gif) repeat-x;

}

 

#navlist ul

{

margin: 0;

white-space: nowrap;

padding: 0;

}

 

#navlist li

{

float: left;

list-style-type: none;

margin-left: 5px;

}

 

#navlist a

{

display: block;

padding: 16px 30px 17px 30px;

background-color: #999;

background-image: url(../images/btn.gif);

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 14px;

}

 

#navlist #act

{

display: block;

padding: 16px 30px 17px 30px;

background-color: #999;

background-image: url(../images/btn.gif);

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 14px;

background-position: 0px -50px;

}

[/LOG]

 

Hur kan jag fixa detta? Notera felet. Att "A" lådan visar början av "B" (grön linje) i slutet och att "B" lådan visar början på "A" (rosa linje) i slutet.