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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    410
    Thanks
    6
    Thanked 3 Times in 3 Posts

    CSS images all same height but not showing so on page

    Can anyone suggest what may be causing the main background image not being the same height as the left/sep/right images?

    When I make the size of the page large view it shows that the background is about 1px smaller than left/sep/right.

    Code:
    <!DOCTYPE html><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #main4 { width:822px; height: 2em; margin:auto; border: 0.01em dashed #ddd; }
    
    div#navbar4 { margin: 0em; padding: 0em; }
    div#navbar4 ul { margin: 0em; padding: 0em; }
    div#navbar4 ul li { float: left; margin: 0em; padding: 0em; list-style-type: none; }
    div#navbar4 ul li.left { background-image: url(../images/menuBG-gt-left.gif); background-repeat: no-repeat; padding: 0em 0em 0em 0.1em; }
    div#navbar4 ul li.sep { background-image: url(../images/menuBG-gt-sep.gif); background-repeat: no-repeat; padding: 0em 0em 0em 0.07em; }
    div#navbar4 ul li.right { background-image: url(../images/menuBG-gt-right.gif); background-repeat: no-repeat; padding: 0em; }
    div#navbar4 ul li a { background-image: url(../images/menuBG-gt.gif); background-repeat: repeat-x; margin: 0em; padding: 0em; }
    div#navbar4 ul li a:link { color: #0033CC; text-decoration: none; }
    div#navbar4 ul li a:visited { color: #0033CC; text-decoration: none; }
    div#navbar4 ul li a:hover { color: #6F6F6F; text-decoration:underline; }
    </style>
    
    </head><body>
    
    <div id="main4">
        <div id="navbar4">
          <ul>
            <li class="left"><a href="../index.php">Home</a></li>
    		<li class="sep"><a href="../aboutus.php">About Us</a></li>
    		<li class="right">&nbsp;</li>
          </ul>
        </div>
    </div>
    
    </body></html>
    Attached Images Attached Images     

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Posts
    410
    Thanks
    6
    Thanked 3 Times in 3 Posts
    this is what the page looks like.
    Attached Thumbnails Attached Thumbnails CSS images all same height but not showing so on page-1.jpg  


  •  

    Posting Permissions

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