Forum Moderators: not2easy
<div>
<div style="float:left;"><img alt="" src="images/someimage.gif" /></div>
text text text text ....
<div style="clear:both;"> </div>
</div>
<div>
<div style="float:right"><img alt="" src="images/someimage.gif" /></div>
text text text text ....
<div style="clear:both;"> </div>
</div>
etc..
Unfortunately IE4 chokes on clear:both, so I have been experimenting with ways to eliminate it. Latest thoughts are:
<div>
<div style="float:left;"><img alt="" src="images/someimage.gif" /></div>
text text text text ....
<div><img width="500px" height="1px" alt="" src="images/pixelgif.gif" /></div>
<!-- where 500px is too large to flow up beside the image -->
</div>
<div>
<div style="float:right;"><img alt="" src="images/someimage.gif" /></div>
text text text text ....
<div><img width="500px" height="1px" alt="" src="images/pixelgif.gif" /></div>
</div>
etc..
It seems to work in IE6, OP6, OP7, Moz1.3, and Moz1.6, but those are the only browsers available onmy test system.
Has anyone done anything like this? Any pitfalls? Or more to the point, is there a better way? I don't want to reinvent the wheel!
For one thing, I'd consider using many fewer divs.
Elsewhere [webmasterworld.com] (toward the bottom), Nick W has posted how to use the Float property like this:
<p><img src="somefile.jpg" alt="" />your text should go here if you are to make the image float right and the text wrap nicely.</p>
Then in your css:
p img {
float: right;
/* Note: You'll need to set some margins or the text will be right up against the image. */
margin: 10px;
}
Nick W also recommended the W3.org site for more details [w3.org].
------
Or if that doesn't work, sometimes you can do what Eric Meyer has suggested: the horizontal rule set in css to not display, like this:
hr {
clear: both;
visibility: hidden;
}
Then your XHTML has the img and p tags, followed by the hr tag.
Does that work for you?
As I said my example was a simplified version. The styles are all in stylesheets, etc., and I didn't bother to show the padding or margins because that would only have cluttered up the example.
The reason I use a div to float the image right is because I use a shrink-to-fit div with standard padding to seperate the image from the text. I also sometimes include a title for the image in the div. In fact using an image in a div was just an example of a general case because the same clear:both issue arises when other entities are floated.
I also have to use divs to seperate each text and image combination, otherwise all the images would float to the top of the text.
The main point was to try and find an alternative for clear:both because that breaks in IE4, in fact it crashes my browser. At the moment I hide it from IE4.
Unfortunately, since posting, I have found my solution breaks in Opera 6 (Opera 7 is fine) so I'm back to square one. It looks as if I'm going to have to live with clear:both. :(
Added later: incidentally isn't HR deprecated?
[w3.org...]
Remove or rename hr
It has been suggested that hr be removed or renamed to, for instance, <separator/>. The working group has not yet addressed this suggestion.
Of course, you do have to write it differently now: <hr />
Do you have any traffic from IE4 browsers? I don't support them.
The reason I started looking at clear:both is because I use a php sniffer to serve additional stylesheets to specific browsers. These used to be for Opera pre-version 7, NS6, IE4, and IE5+, and contained odd snippets of CSS to cater for bugs, mainly needed for older pages. NS4 gets text only.
Now I have converted to a php template and with only one page of xhtml to consider I have been able to redesigned to avoid the bugs. The only two bits of browser-specific code I have remaining is 'clear:both' which has to be hidden from IE4, and 'vertical-align:bottom' for my tab images which has to be served to all IE browsers to make my tabs sit precisely where I want them.
The need for the second I can probably get rid of by a bit more work. So if I could have got rid of the need for 'clear:both' I wouldn't have any browser-specific CSS and wouldn't need to test for browsers at all. The holy grail!
I suppose the way to go is to use a hack to hide clear:both from IE4. But I have never used hacks so I'm a bit in the dark there.
[added] Having said that, I have never seen my site in a Mac so I could be in for a shock! [/added]
Eric Meyer's CSS 2.0 Programmer's Reference says IE4 is rated partial for Clear, Yes for None and Both, and Buggy for Right and Left.
I would have expected clear: both to work. Oh, well....
I'll give it another try in IE4. It's always possible IE4 is objecting to something else on the page.
firstreflex,
Thanks for that. I had a quick look and it seems as if it answers the problem. But I tend to be wary of hacks. The problem is they work fine until another browser comes along.
it is a great explanation and useful technique I still advocate ;.
but.. it is/was a hack. Now that todays new/compliant browsers support the float within a float method (not a hack, but recommended behaviour) we needn't deploy the hack to make it work..
IE clears floats with "its" default behaviour, IE/Mac AFAIK supports neither method.. so that leaves us back were we were at and either a "no hacks required" method or a "hack that suits the purpose better" will be your answer.. ;)
Suzy
