UL margins with a floated img are off?

[hgraham]

Hi,

I created a very simple page to illustrate my problem. All I'm trying
to do is float an image left with a margin and have the text on the
right wrap around the image and the text includes an unordered list.
The paragraphs all work fine, but the ul starts way over in the image
for some reason? It looks the same in Firefox and IE, so I don't think
it's a browser bug. The page link is below if someone wouldn't mind
taking a look at this and telling me how to fix it. This is so simple
and I can't figure out what's going on to save my life.

http://www.animaladoption.org/float.htm

Thanks!
Holli

[Viken Karaguesian]

Hello,

It seems that the UL is not affected by the margin set by the IMG. It
seems to be affected by the body margin.

In my experiments, setting the UL margin to the IMG width + 25px seems
to do the trick. I put <ul style=""margn-left: 475px"> and that brought
the UL in step with your text.

Here's how the page looks in Microsoft FrontPage in WYSWYG mode:

http://home.comcast.net/~vikenk/test.jpg

I don't use WYSWYG mode for building a site, but it can sometimes
provide an inside look as to how IE "thinks". Note that when I've
highlighted the text, the UL spans the entire width of the page? This
seems to indicate that, in IE, <UL>'s are treated differently when it
comes to floats. But the same happens in FireFox as well.

I'm not sure why this is, as I'm not an expert. But, it seems that
setting the <ul> margin to include your IMG +25px width is a way around
the problem. Why 25px? It also seems that the <ul>'s "dot" (I can't
think of the proper term) isn't included in the margin. So in your
case, 445px IMG + 15px margin + ~15px for the "dot" = 475px.

Maybe someone who's more technically aware of HTML rules will be able
to provide a more thorough answer.

Viken K.

[TomB]

Viken Karaguesian wrote:

It also seems that the <ul>'s "dot" (I can't
think of the proper term)

Bullet ;-)
--
TomB - DrumScum
tomb <-at-> versateladsl <-punt-> be
http://www.duskmetal.be

[Gus Richter]

TomB wrote:

Viken Karaguesian wrote:

It also seems that the <ul>'s "dot" (I can't
think of the proper term)

Bullet ;-)

List Marker :-D

--
Gus

[Gus Richter]

hg*****@bcbsal.org wrote:

Hi,

I created a very simple page to illustrate my problem. All I'm trying
to do is float an image left with a margin and have the text on the
right wrap around the image and the text includes an unordered list.
The paragraphs all work fine, but the ul starts way over in the image
for some reason? It looks the same in Firefox and IE, so I don't think
it's a browser bug. The page link is below if someone wouldn't mind
taking a look at this and telling me how to fix it. This is so simple
and I can't figure out what's going on to save my life.

http://www.animaladoption.org/float.htm

This is one of those hornet nests with conflicting implementation by Fx
vs. IE/Opera regarding Lists and then also with floats thrown in for
good measure.

The proper way to do this IMHO, is to drop the margin-right declaration
onto img and to place the flow items into a div wrapper and apply a
margin-left:475px; to this wrapper. Fx, IE and Opera now render the same.

--
Gus

[hgraham]

Thanks for your help guys. Both solutions would work only in my real
life page, they're wanting the text to wrap around the picture and
there happens to be a bulleted list beside the picture and one below
the picture which means I have to set a different margin for the ul by
the picture to get it to look right which seems hokey to me. This
seems like a no-brainer that should've worked in CSS1. Oh well, just
more fun with CSS.

Thanks!
Holli

[Spartanicus]

hg*****@bcbsal.org wrote:

I created a very simple page to illustrate my problem. All I'm trying
to do is float an image left with a margin and have the text on the
right wrap around the image and the text includes an unordered list.
The paragraphs all work fine, but the ul starts way over in the image
for some reason? It looks the same in Firefox and IE, so I don't think
it's a browser bug. The page link is below if someone wouldn't mind
taking a look at this and telling me how to fix it. This is so simple
and I can't figure out what's going on to save my life.

http://www.animaladoption.org/float.htm

ul{list-style-position:inside}

--
Spartanicus

[Gus Richter]

Spartanicus wrote:

hg*****@bcbsal.org wrote:

I created a very simple page to illustrate my problem. All I'm trying
to do is float an image left with a margin and have the text on the
right wrap around the image and the text includes an unordered list.
The paragraphs all work fine, but the ul starts way over in the image
for some reason? It looks the same in Firefox and IE, so I don't think
it's a browser bug. The page link is below if someone wouldn't mind
taking a look at this and telling me how to fix it. This is so simple
and I can't figure out what's going on to save my life.

http://www.animaladoption.org/float.htm

ul{list-style-position:inside}

Thank you for that. This allows the flowed items to shrinkwrap around
the float and with a little margin-right adjustment on the image, Fx, IE
and Opera render almost alike.

--
Gus