Stylesheets - text not wrapping around image floated right

Author

text not wrapping around image floated right

edski

2005-12-21, 6:46 pm

Using a technique I found here:
http://www.vertexwerks.com/tests/sidebox/

I created these "dialogue" boxes:

http://www.ebph.org/test.htm

In IE6, the text does not wrap correctly around the image, which is
floated right. Any ideas / suggestions?

Thanks!

Ed

Jim Moe

2005-12-21, 6:46 pm

edski wrote:
>
> In IE6, the text does not wrap correctly around the image, which is
> floated right. Any ideas / suggestions?
>
For IE: the <img> must be in the same block as the <p> for the text to
wrap around it. Move the <img> to the "boxbody" div.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Els

2005-12-21, 6:46 pm

edski wrote:

> Using a technique I found here:
> http://www.vertexwerks.com/tests/sidebox/
>
> I created these "dialogue" boxes:
>
> http://www.ebph.org/test.htm
>
> In IE6, the text does not wrap correctly around the image, which is
> floated right. Any ideas / suggestions?

Probably because you gave the <p> position:relative; :

#content .boxbody p {
margin: 0 .2em .5em 0;
line-height: 1.5;
clear: none;
width: auto;
position: relative;
}

BTW, I think you forgot to hide this one from MacIE:
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

Besides that, the images are sticking out from the bottom of the
rounded borders when my window is full width, and in Opera the bottom
border is pushed down when that happens, only the left border and
rounded lower left corner don't, so that looks kinda weird.
Best give the .dialogue boxes a min-height equal to the height of the
picture plus space. For IE you can add the Holly hack (and hide it
from MacIE) to the .dialogue boxes just like you did with the
#content.

Not tested.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: David Bowie - Golden Years

kchayka

2005-12-21, 10:30 pm

Els wrote:
>
> BTW, I think you forgot to hide this one from MacIE:
> * html .boxhead h2 {height: 1%;} /* For IE 5 PC */

That's one reason why you should probably use zoom:1.0 instead of the
height property. It should give the same result without messing up MacIE
or possibly other browsers, including IE7 (if it ever comes out). It
won't validate, but then neither does the *html hack.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Els

2005-12-22, 3:31 am

kchayka wrote:

> Els wrote:
>
> That's one reason why you should probably use zoom:1.0 instead of the
> height property. It should give the same result without messing up MacIE
> or possibly other browsers, including IE7 (if it ever comes out). It
> won't validate, but then neither does the *html hack.

But this validates:

/* \*/
* html .something {property:value;}
/* */

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Electric Boys - Fire In The House

edski

2005-12-22, 7:01 pm

Thanks very much for all your replies. I really want to keep the photo
in the upper right corner, across from the <h2> in the .boxhead div,
so I may have to live with the IE rendering, unless I can find another
way to structure it.

Thanks again!

Ed

Els

2005-12-22, 7:03 pm

edski wrote:

> Thanks very much for all your replies. I really want to keep the photo
> in the upper right corner, across from the <h2> in the .boxhead div,
> so I may have to live with the IE rendering, unless I can find another
> way to structure it.
>
> Thanks again!

a) Please read this before you reply again:
http://www.safalra.com/special/googlegroupsreply/

b) There is no reason to live with the IE rendering, even if you want
the picture on the top right and the h2 on the left.

You have this code:
#content .boxbody {
background: url(images/body-l.gif) no-repeat bottom left;
margin: 0;
padding: 10px 20px;
height:1%;
min-height: 10.375em;
clear: left;
}

Make that height the same as the min-height, and IE will behave
nicely. Only you shouldn't let all the other browsers see it, as they
might stick to that height instead of expanding.
So, take out the entire height:1%; from the above code, and add this
bit to your styles:

/* hide from MacIE \*/
* html #content .boxbody{
height:10.375em;
}
/* end hide from MacIE */

Now all browsers will leave the image on the right, the h2 on the
left, and the box's contents inside the box.

BTW - why does the first of those 3 boxes have an extra div around
div.boxhead?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

edski

2005-12-22, 7:03 pm

> a) Please read this before you reply again:
> http://www.safalra.com/special/googlegroupsreply/

Thanks and sorry.

> So, take out the entire height:1%; from the above code, and add this
> bit to your styles:
>
> /* hide from MacIE \*/
> * html #content .boxbody{
> height:10.375em;
> }
> /* end hide from MacIE */

Did this, but no difference in IE6 Win

> BTW - why does the first of those 3 boxes have an extra div around
> div.boxhead?

Was experimenting...

Els

2005-12-22, 7:03 pm

edski wrote:

>
> Thanks and sorry.
>
>
> Did this, but no difference in IE6 Win

Ah, I see what you mean now - I thought you meant the image sticking
out the bottom of the box when the window is wide enough to make the
text shorter than the image. The above measure solves that.

Now I realize you are still struggling with lack of wrapping.
That's caused by the height on .boxbody, because the image is outside
..boxbody. So we need to set that height on some element outside both
..boxbody /and/ the image. Like .sidebox or .dialogue.

I tested with .sidebox, works perfectly, as long as you also leave out
the scroll:auto; on .sidebox.

So, .sidebox styles become:

#content .sidebox {
margin: 0;
width: auto;
background: url(images/body-r.gif) no-repeat bottom right;
font-size: 100%;
clear: none;
min-height: 10.375em;
}

/* hide from MacIE \*/
* html #content .sidebox{
/* height:10.375em;
}
/* end hide from MacIE */

And that bit with height for .bodybox should go.

The result of all that is of course, that the bottom left corner
image, which is linked to .bodybox, doesn't stay in the right place
when that element gets shorter.

So now, give the background styles of .bodybox to .sidebar, and the
background styles of .sidebar to .dialogue, and you're done.

(Tested ;-) )

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

edski

2005-12-22, 7:03 pm

> Now I realize you are still struggling with lack of wrapping.
> That's caused by the height on .boxbody, because the image is outside
> .boxbody. So we need to set that height on some element outside both
> .boxbody /and/ the image. Like .sidebox or .dialogue.

Thanks very much, Els. Works perfect. I really appreciate your help!