# \[CSS\] Rollovers not floating correctly

**URL:** https://forum.kirupa.com/t/css-rollovers-not-floating-correctly/237723
**Category:** web dev
**Created:** [September 3, 2007, 5:22am UTC](https://forum.kirupa.com/t/css-rollovers-not-floating-correctly/237723 "2007-09-03T05:22:37Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)
#### Post date: [September 3, 2007, 5:22am UTC](https://forum.kirupa.com/t/css-rollovers-not-floating-correctly/237723/1 "2007-09-03T05:22:37Z")

</div>

CSS:

```auto

#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

```auto

<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://forum.kirupa.com/uploads/kirupa/4034/39ff2277739eedd7.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.