Welcome to WebmasterWorld Guest from 54.145.44.134

Forum Moderators: incrediBILL

Message Too Old, No Replies

ul is floating to the right in firefox

ul floating

     

stadiumtigrium

2:25 pm on Mar 17, 2009 (gmt 0)

5+ Year Member



I'm using an ul for this sites menu the ploblem is that in firfox the whole list seems to float frather right compared to where it is in ie. How do I correct this?

Here is the html


<div id="header">
<div class="top_menu">
<ul class="top_menu_list" style="position: relative; left: 3px; top: 135px; z-index: 3"><li class="top_menu_list_items">
<a href="index.php">Home</a></li><li class="top_menu_list_items">
<a href="mission.php">Mission</a></li><li class="top_menu_list_items">
<a href="Register.php">Register</a></li><li class="top_menu_list_items">
<a href="planner_login.php">Planner</a></li><li class="top_menu_list_items">
<a href="promote.php">Promote</a></li><li class="top_menu_list_items">
<a href="links.php">Links</a></li><li class="top_menu_list_items">
<a href="concert.php">Concert</a></li><li class="top_menu_list_items">
<a href="Pictures.php">Pictures</a></li></ul>
</div></div>

And here is the css

.top_menu_list {
margin: 0px;
list-style-type: none;
display: inline-block;
clear: both;
width: 900px;
height: 33px;
}
.top_menu_list_items {
padding: 0px 12px 0px 12px;
display: inline;
float: none;
position: relative;
right: auto;
left: auto;
margin-right: auto;
margin-left: auto;
}
.top_menu {
font-family: Arial, Helvetica, sans-serif;
}

Thanks,For the help.

[edited by: coopster at 5:01 pm (utc) on Mar. 17, 2009]
[edit reason] no personal urls please TOS [webmasterworld.com] [/edit]

swa66

5:17 pm on Mar 17, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



As far as I remember, by default one uses padding on the <ul>, while the other uses margin on the <li>. In order to get rid of that unqual start, I usually do this:

* {
margin:0;
padding:0;
}
ul {
padding-left: 2em;
}

That way I know they'll have padding on the ul and no margin on the li, regardless of any built in browser default now or in the future.

stadiumtigrium

5:59 pm on Mar 17, 2009 (gmt 0)

5+ Year Member



That works great!
I'll have to remeber to do it this way in the future.