Stylesheets - margin of li-elements around left-floating image

Author

margin of li-elements around left-floating image

Chris Gurk

2004-06-29, 12:15 pm

Hi Newsgroup,

I am working on a website http://www.charter-yachtcharter.com/testsite/
(still in progress).

There are two lists. The first is a simple paragraph (<p>-Tag), the
second an unordered list.
How can I use a Style-Sheet to format the bullets to be aligned like the
text above. The problem is the floating catamaran-image which is
floating left around the first paragraph on this site.
I tried to place the list under the image with some linebreaks <br>.
There it was possible to set the margins of the li-elements.
Is there a better way to position these element on this site?

Thanks, Chris
--
Chris Gurk can be reached at:
http://www.gurkcity.de

Neal

2004-06-29, 7:16 pm

On Tue, 29 Jun 2004 16:49:19 +0200, Chris Gurk <chrisgurk@gmx.de> wrote:

> Hi Newsgroup,
>
> I am working on a website http://www.charter-yachtcharter.com/testsite/
> (still in progress).
>
> There are two lists. The first is a simple paragraph (<p>-Tag), the
> second an unordered list.
> How can I use a Style-Sheet to format the bullets to be aligned like the
> text above. The problem is the floating catamaran-image which is
> floating left around the first paragraph on this site.
> I tried to place the list under the image with some linebreaks <br>.
> There it was possible to set the margins of the li-elements.
> Is there a better way to position these element on this site?
>
> Thanks, Chris
> --
> Chris Gurk can be reached at:
> http://www.gurkcity.de
>

ul {margin-left: 2em} or whatever works. Different browsers set different
default margins and paddings for ul and li. You ought to try something
like this to override that when CSS is observed:

ul {margin:0; padding:0; margin-left: 2em;}
li {margin:0; padding:0;}

Chris Gurk

2004-06-30, 12:15 pm

Thank you very much.

I solved the problem with your help:

ul {padding: 0; margin: 0 0 0 210px;}

The 210px is a value which seems to be left-floating image-width (in my
case the width of the image is 170px)plus the margin to the image and
the text-indent plus the padding of the surrounding content-box in which
all paragraphs, images and lists are positioned.

I tried it with smaller values (like 2em, 170px) and there were still
some strange effects on Mozilla Firefox and Internet Explorer, too.

My explanation: The margin of ul is not a distance to the floating
image, it is the distance to the surrounding content box.

Chris

--
Chris Gurk can be reached at:
http://www.gurkcity.de