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