Welcome to WebmasterWorld Guest from 54.146.47.178

Forum Moderators: incrediBILL

Message Too Old, No Replies

ul is floating to the right in firefox

ul floating

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

New User

5+ Year Member

joined:Oct 23, 2008
posts: 16
votes: 0


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]

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

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


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.

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

New User

5+ Year Member

joined:Oct 23, 2008
posts:16
votes: 0


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