List displayed wrong on firefox and internet explorer but not on chrome

Question

I'm having an issue with a header on my website. Even tho its displayed properly on chrome, I can't make it to work on firefox and IE.

<div id="exlinks" style="margin-top:-82px; ">
<ul id="strl" style="position:relative;" >
<li > <a href="/ueber-uns/" style="padding-right:3px;">Über ServerService</a></li>|
<li> <a href="/kontakt/" style="padding-right:3px;">Kontakt</a></li>|
<li> <a href="/support/" style="padding-right:3px;">Kundensupport</a></li>|
<li> <a href="/sitemap/" style="padding-right:3px;">Sitemap</a></li>|
<li> <a href="/hilfe"style="padding-right:3px;">Hilfe</a></li>|

</ul>
</div>

This is the list, displayed on the top.

here is the css:

#exlinks
{

padding-bottom:5px;
} 

#strl
{
text-align:center;
font-size:13px;
margin-left:0px;
margin-top:20px;
}




#strl li
{

display:inline;
list-style-type: none;
padding-right: 8px;
margin-left:0px;
padding-left:8px;



}
#strl li a{
display:inline;
color:#262626;
text-decoration:none;
-webkit-transition: color 0.16s ease-in;
-moz-transition: color 0.16s ease-in;
-ms-transition: color 0.16s ease-in;
-o-transition: color 0.16s ease-in;
 transition: color 0.16s ease-in;

 }

 #strl li a:hover
 {

 color:#0489b6;

 }

Chrome: [URL=http://s203.photobucket.com/user/Corbinlock/media/chrome.png.html][IMG]http://i203.photobucket.com/albums/aa4/Corbinlock/chrome.png[/IMG][/URL] Firefox and IE: [URL=http://s203.photobucket.com/user/Corbinlock/media/firefox.png.html][IMG]http://i203.photobucket.com/albums/aa4/Corbinlock/firefox.png[/IMG][/URL]

Answer 1

Here is a JS fiddle. I corrected the HTML and Css code:

HTML:

<div id="exlinks" >
<ul id="strlist" style="position:relative;" >
<li > <a href="/ueber-uns/" style="padding-right:3px;">Über ServerService</a></li>|
<li> <a href="/kontakt/" style="padding-right:3px;">Kontakt</a></li>|
<li> <a href="/support/" style="padding-right:3px;">Kundensupport</a></li>|
<li> <a href="/sitemap/" style="padding-right:3px;">Sitemap</a></li>|
<li> <a href="/hilfe"style="padding-right:3px;">Hilfe</a></li>|
<li style="padding-right:3px;">Gebührenfrei: <b>0800 111 7000</b> </li>
</ul>
</div>

CSS:

#exlinks
{

padding-bottom:5px;
} 

#strlist
{
text-align:center;
font-size:13px;
margin-left:0px;
margin-top:20px;
}




#strlist li
{
display: inline-block;
list-style-type: none;
padding-right: 8px;
margin-left:0px;
padding-left:8px;



}
#strlist li a{
display:inline;
color:#262626;
text-decoration:none;
-webkit-transition: color 0.16s ease-in;
-moz-transition: color 0.16s ease-in;
-ms-transition: color 0.16s ease-in;
-o-transition: color 0.16s ease-in;
 transition: color 0.16s ease-in;

 }

 #strlist li a:hover
 {

 color:#0489b6;

 }

FIDDLE