...

View Full Version : Image Messing Up Alignment



jokingjoey
07-01-2010, 04:03 AM
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:


#navbar {
height:37px;
line-height:33px;
padding: 2px 0 0 10px;
vertical-align:top;
background: url(images/linkbarbg1.png) repeat-x;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #FFFFFF;

}

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

#navbar ul li {
display: inline;

}

#navbar ul li a {
display: inline;
text-decoration: none;
padding-top: 5px;
padding-bottom: 4px;
padding-right: 10px;
padding-left: 10px;
color:#FFFFFF;

}

#navbar ul li a:hover
{
height: 31px;
background:url(images/linkbarbg1hover.png) repeat-x top left;
background-color: #FF3300;
}


And HTML:


<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:
http://i2.photobucket.com/albums/y29/AzorpMeh/before.jpg

My CSS Code is the same for after, here is my HTML code for after:


<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:
http://i2.photobucket.com/albums/y29/AzorpMeh/after.jpg

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?

abduraooft
07-01-2010, 09:37 AM
does anyone have any ideas? Can we have a link to your page?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum