...

View Full Version : Oddity with UL margin-left in IE



bauhsoj
11-30-2005, 09:08 PM
If no left margin is set in IE then the unordered list displays fine. However, if I set the left margin to "0px" using CSS the list runs off the left edge of the page.

In Firefox I can set the left margin to "-10px" and have the UL element move over 10 pixels to the left. To move it to the same position in Internet Explorer I have to set the left margin to "30px". This is a pretty huge difference.

How is it that IE treats a positive 30 pixel margin as negative? Am I doing something wrong here? :confused:

Also, is the treatment of the left margin of the UL element uniform in all other browsers except IE?

_Aerospace_Eng_
11-30-2005, 09:10 PM
No its not uniform in all browsers. You'll have to play around with the padding and margin something like margin-left:-7px; and padding-left 15px should work, its been a while.

bauhsoj
12-01-2005, 06:37 AM
I have it looking right in Firefox 1.5, Internet Explorer 6, and Safari 2. I have yet to test it in Opera but that shouldn't be a problem.

Both Firefox and Safari display it as expected with a negative margin producing a negative shift. If Opera renders it the same then that means IE is the only oddball out.

_Aerospace_Eng_
12-01-2005, 06:40 AM
Does your ul happen to be floated to the left or right?

bauhsoj
12-01-2005, 06:45 AM
Does your ul happen to be floated to the left or right?

What do you mean? Currently in Firefox and Safari the UL element moves slightly to the left with "margin-left" set to "-10px" and the same occurs in IE if "margin-left" is set to "30px". Without the margin setting the UL element moves its contents to the right of the edge of the window. With the margin set, that shift to the right is reduced somewhat so that it moves back towards the edge of the window.

_Aerospace_Eng_
12-01-2005, 06:48 AM
What I mean is do you have float:left; or float:right; on the styles of your ul?

bauhsoj
12-01-2005, 07:14 AM
What I mean is do you have float:left; or float:right; on the styles of your ul?
Nope.

_Aerospace_Eng_
12-01-2005, 07:16 AM
Can you post your html and CSS please?

bauhsoj
12-01-2005, 07:19 AM
<style>
ul {
margin-left:-10px
}
</style>
<ul>
<li>list item line 1</li>
<li>list item line 2</li>
</ul>

_Aerospace_Eng_
12-01-2005, 07:25 AM
A ul also has a default padding and its not the same in IE as it is in other browsers. It also has a default top margin but not in IE. IE by default has a page margin on the body as well.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>&nbsp;</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
ul {
margin:0 0 0 -10px;
padding:0;
}
</style>
<body>
<ul>
<li>list item line 1</li>
<li>list item line 2</li>
</ul>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum