[CSS] Rollovers not floating correctly

programming web dev
1

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:

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.