Re: IE6 overflow problem
- From: dorayme <doraymeRidThis@xxxxxxxxxxxxxxx>
- Date: Wed, 01 Apr 2009 06:51:03 +1100
In article <42392413585.8554256396.39903@xxxxxxxxxxxxxxxx>,
darius <noone@xxxxxxxxxxxx> wrote:
hello
I have this structure
<p>
<img />
some text here
</p>
p is styled with a background and border and overflow: auto. img is
styled with float:left
on the civilized browsers, this works as I hope. p wraps around
either img or text, whichever is greater in height.
You mean the text wraps if there is a lot of it. Perhaps you mean by the
paragraph element wrapping around the image or the text, the business of
the paragraph element growing height to enclose the floated image.
In IE6,
however, p only wraps around the text. If the text is shorter than
the img, the img is left hanging outside of p.
Correct, overflow does not work with IE6 to address the problem. Nor in
IE7 in your case. Often, in IE6, containers naturally grow height
(against the specs) without having to do anything - meaning the
background conditions are often right for IE6 to trigger this float
enclosing behaviour. But they are not always right!
In cases where you have container and floats and other elements with
text in them *as children*, there are things you can do. A clearing div
style="clear:both" right at the bottom of the container will do the
trick - as it does for good browsers too btw in the absence of overflow.
But this will not work in your case because you have the float within
the paragraph element itself- an unusual thing to do. But interesting
enough to me!
However there is a trick you can use to make IE6 and 7 grow height. Give
the paragraph a width.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<title>Very plain HTML</title>
<style type="text/css" media="screen">
p {border: 1px solid; color: #000; background: #ffc; overflow: auto;
width: 100%;}
img {float: left;}
</style>
</head>
<body>
<p><img src="pics/crimson.png" height="100" alt="">some text here</p>
</body>
</html>
This is in spite of 100% width for a P being default. IE6 and sometimes
7, like to hear it said! A bit like when Peggy Sawyer in 42nd Street
said to Billy Lawyer, after he said to her something like, "You know I
love you": "I still like to hear you say it, Billy!"
I also tried with a div but it made no difference.
thanks in advance for your help
.
--
dorayme
.
- Follow-Ups:
- Re: IE6 overflow problem
- From: dorayme
- Re: IE6 overflow problem
- Prev by Date: Re: IE6 overflow problem
- Next by Date: Re: IE6 overflow problem
- Previous by thread: Re: IE6 overflow problem
- Next by thread: Re: IE6 overflow problem
- Index(es):
Relevant Pages
|
