...

View Full Version : Resolved CSS tab problem



-Karl-
07-08-2010, 12:34 AM
Here's my CSS:

#tabs ul { margin: 0 ; padding: 0 ; list-style: none ; display: inline ; padding-top:10px; width:36px; }
#tabs ul li { height:43px; width:36px; margin: 0; padding: 0; display: inline; text-align: center; list-style: none; font-family: Arial, Helvetica, sans-serif; }
#tabs li a { color: #ff0; background-image: url('../images/button-back.png'); padding-top: 15px; padding-bottom: 15px; text-decoration: none; display: inline; width:36px;}


And my HTML:

<div id="topnav">
<div id="tabs">
<ul>
<li><a href="#"><img src="images/bone-icon.png" border="0"/></a></li>
<li><a href="#"><img src="images/globe-icon.png" border="0"/></a></li>
<li><a href="#"><img src="images/settings-icon.png" border="0"/></a></li>
<li><a href="#"><img src="images/inventory-icon.png" border="0"/></a></li>
<li><a href="#"><img src="images/clan-icon.png" border="0"/></a></li>
<li><a href="#"><img src="images/clan-icon.png" border="0"/></a></li>
</ul>
<br/><br/><br/>
<ul>
<li><a href="#"><img src="images/random-icon.png" border="0"/></a></li>
<li><a href="#"><img src="images/emote-icon.png" border="0"/></a></li>
<li><a href="#"><img src="images/note-icon.png" border="0"/></a></li>
<li><a href="#"><img src="images/achievement-icon.png" border="0"/></a></li>
<li><a href="#"><img src="images/objective-icon.png" border="0"/></a></li>
<li><a href="#"><img src="images/quest-icon.png" border="0"/></a></li>
</ul>
</div>
</div>

If you look at this image:
http://i32.tinypic.com/iwopwk.png

You can see that they are different widths, etc. When they should all have a width of 36 and height of 43. No matter what size image is placed in the <li>'s

Any ideas what I've done wrong?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum