467,885 Members | 1,202 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,885 developers. It's quick & easy.

margin of li-elements around left-floating image

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

Jul 20 '05 #1
  • viewed: 3161
Share:
2 Replies
On Tue, 29 Jun 2004 16:49:19 +0200, Chris Gurk <ch*******@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;}
Jul 20 '05 #2
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

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Michael | last post: by
12 posts views Thread by Andrew Thompson | last post: by
19 posts views Thread by A.Translator | last post: by
3 posts views Thread by NWhite | last post: by
7 posts views Thread by jmm-list-gn | last post: by
4 posts views Thread by Mark | last post: by
13 posts views Thread by windandwaves | last post: by
12 posts views Thread by Eric Lindsay | last post: by
7 posts views Thread by patrick j | last post: by
reply views Thread by MrMoon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.