Forum Moderators: not2easy
I've got a problem with IE7 rendering a list next to an image. Firefox 2.x displays the information properly. Basically, the left margin associated with the UL is being ignored in IE7.
If anyone can be of help, I would greatly appreciate it. I have searched around quite a bit and have not found a description and solution to this problem that I can recognize as such.
The code below requires an image. For the sake of testing the code below in my own sandbox, I used a 200x200 image. Mine is here, assuming the forum allows me to link to it (I read the rules...).
<!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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<meta name="generator" content="WordPress" />
<style>
ul, ol {
margin-top: 1em;
}
ul li {
padding-top: 0.25em;
margin-left: 3em;
list-style-type: disc;
}
img {
padding: 0;
margin: 0;
}
img.left {
padding: 0.2em;
border: 1px solid #bbb;
margin: 0.5em 0.8em 0.5em 0;
float: left;
clear: left;
}
</style>
</head><body>
<img class="left" src="emu2.jpg" alt="" />
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul></body>
</html>
[edited by: SuzyUK at 9:55 pm (utc) on Jan. 22, 2008]
[edit reason] no links please [/edit]
(PS: where I say left float and left margin it could equally apply to right float and right margin but I'm going by your code because lists next to floats have their own foibles)
*tip: while working on this call an image that doesn't exist so you can see through to the background
there are two things going on here, first any element next to a left float actually sits underneath that float (put a background color on the <ul> to see it*) - this not always the case with IE6 but bear with me. the following covers all I hope ;)
If you do use a left margin on your <ul> it, the margin, is actually underneath the left image, and it's just the float rules that are making that <ul> clear to the right of the image.. e.g. if you remove the left margin off the <ul> you should see that <ul> list itself clears though the bullets/indent of the <ul> are underneath where the image should be* - what you need to do is not margin the <ul> but instead put a right margin on the image. What you want to do is margin the image from list instead of the list from the left side - easy huh.
second: regarding the ul itself, some browsers use padding and some use margin to create the left indent so if your gap with the right margin on image is not the same x-browser it's likely the difference between margin and padding under that float - i would recommend you cancel both padding and margin on the ul and set one or the other or else leave them both at zero and increase/decrease the image's right margin as required - you shouldn't then need to margin the <li> at all.
e.g. with your html in OP
ul {
padding: 0; margin: 0; /* zero both */
/* the bullets, or indent at this point will be under the float */
margin-top: 1em;
background: #abc; /* temp color to show it's under image */
}
ul li {
list-style-type: disc;
padding-top: 0.25em;
}img {
padding: 0.2em;
border: 1px solid #bbb;
margin: 0.5em 4em 0.5em 1em; /* margin the right side of the image here to push the list with the bullets out of the way */
float: left;
clear: left;
}
-Suzy
I played around a bit based on your reply.
There are some problems with putting the right margin on the floated-left image.
I want lists (or their items) indented 3ems from the left so they stand out in body text. Putting a 3em left margin on my ULs and OLs does this fine in Firefox (so does putting the 3em left margin on LIs instead). When faced with a floated-left image, the indention of the list is carried out properly in Firefox. IMAGE -> 3EMS -> LIST
With the above scenario, IE7 indents the list 3em from the body text properly but completely ignores the 3em margin-left when the list is to the right of a left-floated image (or any box I supposed).
Now...
A 1em right margin is reasonable on the image. Body text flows down the image's side at a reasonable distance away... right where I want it.
If I use a 2em margin, everything gets pushed away from the image (the body text...). So now in Firefox, my body text is too far away from the image and in IE7 the list is STILL not indented properly relative to the body text. It lines right up with the body text in fact.
What I am saying in all of this is that IE7 and Firefox (both at once) will not render properly what I am expressing, no matter where I place the margin.
Let me show you with better code (content inside body tag is relevant to reproduce!):
<!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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<meta name="generator" content="WordPress" />
<style>
ul, ol {
background: #ddd;
}
ul li {
list-style-type: disc;
margin-left: 3em; /* must stay, want it */
}
img {
padding: 0;
margin: 0;
}
img.left {
margin-right: 1em;
float: left;
clear: left;
}
</style>
</head><body>
body text body text body text body text body text body text body text body text body text body text body text body text body
text body text body text body text body text body text body text body text body text
<ul>
<li>these</li>
<li>are</li>
<li>indented properly relative to</li>
<li>body text above</li>
<li>due to 3em margin-left on</li>
<li>the li</li>
<li>PERFECT!</li>
</ul><img width="200" height="200" class="left" src="emu2.jpg" alt="" />
body text body text body text body text body text body text body text body text body text body text body text body text body
text body text body text body text body text body text body text body text body text
<ul>
<li>in IE7, these items are not</li>
<li>indented properly relative</li>
<li>to body text just above.</li>
<li>should be 3ems but is not due to</li>
<li>IE7 and the floated image</li>
</ul></body>
</html>
[edited by: SuzyUK at 3:03 pm (utc) on Feb. 29, 2008]
[edit reason] formatting [/edit]
I came across something recently which stuck in my head although I couldn't see the significance of it at the time, while searching I cam across this post while searching so it's only fair you get the reply
I now think lists beside floats is an application for this neat trick!
it seems that compliant browsers are supporting the CSS3 implementation of overflow on elements. The usefulness of this on elements to clear floats is quite well known now. It clears floats because of the way elements with overflow compute their height.. guess what they do it width too now!
so how does that help?
With your code above if you had set hasLayout=true on the list for IE you would have got what you wanted because that would have thrown IE into its quirky float model and made the list sit beside the float instead of going underneath it
if you also add overflow: auto; to the list, then compliant browsers will do the same!
(note overflow sets hasLayout to true for IE7, but you would need to use something else for IE<=6 )
then it's much easier to even up the list indent after that, same rules as always, zero the padding and margin (the defaults) on the <ul>, and set one or the other, you want a margin.. so
ul, ol {
background: #ddd;
zoom: 1; /* hasLayout for IE<= 6 */
overflow: auto; /* shrink the list to sit beside floats in compliant browsers */
margin: 0; padding: 0; /* zero the defaults so only one or other is used per you margin request below */
}
ul li {
list-style-type: disc;
margin-left: 3em; /* must stay, want it */
}
img {
padding: 0;
margin: 0;
}
img.left {
margin-right: 1em;
float: left;
clear: left;
}
it also works to keep headings with backgrounds, borders and things like that beside and margined from floats
-Suzy
