Forum Moderators: not2easy
I have a ul/li menu on a page with a 3 column layout. the menu is pushed to the left when the text in the div to the right is longer than a certain length (explained in detail below).
DTD XHTML 1.0 Transitional
In the left column of the layout there is a LI menu:
<ul id="menu">
<li><a href="name1.html>name1</li>
<li><a href="name2.html>name2</li>
<li><a href="name3.html>name3</li>
</ul>
with css as follows:
#menu {
margin-left: 0;
padding-top: 10px;
padding-left: 0;
}
#menu li {
list-style-type: none;
}
#menu li a {
width: 120px;
background-image: url(../images/buttons/em_dash_spacer.jpg);
background-repeat: no-repeat;
padding-left: 11px;
}
#same css for hover state with different image...
in the div to the right (the center one) there is an image floated left with text to the right on it contained in <p></p> tags with a margin so the text doesn't wrap around the image:
<img src="image1.jpg" width="150px" height="200px" class="left">
<p class="text"> text<p>
<p class="text"> text...<p>
<p class="text"> text...<p>
<p class="text"> text...<p>
css as follows:
.left {float: left; margin-right: 8px;}
.text {padding-left: 175px; width: 300px;}
this all works just fine except when the text in the <p> tags extends below the image, when it does that it pushes the whole menu over in the other dive like 2 px. this DOES NOT happen in ie for some reason?
any ideas?
this is my 1st post, I tried to include everything, but if you think i left out anything relevent please let me know! thanks.
