[solved] floating and clearing not working in IE

JavaScript and client side scripting.

Moderator: General Moderators

smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

[solved] floating and clearing not working in IE

Post 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?
Last edited by smudge on Sun Aug 26, 2007 12:15 pm, edited 1 time in total.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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...
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Post by smudge »

Ok, I took out the clear:left and it did nothing.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

What specific effect are you trying to get?
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Post 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.
User avatar
nykoelle
Forum Newbie
Posts: 22
Joined: Fri Aug 10, 2007 9:05 am
Location: New York

Re: floating and clearing not working in IE

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Have you given the img a width? Floating an image to the right should be no problem, even for IE.
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Post 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...
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

That would appear to be a general float that would need to be inside the paragraph markup.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

smudge, have you tried my code?
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Post 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.
Post Reply