Question

Given this HTML:

<ul id='topnav'>     <li id='topnav_galleries'><a href='#'>Galleries</a></li>     <li id='topnav_information'><a href='#'>Information</a></li> </ul> 

And this CSS:

#topnav_galleries a, #topnav_information a {     background-repeat: no-repeat;     text-indent: -9000px;     padding: 0;     margin: 0 0;     overflow: hidden;     height: 46px;     width: 136px;     display: block; } #topnav { list-style-type: none; } #topnav_galleries a { background-image: url('image1.jpg'); } #topnav_information a { background-image: url('image2.jpg'); } 

How would I go about turning the topnav list into an inline list?

Answer 1

Try this:

#topnav {     overflow:hidden; } #topnav li {     float:left; } 

And for IE you will need to add the following:

#topnav {     zoom:1; } 

Otherwise your floated < li > tags will spill out of the containing < ul >.