Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1

Thread: CSS tab problem

  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS tab problem

    Here's my CSS:
    Code:
    #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:
    Code:
        <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:


    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?
    Last edited by -Karl-; 07-07-2010 at 11:55 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •