spacing and positiong: lists (ul li)

[mno]

Hi all,

I have a problem that I've been stuck with for the last couple of days
that's driving me a bit more than crazy at this point. Sorry if this
message is not very clear.

I have a design that resembles the following:

<div id="main">
<div class="image">
<img ... />
<p>Some description</p>
</div>

<h1>text</h1>
<p>
...
</p>

<ul>
<li>item</li>
<li>item</li>
</ul>
</div>

The following is the CSS for this code:

#main {
padding: 0;
margin: 10px 20px 40px 20px;
}
H1{
font: 14pt Georgia, "Times New Roman", Times, serif;
color: #232915;
margin: 0px 20px 10px 20px;
}
P {
line-height: 130%;
color: #000000;
margin: 0px 100px 10px 20px;
}
DIV.image {
margin: 0px 20px 10px 0px;
padding-left: 0px;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #9EAE71;
position: relative;
}
DIV.image IMG {
margin: 0;
padding: 0;
border: 1px solid #232915;
}
DIV.image P {
margin: 5px 2px 5px 2px;
font-style: italic;
color: #232915;
line-height: 120%;
}
UL, OL {
list-style-position: outside;
margin: 0px 100px 10px 30px;
padding: 0;
}
LI {
list-style-position: outside;
margin: 0px 0px 0px 0px;
padding-left: 10px;
}

My issue is that the list items seem to be located "behind" the image
div. I tried playing around with the float, position, margin and
padding properties, but could not get the divs to be aligned properly.
I tried sticking the ul into a p, but that didn't work. I eventually
stuck the ul into a blank div tag, and that fixed everything, but added
a bunch of other issues with wrapping around this other div tag of the
p elements following it.

Basically, what I want to do is have the ul work properly on it's own
without sticking them into a div, because that causes a lot of issues.
I can't just do clear: left or clear: all, because of that image div
located to the left of the text, as doing a clear: all clears that div
also, which isn't what I want to do.

Any recommendations? Maybe I'm missing something, but I've always hated
working with div layouts and lists.

To see this in action, you can go to http://www.miykyiv.com/join.php
and submit the form without entering any data. You will see an error
page with several errors listed in a ul tag.

Any help is greatly apprectiated!
Thanks,
Max

[David Woods]

"mno" <mn****@gmail.comwrote in message
news:11********************@i3g2000cwc.googlegroup s.com...

Hi all,

I have a problem that I've been stuck with for the last couple of days
that's driving me a bit more than crazy at this point. Sorry if this
message is not very clear.

I have a design that resembles the following:

<div id="main">
<div class="image">
<img ... />
<p>Some description</p>
</div>

<h1>text</h1>
<p>
...
</p>

<ul>
<li>item</li>
<li>item</li>
</ul>
</div>

The following is the CSS for this code:

#main {
padding: 0;
margin: 10px 20px 40px 20px;
}
H1{
font: 14pt Georgia, "Times New Roman", Times, serif;
color: #232915;
margin: 0px 20px 10px 20px;
}
P {
line-height: 130%;
color: #000000;
margin: 0px 100px 10px 20px;
}
DIV.image {
margin: 0px 20px 10px 0px;
padding-left: 0px;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #9EAE71;
position: relative;
}
DIV.image IMG {
margin: 0;
padding: 0;
border: 1px solid #232915;
}
DIV.image P {
margin: 5px 2px 5px 2px;
font-style: italic;
color: #232915;
line-height: 120%;
}
UL, OL {
list-style-position: outside;
margin: 0px 100px 10px 30px;
padding: 0;
}
LI {
list-style-position: outside;
margin: 0px 0px 0px 0px;
padding-left: 10px;
}

My issue is that the list items seem to be located "behind" the image
div. I tried playing around with the float, position, margin and
padding properties, but could not get the divs to be aligned properly.
I tried sticking the ul into a p, but that didn't work. I eventually
stuck the ul into a blank div tag, and that fixed everything, but added
a bunch of other issues with wrapping around this other div tag of the
p elements following it.

Basically, what I want to do is have the ul work properly on it's own
without sticking them into a div, because that causes a lot of issues.
I can't just do clear: left or clear: all, because of that image div
located to the left of the text, as doing a clear: all clears that div
also, which isn't what I want to do.

Any recommendations? Maybe I'm missing something, but I've always hated
working with div layouts and lists.

To see this in action, you can go to http://www.miykyiv.com/join.php
and submit the form without entering any data. You will see an error
page with several errors listed in a ul tag.

Any help is greatly apprectiated!
Thanks,
Max

Hmm, I'll try to explain it, but some of the regulars here can probably do a
better job. You have the list inside a <div>

<div class="webdeveloper-relative-positioned-element" style="position:
relative; float: none; margin-left: 20px;">

This div's container (I believe) is the <div id="main">. The div with the
image is:

<div class="image webdeveloper-relative-positioned-element" style="width:
250px; float: left;">

So, the image div is floated left with a width of 250px - and is relative to
the constraints of the main div. But the div with the ul is positioned
relative to the main div also. The margin-left is only 20px so the bullets
are hidden. If you change the margin-left above to 300px you will see your
bullet points.

What helped me in seeing this is using the outline feature of the Firefox
Web Developer extension and also the outline feature on IE's DevToolbar.

If I'm wrong in how I've explained this, please somebody correct me!

--

David

[mno]

David Woods wrote:

"mno" <mn****@gmail.comwrote in message
news:11********************@i3g2000cwc.googlegroup s.com...

Hi all,

I have a problem that I've been stuck with for the last couple of days
that's driving me a bit more than crazy at this point. Sorry if this
message is not very clear.

I have a design that resembles the following:

<div id="main">
<div class="image">
<img ... />
<p>Some description</p>
</div>

<h1>text</h1>
<p>
...
</p>

<ul>
<li>item</li>
<li>item</li>
</ul>
</div>

The following is the CSS for this code:

#main {
padding: 0;
margin: 10px 20px 40px 20px;
}
H1{
font: 14pt Georgia, "Times New Roman", Times, serif;
color: #232915;
margin: 0px 20px 10px 20px;
}
P {
line-height: 130%;
color: #000000;
margin: 0px 100px 10px 20px;
}
DIV.image {
margin: 0px 20px 10px 0px;
padding-left: 0px;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #9EAE71;
position: relative;
}
DIV.image IMG {
margin: 0;
padding: 0;
border: 1px solid #232915;
}
DIV.image P {
margin: 5px 2px 5px 2px;
font-style: italic;
color: #232915;
line-height: 120%;
}
UL, OL {
list-style-position: outside;
margin: 0px 100px 10px 30px;
padding: 0;
}
LI {
list-style-position: outside;
margin: 0px 0px 0px 0px;
padding-left: 10px;
}

My issue is that the list items seem to be located "behind" the image
div. I tried playing around with the float, position, margin and
padding properties, but could not get the divs to be aligned properly.
I tried sticking the ul into a p, but that didn't work. I eventually
stuck the ul into a blank div tag, and that fixed everything, but added
a bunch of other issues with wrapping around this other div tag of the
p elements following it.

Basically, what I want to do is have the ul work properly on it's own
without sticking them into a div, because that causes a lot of issues.
I can't just do clear: left or clear: all, because of that image div
located to the left of the text, as doing a clear: all clears that div
also, which isn't what I want to do.

Any recommendations? Maybe I'm missing something, but I've always hated
working with div layouts and lists.

To see this in action, you can go to http://www.miykyiv.com/join.php
and submit the form without entering any data. You will see an error
page with several errors listed in a ul tag.

Any help is greatly apprectiated!
Thanks,
Max

Hmm, I'll try to explain it, but some of the regulars here can probably do a
better job. You have the list inside a <div>

<div class="webdeveloper-relative-positioned-element" style="position:
relative; float: none; margin-left: 20px;">

This div's container (I believe) is the <div id="main">. The div with the
image is:

<div class="image webdeveloper-relative-positioned-element" style="width:
250px; float: left;">

So, the image div is floated left with a width of 250px - and is relative to
the constraints of the main div. But the div with the ul is positioned
relative to the main div also. The margin-left is only 20px so the bullets
are hidden. If you change the margin-left above to 300px you will see your
bullet points.

What helped me in seeing this is using the outline feature of the Firefox
Web Developer extension and also the outline feature on IE's DevToolbar.

If I'm wrong in how I've explained this, please somebody correct me!

--

David

Hi David,

Thanks, you're exactly right. The issue is that those 20px are taken
from the left edge of the container ("main") div. My issue with using
300px for left-margin is that the 250px "image" div is dynamically
generated - meaning that that div can be 400px or 150px or however many
wide. Further, there can be one more than one "image" div in the "main"
div with different widths. Therefore, I am looking for a solution to
this that will not require to set the left-margin from the container
"main" div. The funny thing is that the p tag's margins are respected.
But the ul's aren't. I guess it's how lists are treated. Further, both
IE and Firefox displayed the same behaviour.

So: what I'm looking for is a way to change any element style (keeping
the actualy html structure unchanged - or changed minimally - chage the
"image" div to a span or some other tag maybe?) that would allow me to
have lists that are rendered "correctly" (in quotes because perhaps
this is the correct behaviour according to the spec, but not what I am
looking for).

Thanks again!
Max

[David Woods]

"mno" <mn****@gmail.comwrote in message
news:11*********************@74g2000cwt.googlegrou ps.com...

>
David Woods wrote:

>"mno" <mn****@gmail.comwrote in message
news:11********************@i3g2000cwc.googlegrou ps.com...

Hi all,

I have a problem that I've been stuck with for the last couple of days
that's driving me a bit more than crazy at this point. Sorry if this
message is not very clear.

I have a design that resembles the following:

<div id="main">
<div class="image">
<img ... />
<p>Some description</p>
</div>

<h1>text</h1>
<p>
...
</p>

<ul>
<li>item</li>
<li>item</li>
</ul>
</div>

The following is the CSS for this code:

#main {
padding: 0;
margin: 10px 20px 40px 20px;
}
H1{
font: 14pt Georgia, "Times New Roman", Times, serif;
color: #232915;
margin: 0px 20px 10px 20px;
}
P {
line-height: 130%;
color: #000000;
margin: 0px 100px 10px 20px;
}
DIV.image {
margin: 0px 20px 10px 0px;
padding-left: 0px;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #9EAE71;
position: relative;
}
DIV.image IMG {
margin: 0;
padding: 0;
border: 1px solid #232915;
}
DIV.image P {
margin: 5px 2px 5px 2px;
font-style: italic;
color: #232915;
line-height: 120%;
}
UL, OL {
list-style-position: outside;
margin: 0px 100px 10px 30px;
padding: 0;
}
LI {
list-style-position: outside;
margin: 0px 0px 0px 0px;
padding-left: 10px;
}

My issue is that the list items seem to be located "behind" the image
div. I tried playing around with the float, position, margin and
padding properties, but could not get the divs to be aligned properly.
I tried sticking the ul into a p, but that didn't work. I eventually
stuck the ul into a blank div tag, and that fixed everything, but added
a bunch of other issues with wrapping around this other div tag of the
p elements following it.

Basically, what I want to do is have the ul work properly on it's own
without sticking them into a div, because that causes a lot of issues.
I can't just do clear: left or clear: all, because of that image div
located to the left of the text, as doing a clear: all clears that div
also, which isn't what I want to do.

Any recommendations? Maybe I'm missing something, but I've always hated
working with div layouts and lists.

To see this in action, you can go to http://www.miykyiv.com/join.php
and submit the form without entering any data. You will see an error
page with several errors listed in a ul tag.

Any help is greatly apprectiated!
Thanks,
Max

Hmm, I'll try to explain it, but some of the regulars here can probably
do a
better job. You have the list inside a <div>

<div class="webdeveloper-relative-positioned-element" style="position:
relative; float: none; margin-left: 20px;">

This div's container (I believe) is the <div id="main">. The div with
the
image is:

<div class="image webdeveloper-relative-positioned-element" style="width:
250px; float: left;">

So, the image div is floated left with a width of 250px - and is relative
to
the constraints of the main div. But the div with the ul is positioned
relative to the main div also. The margin-left is only 20px so the
bullets
are hidden. If you change the margin-left above to 300px you will see
your
bullet points.

What helped me in seeing this is using the outline feature of the Firefox
Web Developer extension and also the outline feature on IE's DevToolbar.

If I'm wrong in how I've explained this, please somebody correct me!

--

David

Hi David,

Thanks, you're exactly right. The issue is that those 20px are taken
from the left edge of the container ("main") div. My issue with using
300px for left-margin is that the 250px "image" div is dynamically
generated - meaning that that div can be 400px or 150px or however many
wide. Further, there can be one more than one "image" div in the "main"
div with different widths. Therefore, I am looking for a solution to
this that will not require to set the left-margin from the container
"main" div. The funny thing is that the p tag's margins are respected.
But the ul's aren't. I guess it's how lists are treated. Further, both
IE and Firefox displayed the same behaviour.

So: what I'm looking for is a way to change any element style (keeping
the actualy html structure unchanged - or changed minimally - chage the
"image" div to a span or some other tag maybe?) that would allow me to
have lists that are rendered "correctly" (in quotes because perhaps
this is the correct behaviour according to the spec, but not what I am
looking for).

Thanks again!
Max

It is interesting that FF shows the bullet points with your config while in
IE they are hidden. But to fix your problem -

1) Take the UL out of that div (<div class="image
webdeveloper-relative-positioned-element" style="width: 250px; float:
left;">). Does it really need to be in this block? If you do this, the
bullets now show in IE and FF, but in IE they touch the image.

2) I changed the LI style in your style.css to the following and it seems to
work. But I'm not sure how that will affect the rest of your site.

LI {
list-style-position: outside;
}

Does your generated content change the containing div for the image? IOW,
if your image changes width to 400px, will your inline for the div be
changed also?

I think many of the regulars here would encourage you to get away from the
pixel-perfect design you seem to be trying to create.

--

David

[mno]

David Woods wrote:

"mno" <mn****@gmail.comwrote in message
news:11*********************@74g2000cwt.googlegrou ps.com...

David Woods wrote:

"mno" <mn****@gmail.comwrote in message
news:11********************@i3g2000cwc.googlegroup s.com...
Hi all,

I have a problem that I've been stuck with for the last couple of days
that's driving me a bit more than crazy at this point. Sorry if this
message is not very clear.

I have a design that resembles the following:

<div id="main">
<div class="image">
<img ... />
<p>Some description</p>
</div>

<h1>text</h1>
<p>
...
</p>

<ul>
<li>item</li>
<li>item</li>
</ul>
</div>

The following is the CSS for this code:

#main {
padding: 0;
margin: 10px 20px 40px 20px;
}
H1{
font: 14pt Georgia, "Times New Roman", Times, serif;
color: #232915;
margin: 0px 20px 10px 20px;
}
P {
line-height: 130%;
color: #000000;
margin: 0px 100px 10px 20px;
}
DIV.image {
margin: 0px 20px 10px 0px;
padding-left: 0px;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #9EAE71;
position: relative;
}
DIV.image IMG {
margin: 0;
padding: 0;
border: 1px solid #232915;
}
DIV.image P {
margin: 5px 2px 5px 2px;
font-style: italic;
color: #232915;
line-height: 120%;
}
UL, OL {
list-style-position: outside;
margin: 0px 100px 10px 30px;
padding: 0;
}
LI {
list-style-position: outside;
margin: 0px 0px 0px 0px;
padding-left: 10px;
}

My issue is that the list items seem to be located "behind" the image
div. I tried playing around with the float, position, margin and
padding properties, but could not get the divs to be aligned properly.
I tried sticking the ul into a p, but that didn't work. I eventually
stuck the ul into a blank div tag, and that fixed everything, but added
a bunch of other issues with wrapping around this other div tag of the
p elements following it.

Basically, what I want to do is have the ul work properly on it's own
without sticking them into a div, because that causes a lot of issues.
I can't just do clear: left or clear: all, because of that image div
located to the left of the text, as doing a clear: all clears that div
also, which isn't what I want to do.

Any recommendations? Maybe I'm missing something, but I've always hated
working with div layouts and lists.

To see this in action, you can go to http://www.miykyiv.com/join.php
and submit the form without entering any data. You will see an error
page with several errors listed in a ul tag.

Any help is greatly apprectiated!
Thanks,
Max

Hmm, I'll try to explain it, but some of the regulars here can probably
do a
better job. You have the list inside a <div>

<div class="webdeveloper-relative-positioned-element" style="position:
relative; float: none; margin-left: 20px;">

This div's container (I believe) is the <div id="main">. The div with
the
image is:

<div class="image webdeveloper-relative-positioned-element" style="width:
250px; float: left;">

So, the image div is floated left with a width of 250px - and is relative
to
the constraints of the main div. But the div with the ul is positioned
relative to the main div also. The margin-left is only 20px so the
bullets
are hidden. If you change the margin-left above to 300px you will see
your
bullet points.

What helped me in seeing this is using the outline feature of the Firefox
Web Developer extension and also the outline feature on IE's DevToolbar.

If I'm wrong in how I've explained this, please somebody correct me!

--

David

Hi David,

Thanks, you're exactly right. The issue is that those 20px are taken
from the left edge of the container ("main") div. My issue with using
300px for left-margin is that the 250px "image" div is dynamically
generated - meaning that that div can be 400px or 150px or however many
wide. Further, there can be one more than one "image" div in the "main"
div with different widths. Therefore, I am looking for a solution to
this that will not require to set the left-margin from the container
"main" div. The funny thing is that the p tag's margins are respected.
But the ul's aren't. I guess it's how lists are treated. Further, both
IE and Firefox displayed the same behaviour.

So: what I'm looking for is a way to change any element style (keeping
the actualy html structure unchanged - or changed minimally - chage the
"image" div to a span or some other tag maybe?) that would allow me to
have lists that are rendered "correctly" (in quotes because perhaps
this is the correct behaviour according to the spec, but not what I am
looking for).

Thanks again!
Max

It is interesting that FF shows the bullet points with your config while in
IE they are hidden. But to fix your problem -

1) Take the UL out of that div (<div class="image
webdeveloper-relative-positioned-element" style="width: 250px; float:
left;">). Does it really need to be in this block? If you do this, the
bullets now show in IE and FF, but in IE they touch the image.

2) I changed the LI style in your style.css to the following and it seems to
work. But I'm not sure how that will affect the rest of your site.

LI {
list-style-position: outside;
}

Does your generated content change the containing div for the image? IOW,
if your image changes width to 400px, will your inline for the div be
changed also?

I think many of the regulars here would encourage you to get away from the
pixel-perfect design you seem to be trying to create.

--

David

Hi David,

Sorry for a long reply. I will try your recommendations shortly and get
back here with the results. And yes, the code will generate with inline
css correctly.

To be honest, I am not really trying to create a design that is so
pixel-perfect. All I want to do is have one main div where the content
goes into which I can stick images with captions (that's why I put the
img into a div and added a p tag below it). Maybe there's a better way
to do it?

Best,
Max

[mno]

David Woods wrote:

"mno" <mn****@gmail.comwrote in message
news:11*********************@74g2000cwt.googlegrou ps.com...

David Woods wrote:

"mno" <mn****@gmail.comwrote in message
news:11********************@i3g2000cwc.googlegroup s.com...
Hi all,

I have a problem that I've been stuck with for the last couple of days
that's driving me a bit more than crazy at this point. Sorry if this
message is not very clear.

I have a design that resembles the following:

<div id="main">
<div class="image">
<img ... />
<p>Some description</p>
</div>

<h1>text</h1>
<p>
...
</p>

<ul>
<li>item</li>
<li>item</li>
</ul>
</div>

The following is the CSS for this code:

#main {
padding: 0;
margin: 10px 20px 40px 20px;
}
H1{
font: 14pt Georgia, "Times New Roman", Times, serif;
color: #232915;
margin: 0px 20px 10px 20px;
}
P {
line-height: 130%;
color: #000000;
margin: 0px 100px 10px 20px;
}
DIV.image {
margin: 0px 20px 10px 0px;
padding-left: 0px;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #9EAE71;
position: relative;
}
DIV.image IMG {
margin: 0;
padding: 0;
border: 1px solid #232915;
}
DIV.image P {
margin: 5px 2px 5px 2px;
font-style: italic;
color: #232915;
line-height: 120%;
}
UL, OL {
list-style-position: outside;
margin: 0px 100px 10px 30px;
padding: 0;
}
LI {
list-style-position: outside;
margin: 0px 0px 0px 0px;
padding-left: 10px;
}

My issue is that the list items seem to be located "behind" the image
div. I tried playing around with the float, position, margin and
padding properties, but could not get the divs to be aligned properly.
I tried sticking the ul into a p, but that didn't work. I eventually
stuck the ul into a blank div tag, and that fixed everything, but added
a bunch of other issues with wrapping around this other div tag of the
p elements following it.

Basically, what I want to do is have the ul work properly on it's own
without sticking them into a div, because that causes a lot of issues.
I can't just do clear: left or clear: all, because of that image div
located to the left of the text, as doing a clear: all clears that div
also, which isn't what I want to do.

Any recommendations? Maybe I'm missing something, but I've always hated
working with div layouts and lists.

To see this in action, you can go to http://www.miykyiv.com/join.php
and submit the form without entering any data. You will see an error
page with several errors listed in a ul tag.

Any help is greatly apprectiated!
Thanks,
Max

Hmm, I'll try to explain it, but some of the regulars here can probably
do a
better job. You have the list inside a <div>

<div class="webdeveloper-relative-positioned-element" style="position:
relative; float: none; margin-left: 20px;">

This div's container (I believe) is the <div id="main">. The div with
the
image is:

<div class="image webdeveloper-relative-positioned-element" style="width:
250px; float: left;">

So, the image div is floated left with a width of 250px - and is relative
to
the constraints of the main div. But the div with the ul is positioned
relative to the main div also. The margin-left is only 20px so the
bullets
are hidden. If you change the margin-left above to 300px you will see
your
bullet points.

What helped me in seeing this is using the outline feature of the Firefox
Web Developer extension and also the outline feature on IE's DevToolbar.

If I'm wrong in how I've explained this, please somebody correct me!

--

David

Hi David,

Thanks, you're exactly right. The issue is that those 20px are taken
from the left edge of the container ("main") div. My issue with using
300px for left-margin is that the 250px "image" div is dynamically
generated - meaning that that div can be 400px or 150px or however many
wide. Further, there can be one more than one "image" div in the "main"
div with different widths. Therefore, I am looking for a solution to
this that will not require to set the left-margin from the container
"main" div. The funny thing is that the p tag's margins are respected.
But the ul's aren't. I guess it's how lists are treated. Further, both
IE and Firefox displayed the same behaviour.

So: what I'm looking for is a way to change any element style (keeping
the actualy html structure unchanged - or changed minimally - chage the
"image" div to a span or some other tag maybe?) that would allow me to
have lists that are rendered "correctly" (in quotes because perhaps
this is the correct behaviour according to the spec, but not what I am
looking for).

Thanks again!
Max

It is interesting that FF shows the bullet points with your config while in
IE they are hidden. But to fix your problem -

1) Take the UL out of that div (<div class="image
webdeveloper-relative-positioned-element" style="width: 250px; float:
left;">). Does it really need to be in this block? If you do this, the
bullets now show in IE and FF, but in IE they touch the image.

2) I changed the LI style in your style.css to the following and it seems to
work. But I'm not sure how that will affect the rest of your site.

LI {
list-style-position: outside;
}

Does your generated content change the containing div for the image? IOW,
if your image changes width to 400px, will your inline for the div be
changed also?

I think many of the regulars here would encourage you to get away from the
pixel-perfect design you seem to be trying to create.

--

David

Hi David,

I tried your suggestion, but it doesn't make any difference.

Thanks,
Max

[Johannes Koch]

mno wrote:
[snipped 180 lines of quote]

Hi David,

I tried your suggestion, but it doesn't make any difference.

Is it really _necessary_ to quote all the previous stuff?
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)