Firefox Background Image In Inline List LI UL
Yes, like just about every other CSS problem I’ve ever had, I wasted 2 hours looking for a problem that needed about 1/3 a line of code. The more I learn about CSS, the more I realize it is a piece of junk held together by duct tape. That’s another story.
I was attempting to use an inline list in the header of my new Dog Digg site called DogSniff.com. I usually don’t use background image tabs just for simplicity’s sake, but I felt that this site really required the tabbed look.
My HTML:
<div id="menu">
<ul>
<li><a href="http://www.dogsniff.com">Hot Topics</a></li>
<li><a href="http://www.dogsniff.com/upcoming">What's New</a></li>
<li><a href="http://www.dogsniff.com/comments">Comments</a></li>
<li><a href="http://www.dogsniff.com/submit">Submit</a></li>
</ul>
</div>
I setup the usual inline list code:
#menu ul {
height: 30px;
display: inline;
margin: 0;
padding: 0;
}
#menu ul li {
display: inline; background-image:url(tab001.gif);
padding: 5px 0 0 0;
margin: 0px;
list-style-type: none;
width: 116px;
}
It looked great in IE but Firefox wouldn’t listen to my width: 116px or height: 30px styles. Great! Of course, if IE works and Firefox doesn’t, there is usually something wrong with my implementation of the entire CSS.
It turns out that IE paying attention to my width and height settings is an error as LI pages should not use “block” styles (which I’m slowly getting the hang of).
Just Add float:left
It turns out that the solution for getting my background image to work well with both IE and Firefox is to use a float: left in the li style like this:
#menu ul li {
float: left;
display: inline; background-image:url(tab001.gif);
padding: 5px 0 0 0;
margin: 0px;
list-style-type: none;
width: 116px;
}
That took care of it for me!
Brandon Drury
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.