Page 1 of 2
[solved] floating and clearing not working in IE
Posted: Tue Aug 21, 2007 2:39 pm
by smudge
Hello, I am having some difficulty with IE, in that a floated and cleared img does not clear:
Code: Select all
<p>lorem ispum...</p>
<img style='float:right; clear:left;'>
<p>lorem ispum...</p>
The image floats to the right, but leaves a image sized gap between the 2 paragraphs.
Strangely enough, on a different page, I have the exact same thing, but floated left and cleared right, and it works.
The only difference is that on the non-working page, the <p>s have a left margin of 20px.
I've tried changing display, margins, padding, etc, and nothing works. The closest I've come is when I discovered that clear:left applied to everything in the table cell duplicates IE's results in FireFox, and doesn't change anything in IE.
Why does IE do this and how do I fix it?
Posted: Tue Aug 21, 2007 3:04 pm
by superdezign
Leaves a gap? The probably *because* you use the clear.
The clear attribute makes it so that the element no longer follows other floats of the cleared type. I'm not sure what you are trying to accomplish...
Posted: Tue Aug 21, 2007 3:23 pm
by smudge
Ok, I took out the clear:left and it did nothing.
Posted: Tue Aug 21, 2007 3:31 pm
by feyd
What specific effect are you trying to get?
Posted: Tue Aug 21, 2007 3:51 pm
by smudge
I just want the text on one side of the table cell and the image on the other without the gap b/t paragraphs.
Re: floating and clearing not working in IE
Posted: Tue Aug 21, 2007 3:51 pm
by nykoelle
smudge wrote:Hello, I am having some difficulty with IE, in that a floated and cleared img does not clear:
Code: Select all
<p>lorem ispum...</p>
<img style='float:right; clear:left;'>
<p>lorem ispum...</p>
The image floats to the right, but leaves a image sized gap between the 2 paragraphs.
try embedding the img into the p?
Code: Select all
<p>Lorem Ipsum <img src style="float: right;" alt="My Image" /><br /><br />Second paragraph.</p>
that's always worked for me. Unsure how standard it is.
Posted: Tue Aug 21, 2007 4:34 pm
by feyd
smudge wrote:I just want the text on one side of the table cell and the image on the other without the gap b/t paragraphs.
Can you provide us with a basic picture (comp) to illustrate what you're wanting?
Posted: Wed Aug 22, 2007 1:04 am
by matthijs
Have you given the img a width? Floating an image to the right should be no problem, even for IE.
Posted: Wed Aug 22, 2007 4:39 pm
by smudge
Ok, basically, for the code above, I want it to look like this:
Code: Select all
Some text in a paragraph... |-----|
Some other text in another paragraph... |_____|
And it looks like this:
Code: Select all
Some text in a paragraph...
|-----|
|_____|
Some other text in another paragraph...
Posted: Wed Aug 22, 2007 5:39 pm
by feyd
That would appear to be a general float that would need to be inside the paragraph markup.
Posted: Thu Aug 23, 2007 1:23 am
by matthijs
What version of IE are you having problems with?
This:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam justo arcu, sagittis vel, cursus ullamcorper, euismod placerat, dolor. Sed fermentum urna eu urna. Donec ullamcorper. Integer ac augue.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam justo arcu, sagittis vel, cursus ullamcorper, euismod placerat, dolor. Sed fermentum urna eu urna. Donec ullamcorper. Integer ac augue.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam justo arcu, sagittis vel, cursus ullamcorper, euismod placerat, dolor. Sed fermentum urna eu urna. Donec ullamcorper. Integer ac augue.</p>
<img src="" width="200" height="100" alt="" style="float:right;border:1px solid #777;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam justo arcu, sagittis vel, cursus ullamcorper, euismod placerat, dolor. Sed fermentum urna eu urna. Donec ullamcorper. Integer ac augue.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam justo arcu, sagittis vel, cursus ullamcorper, euismod placerat, dolor. Sed fermentum urna eu urna. Donec ullamcorper. Integer ac augue.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam justo arcu, sagittis vel, cursus ullamcorper, euismod placerat, dolor. Sed fermentum urna eu urna. Donec ullamcorper. Integer ac augue.</p>
</body>
</html>
Works as you want in both IE6 and 7
Posted: Sat Aug 25, 2007 9:13 am
by smudge
It's IE 6. I tried embedding it in, but the paragraphs below got pushed down as well.
This was the code before:
Code: Select all
<p class="dblue indent" style="font-size:13px;">blah blah blah...</p>
<img style="float:right;margin:0px; padding:0px; display:inline" height="200"/>
<p class="green indent" style="float:left;">Some text<br />
lorem ispum dolor sit amet<br /><br />
consectetuer adipiscing elit<br />
aliquam justo arcu</p>
and I changed it to
Code: Select all
<h3>A heading</h3>
<p class="dblue indent" style="font-size:13px;">blah blah blah...</p>
<p class="green indent">Some text<img style="float:right;" height="200"/><br />
lorem ispum dolor sit amet<br /><br />
consectetuer adipiscing elit<br />
aliquam justo arcu</p>
<h3>Another heading..</h3>
<p class="indent">More Text!</p>
the class indent adds a left margin of 20px (from base.css) and inside the document, I have body *{margin-left:20px}, if that helps, but I tried removing them, and aside from screwing up my layout, it does nothing with the picture and spacing.
The picture just pushes everything from the second header down, down.
Posted: Sat Aug 25, 2007 12:38 pm
by superdezign
Have you tried it without the line breaks...?
Anyway, for what you're after, it should be fine to place the image outside of the paragraph. What I'm not getting is why you have a float:left on the second paragraph...?
You should provide a link.
Posted: Sun Aug 26, 2007 1:35 am
by matthijs
smudge, have you tried my code?
Posted: Sun Aug 26, 2007 11:52 am
by smudge
I just tried your code, and it worked, so I added the style sheet from my code and gave the paragraphs the same styles as the ones from my code, and it stopped working. Apparently, the problem has something to do with relative positioning and margins. I am trying everything I can think of right now, but so far nothing has worked.