Welcome to WebmasterWorld Guest from 54.197.187.2

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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members