homepage Welcome to WebmasterWorld Guest from 54.167.238.60
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

    
<ul> in Opera 7
query about positioning of <ul> in Opera
Cenuij




msg:1585105
 4:06 pm on Aug 22, 2003 (gmt 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?

 

tedster




msg:1585106
 8:16 pm on Aug 22, 2003 (gmt 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.

SuzyUK




msg:1585107
 9:19 pm on Aug 22, 2003 (gmt 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;}

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

MonkeeSage




msg:1585108
 5:33 am on Aug 23, 2003 (gmt 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.

Jordan

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Opera Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved