[CSS] Rollovers not floating correctly

[NeoDreamer]

CSS:



#groupViewTabs {
margin: auto;
width: 182px;
height: 22px;
background: blue;
}

#groupViewTabs ul, li {
list-style-type: none;
}

#groupViewTabs li {
float: left;
}

#groupViewTabs li a {
display: block;
height: 0px !important;
height : 22px;
padding: 22px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}

#groupViewTabs li a:hover {
background-position: 0 -22px;
}

#groupViewTabs li#list,
#groupViewTabs li#list a {
width: 65px;
background-image: url(list.gif);
}

#groupViewTabs li#bar,
#groupViewTabs li#bar a {
width: 53px;
background-image: url(bar.gif);
}

#groupViewTabs li#settings,
#groupViewTabs li#settings a {
width: 64px;
background-image: url(settings.gif);
}


HTML



<div id="groupViewTabs">
<ul>
<li id="list"><a href="#">list</a></li>
<li id="bar"><a href="#">bar</a></li>
<li id="settings"><a href="#">settings</a></li>
</ul>
</div>


Looks like this:

http://img372.imageshack.us/img372/5324/untitled3tf2.gif

How do I get them to all go on one line? It seems like the UL is being indented as it would if I had a regular text UL.

[NeoDreamer]

PROBLEM SOLVED

I added "padding: 0px" to the UL. I don't know why it had padding in the first place.

[MTsoul]

#groupViewTabs ul, li {
list-style-type: none;
padding: 0;
margin: 0;
}

You beat me to it!

[NeoDreamer]

Hey, this compatablity crap is driving me insane.

I used "padding: 0px" to fix it in FF.
I used "margin: 0px" to fix it in IE.

What I've been doing is just random trial and error to fix stuff. Can someone explain a better way to go about it?

[MTsoul]

Learn CSS :)