...

View Full Version : [resolved with a hack] UL padding inconcistencies.



bazz
07-11-2005, 08:27 PM
hi.

used min width for FF and then *DDmenu for IE to set its width separately.

I'm having trouble with my div/ul/li/ where I pad the left of the LI with 15px and then in FF it seems always to extend through the side of the div :(
it looks as I want it to in IE6 on XP

here's the css



#DDmenu {
float: left;
width : 145px;
height : 100%;
text-align : left;
background-color : #940031;
padding : 0;
min-width : 185px;
}
*#DDmenu {padding : 0;}
div#DDmenu ul { /* first level list */
padding: 0 0 500px 0;
margin: 0;
list-style: none;
width : 87%;
border : 0;
text-align : left;
height : 100%;

}

div#DDmenu ul li { /* 1st level list items */
float: left;
position: relative;
width : 100%;
display : block;
color : #dddddd;
white-space: nowrap;
font-size : .90em;
line-height : 25px;
background-color : #7a0029;
border : 0px solid #e5f9ff;
border-width : 0 1px 0 0;
padding : 0 15px;
border : 1px solid #940031;

}


div#DDmenu ul a:link, div#DDmenu ul a:visited, div#DDmenu ul a:active {
width : 100%;
text-decoration : none;
display : inline;
background-color : transparent;
color : #dddddd;

}

div#DDmenu ul a:hover {

color : #aaaaaa;
text-decoration : none;
background-color : transparent;
width : 100%;
border : 0px solid #aaaaaa;
border-top : 0;
border-bottom : 0;
}


and here's the html




<div id="DDmenu">
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Nearby Attractions</a></li>
<li><a href="#">Nearby Events</a></li>
<li><a href="#">Nearby Restaurants</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Room Tariffs</a></li>
<li><a href="#">Special Offers</a></li>
</ul>

</div>


I appreciate any help or pointers you might give me.


Bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum