Hi folks,
I'm sure I've come across this problem before and managed to fix it, but
I can't for the hell of me think how I did it!
The problem:
I have floated images that are quite close to each other in the source
code and when the window is wide enough they start to cascade, so I
added in "clear: right;" to the CSS for the floated images and this
causes the images to stack one above the other with the text flowing
nicely around them (http://dylanparry.com/usenet/firefox.png).
Now this is all well and good in Firefox and Opera 8, but when I open it
in IE the paragraphs of text are also clearing the floated images, which
is obviously wrong (http://dylanparry.com/usenet/explorer.png).
The CSS for the floats is:
div.image {
float: right;
clear: right;
margin-bottom: 1em;
margin-left: 1em;
}
Any ideas what is going on here, and how I can stop it from happening?
Cheers,
Full Version: IE bug with cleared floats
Dylan Parry wrote:
| QUOTE |
| Hi folks, I'm sure I've come across this problem before and managed to fix it, but I can't for the hell of me think how I did it! The problem: I have floated images that are quite close to each other in the source code and when the window is wide enough they start to cascade, so I added in "clear: right;" to the CSS for the floated images and this causes the images to stack one above the other with the text flowing nicely around them (http://dylanparry.com/usenet/firefox.png). Now this is all well and good in Firefox and Opera 8, but when I open it in IE the paragraphs of text are also clearing the floated images, which is obviously wrong (http://dylanparry.com/usenet/explorer.png). The CSS for the floats is: div.image { float: right; clear: right; margin-bottom: 1em; margin-left: 1em; } Any ideas what is going on here, and how I can stop it from happening? |
Difficult without seeing the rest of your code, but IE extends divs
with floats in them, if they (the divs, not the floats) have a height.
Any height. Or, IIRC, if they have position:relative.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Jackson Brown - Load Out/Stay
Using a pointed stick and pebbles, Els scraped:
| QUOTE |
| Difficult without seeing the rest of your code |
Yeah, that was a problem caused by the pages being dynamically generated
with ASP.NET and me not having a Windows host to upload them to as a
demo... I've saved a copy of the output though, and it can be viewed at
http://dylanparry.com/usenet/dover/document.html
--
Dylan Parry
http://electricfreedom.org -- Where the Music Progressively Rocks
Dylan Parry wrote:
| QUOTE |
| Using a pointed stick and pebbles, Els scraped: Difficult without seeing the rest of your code Yeah, that was a problem caused by the pages being dynamically generated with ASP.NET and me not having a Windows host to upload them to as a demo... I've saved a copy of the output though, and it can be viewed at http://dylanparry.com/usenet/dover/document.html |
Can't say I know how to solve that one yet :(
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: S Pra Contrariar - Isso Fundo De Quintal
Using a pointed stick and pebbles, Els scraped:
| QUOTE |
| Can't say I know how to solve that one yet :( |
Ah. In which case I think that my response is to say "bugger" :(
--
Dylan Parry
http://electricfreedom.org -- Where the Music Progressively Rocks
Dylan Parry wrote:
| QUOTE |
| Using a pointed stick and pebbles, Els scraped: Can't say I know how to solve that one yet :( Ah. In which case I think that my response is to say "bugger" :( |
:-)
I found a solution ;-)
http://here.locusmeus.com/temp/dylan-float.html
It needs 2 things:
a) an extra wrapper to contain both div.image and the following
paragraph
b) a border on this extra wrapper. Colour doesn't matter, so making it
white leaves the hack invisible.
Drawback: doesn't work on IE5.01.
And while I was looking at IE5: font-size:small; doesn't work on 5.
90% seems to be the same size.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Dave Edmunds - Queen Of Hearts
Using a pointed stick and pebbles, Els scraped:
| QUOTE |
| I found a solution ;-) http://here.locusmeus.com/temp/dylan-float.html |
Thanks. There still seems to be larger than normal gaps between the
paragraphs though :(
--
Dylan Parry
http://electricfreedom.org -- Where the Music Progressively Rocks
Dylan Parry wrote:
| QUOTE |
| Using a pointed stick and pebbles, Els scraped: I found a solution ;-) http://here.locusmeus.com/temp/dylan-float.html Thanks. There still seems to be larger than normal gaps between the paragraphs though :( |
But that's not an IE problem - it's the same in Firefox and Opera.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Fleetwood Mac - Need Your Love So Bad
Using a pointed stick and pebbles, Els scraped:
| QUOTE |
| Thanks. There still seems to be larger than normal gaps between the paragraphs though :( But that's not an IE problem - it's the same in Firefox and Opera. |
I know, but still clients are petty and won't accept things like that. I
think I might just have to keep thinking :
--
Dylan Parry
http://electricfreedom.org -- Where the Music Progressively Rocks
Dylan Parry wrote:
| QUOTE |
| Using a pointed stick and pebbles, Els scraped: Thanks. There still seems to be larger than normal gaps between the paragraphs though :( But that's not an IE problem - it's the same in Firefox and Opera. I know, but still clients are petty and won't accept things like that. I think I might just have to keep thinking : |
While you're thinking:
http://here.locusmeus.com/temp/dylan-float2.html
I set a specific bottom margin on all the <p> elements inside
div.extra, and while IE displays them quite evenly (2px difference
because of white border on div.extra of course), Firefox shows a bug
on the space between paragraphs 1.04 and 1.05. Adjusting windowsize
shows the space, refreshing the page makes the two paragraphs stick
together.
Doesn't show on your original version.
Another solution, is to put all 3 images before all the paragraphs:
http://here.locusmeus.com/temp/dylan-float3.html
Not sure if that's acceptable though, cause maybe the images are to be
associated with the text?
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: David Bowie - Modern Love
Using a pointed stick and pebbles, Els scraped:
| QUOTE |
| Another solution, is to put all 3 images before all the paragraphs: http://here.locusmeus.com/temp/dylan-float3.html Not sure if that's acceptable though, cause maybe the images are to be associated with the text? |
Now that third solution is beautiful :) I couldn't give a toss where the
image appear in the code - they aren't referred to in the text anyway
and IMHO are purely decorative. Thanks for helping me see the woods!
--
Dylan Parry
http://electricfreedom.org -- Where the Music Progressively Rocks
Dylan Parry wrote:
| QUOTE |
| Using a pointed stick and pebbles, Els scraped: Another solution, is to put all 3 images before all the paragraphs: http://here.locusmeus.com/temp/dylan-float3.html Not sure if that's acceptable though, cause maybe the images are to be associated with the text? Now that third solution is beautiful :) I couldn't give a toss where the image appear in the code - they aren't referred to in the text anyway and IMHO are purely decorative. Thanks for helping me see the woods! |
np - can't believe you didn't think of it yourself though ;P
(it was the first thing that came to mind, but I dismissed it cause I
thought you had a reason to sprinkle them in between the paragraphs)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Yes - Yours Is No Disgrace
Using a pointed stick and pebbles, Els scraped:
| QUOTE |
| np - can't believe you didn't think of it yourself though ;P |
It'd been a long day or at least it felt like it (hard to believe it was
only ten to three!) The hayfever was getting to me and I couldn't think
straight :)
Anyway, I owe you one. Next time you're in the UK (or I in Rotterdam)
I'll buy you an icecream with a flake in it!
--
Dylan Parry
http://webpageworkshop.co.uk -- FREE Web tutorials and references
Dylan Parry wrote:
| QUOTE |
| Next time you're in the UK (or I in Rotterdam) I'll buy you an icecream with a flake in it! |
And chocolate sprinkle?
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Blondie - Hanging On The Telephone
Using a pointed stick and pebbles, Els scraped:
| QUOTE |
| Next time you're in the UK (or I in Rotterdam) I'll buy you an icecream with a flake in it! And chocolate sprinkle? |
How could I deprive a Dutch girl of her chocolate sprinkles? ;)
--
Dylan Parry
http://webpageworkshop.co.uk -- FREE Web tutorials and references
Dylan Parry wrote:
| QUOTE |
| Using a pointed stick and pebbles, Els scraped: Next time you're in the UK (or I in Rotterdam) I'll buy you an icecream with a flake in it! And chocolate sprinkle? How could I deprive a Dutch girl of her chocolate sprinkles? ;) |
:-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Marc Bolan & T. Rex - Jeepster
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.