Forum Moderators: open
This is not ideal as it throws off the position by a long way in IE and Moz.
Any ideas?
Even then, you can run into problems when you have a floated element to the left of your lists and list items. Different browsers calculate left-margin in various ways in that situation. The only resolution I've found is to give up on consistent cross-browser display and work with the css rules until each browser at least gives a usable version of the page.
setting the list-style-position: inside; brings the bullet inside of the <ul> and may solve your problem.
try this example to see the difference;
<style type="text/css" media="screen">
body{margin: 0; padding: 0;}
#container{width: 400px; margin: auto;}ul.inside{
background: yellow;
margin: 0;
padding: 0;
list-style: inside;
}ul.outside{
background: lime;
margin: 0;
padding: 0;
list-style: outside;
}</style>
</head>
<body>
<div id="container">
<ul class="inside">
<li>item one</li>
<li>item one</li>
<li>item one</li>
<li>item one</li>
</ul>
<ul class="outside">
<li>item one</li>
<li>item one</li>
<li>item one</li>
<li>item one</li>
</ul>
</div>
</body>
Suzy
*{
-moz-box-sizing: border-box; /* Mozilla */
box-sizing: border-box; /* Opera & IE5 Mac */
}
This will make sure that sizings are relatively the same in IE / Moz / Opera because they will all be using the same box model then.
Jordan
