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
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Messing Up Alignment

    Hello all,

    I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show.

    Here is my css code for before I add the image:
    PHP Code:
    #navbar {
        
    height:37px
        
    line-height:33px;
        
    padding2px 0 0 10px;
        
    vertical-align:top;
        
    backgroundurl(images/linkbarbg1.pngrepeat-x;
        
    font-familyTahomaGeorgia"Times New Roman"Timesserif;
        
    font-size18px;
        
    color#FFFFFF;

    }

    #navbar ul {
        
    vertical-align:top;
        
    margin:0;
        
    padding:0;
        
    border0px solid #000000;
    }

    #navbar ul li {
        
    displayinline;

    }

    #navbar ul li a {
        
    displayinline;
        
    text-decorationnone;
        
    padding-top5px;
        
    padding-bottom4px;
        
    padding-right10px;
        
    padding-left10px;
        
    color:#FFFFFF;

    }

    #navbar ul li a:hover
    {
    height31px;
    background:url(images/linkbarbg1hover.pngrepeat-x top left;
    background-color#FF3300;

    And HTML:
    PHP Code:
    <div id="main">
     <
    div class="leftshadow">
      <
    div class="rightshadow">
       <
    div id="header"><img src="images/logo1.png" /></div>
       <
    div id="navbar">
        <
    ul>
         <
    li><a href="#">Milk</a></li>
         <
    li><a href="#">Eggs</a></li>
         <
    li><a href="#">Cheese</a></li>
         <
    li><a href="#">Vegetables</a></li>
         <
    li><a href="#">Fruit</a></li>
        </
    ul>
       </
    div>
      </
    div>
    </
    div
    And here is what it looks like:


    My CSS Code is the same for after, here is my HTML code for after:
    PHP Code:
    <div id="main">
     <
    div class="leftshadow">
      <
    div class="rightshadow">
       <
    div id="header"><img src="images/logo1.png" /></div>
       <
    div id="navbar">
        <
    ul>
         <
    li><a href="#">Milk</a></li>
         <
    li><img src="images/linkbarseperator1.png" /></li>
         <
    li><a href="#">Eggs</a></li>
         <
    li><a href="#">Cheese</a></li>
         <
    li><a href="#">Vegetables</a></li>
         <
    li><a href="#">Fruit</a></li>
        </
    ul>
       </
    div>
      </
    div>
    </
    div
    and here is what is looks like:


    Is there a way to fix this?

    UPDATE
    I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    does anyone have any ideas?
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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