Welcome to WebmasterWorld Guest from 54.204.210.197

Forum Moderators: open

Message Too Old, No Replies

<ul> in Opera 7

query about positioning of <ul> in Opera

   
4:06 pm on Aug 22, 2003 (gmt 0)

10+ Year Member



Opera 7 seems to position <ul> lists far to the left. In fact i have to use li { margin-left: 15px; } to bring the list back into the bounds of the containing <div>.

This is not ideal as it throws off the position by a long way in IE and Moz.

Any ideas?

8:16 pm on Aug 22, 2003 (gmt 0)

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



There are many cross-browser variations in the default display of <ul>, <ol> and <li>. There is no standard, and no convention used by all the major browsers. So, I think it's a best practice to explicitly declare rules for these three in your css whenever you use them.

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.

9:19 pm on Aug 22, 2003 (gmt 0)

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



if you set margin: 0; and padding: 0; onto the list it will move the list item to the edge of the div.. the bullet is still there but by default it is set "outside" of the <ul> container (with approximately a 15px width) this bullet is no longer there according to IE, but it is really ;)

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

5:33 am on Aug 23, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You may also want to add this to your CSS:

*{
-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