Forum Moderators: not2easy
I have created a list with background color by using the following code. My problem is that it shows up properly in IE but not Mozilla.
In IE, the background color displays in the center of the page with white space margin on the left and right; however, with Mozilla, the background color goes all the way to left and right side of the page ( the background color table is extend way further to the left and right than IE)
Can anyone show me how to solve this problem? Thanks in advance
CSS code
#list ul{
width:540px;
background:#eee;
border: 1px solid #eee;}
#list ul li{
color: #333333;
list-style: inside;
font-family: tahoma; font-weight: strong; font-size: small; text-align:left;
line-height:17px;}
HTML code
<p> text text..............
<div id="list">
<ul>
<li>1 - item 1 </li>
<li>1 - item 2 </li>
<li>1 - item 3 </li>
<li>1 - item 4 </li>
</ul>
</div>
</p>
A little difficult to grasp what you mean but I just tested it in Moz and that's exactly how I'd expect it to work.
Do you mean you want the grey color to start right on the actual bullets not 1 1/2 inches to the left of them?
Nick
[edited by: Nick_W at 1:42 pm (utc) on June 18, 2003]
I've just had a look at this and am unable to recreate the problem. The only thing that appears a little different is that the left-margin is greater in mozilla 1.0 than it is in Opera7.11 or IE6.
It looks to me like both IE and Moz are adhering to the width... Do you have some style code for the #list?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
ul#list{
width:540px;
background:#eee;
border: 1px solid #eee;
padding:0
}ul#list li{
color: #333333;
list-style: inside;
font-family: tahoma; font-weight: strong; font-size: small; text-align:left;
line-height:17px;}-->
</style>
</head><body>
<p> text text..............
<ul id="list">
<li>1 - item 1 </li>
<li>1 - item 2 </li>
<li>1 - item 3 </li>
<li>1 - item 4 </li>
</ul>
</p></body>
</html>
Seems Moz adds padding to the list, so 'padding:0'.
I also changed things a bit, which results in less code. Since you are using an id for the list, you're only using it once, no need to make it a div, just apply it to the ul.
[edited by: mipapage at 1:46 pm (utc) on June 18, 2003]
Add padding: 0px; (or whatever suits) to #list ul
This should make everything look the same way.
HTH
I tried the fix mipapage and BlobFisk suggested. After adding the
padding:0; Thanks
Have you got some styling associated with the #list div that might be affecting this on your end?
Also, do you have the correct doctype decleration?
Nick
IE 6 looks like
text text .............
____________________
¦
¦
¦____________________
Moz 1.6 looks like
text text .............
____________________
¦
¦
¦____________________
Or have I missed the point?
Nick
IE is about 100px further right compare to Mozilla. Any suggestions?
Try setting margin:0 on the list as well.
I think IE uses margins to indent lists and moz uses padding.
It just sounds like the difference in how UA's handle lists to me. Some add more padding than others. It's not a precise medium.
Not sure about that one, Nick. I see exactly the same thing in IE6 as I do in Moz.
securitall, what IE are you using?
Nick
margin:0;Thank all sooo much for helping newbie like me. I really appreciate all the helps and suggestions.
Thank you.
Nick
I am using version 6 (or version 6.0.2800.1106).
Well, glad that you got it solved!
[lxr.mozilla.org...]
[lxr.mozilla.org...]
