Welcome to WebmasterWorld Guest from

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)

New User

10+ Year Member

joined:Aug 22, 2003
votes: 0

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)

Senior Member

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

joined:May 26, 2000
votes: 0

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)

Senior Member

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

joined:Oct 1, 2002
votes: 0

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;}

background: yellow;
margin: 0;
padding: 0;
list-style: inside;

background: lime;
margin: 0;
padding: 0;
list-style: outside;

<div id="container">
<ul class="inside">
<li>item one</li>
<li>item one</li>
<li>item one</li>
<li>item one</li>
<ul class="outside">
<li>item one</li>
<li>item one</li>
<li>item one</li>
<li>item one</li>


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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
votes: 0

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.



Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members