473,692 Members | 2,196 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

Sep 1 '06 #1
6 5037
"mno" <mn****@gmail.c omwrote in message
news:11******** ************@i3 g2000cwc.google groups.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="webdevel oper-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

Sep 1 '06 #2
mno

David Woods wrote:
"mno" <mn****@gmail.c omwrote in message
news:11******** ************@i3 g2000cwc.google groups.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="webdevel oper-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

Sep 1 '06 #3
"mno" <mn****@gmail.c omwrote in message
news:11******** *************@7 4g2000cwt.googl egroups.com...
>
David Woods wrote:
>"mno" <mn****@gmail.c omwrote in message
news:11******* *************@i 3g2000cwc.googl egroups.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="webdevel oper-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

Sep 1 '06 #4
mno

David Woods wrote:
"mno" <mn****@gmail.c omwrote in message
news:11******** *************@7 4g2000cwt.googl egroups.com...

David Woods wrote:
"mno" <mn****@gmail.c omwrote in message
news:11******** ************@i3 g2000cwc.google groups.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="webdevel oper-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

Sep 3 '06 #5
mno

David Woods wrote:
"mno" <mn****@gmail.c omwrote in message
news:11******** *************@7 4g2000cwt.googl egroups.com...

David Woods wrote:
"mno" <mn****@gmail.c omwrote in message
news:11******** ************@i3 g2000cwc.google groups.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="webdevel oper-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

Sep 5 '06 #6
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.)
Sep 5 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
5915
by: puzzled | last post by:
I am trying to use css to control the indentation within items in a list. I would like something that looks like this: Text of a paragraph goes here, leading to the following list: * list item 1 * list item 2 * and so on
12
39113
by: Rick DeBay | last post by:
I'm trying to create a layout table, where the spacing between rows varies. I've tried using setting margin-top and border-top for the rows I wan't spaced down from the one above, and I've also tried setting it on all of the cells of that row. This hasn't worked, so I was wondering if anyone knew how it could be done. Thanks, Rick DeBay
1
3309
by: Jim Moe | last post by:
Hello, I am (slowly) in the process of changing a table-based layout to CSS/div-based. One area that uses tables a lot is the main nav menu. I have discovered that tables have advantage: all browsers display them the same. I created a CSS to use <ul> as the list container rather than <table>. It works quite well -- in Mozilla. With IE V5 or 6 extra spacing is added between each button image and the large spaces are compressed; it is...
4
3563
by: fleemo17 | last post by:
Is there a way to tweak the spacing of lines of text (or leading) *specifically* in IE6? I've created a "Quick Search" box in my layout which renders pretty consistently in all the browsers I've tested it on, except in IE6 for the PC. The spacing is completely inconsistent with all the other browsers. (See http://www.sunriveronline.org/misc/clrn ) Is there a way to include a few lines of code in my CSS file that will adjust IE6's...
12
2214
by: Sebastien B. | last post by:
I'm wondering if it's at all possible to have spacing between a table's cells, and only between the cells, not between the outter cells and the table's border. See end of message for an example (make sure to view this in fixed width font). I've played around with different things, such as margin-right, etc. but I didn't get any results. Would this be even possible. I would have thought the specs (either HTML or CSS) would have allowed...
4
2462
by: metoikos | last post by:
I've scoured the web (clumsily, I'm sure) for information on the difficulties I am having, checked my markup in validators, and had a friend with more CSS clue look over it, but I haven't had any luck. I'll detail my difficulties here and hope for help. I will note that I'm using headings to delineate different sections of my message for easier reading. As you can see from the subject, my problems are related to spacing; one of them is...
10
11043
by: phil-news-nospam | last post by:
I have a table with 3 columns in 1 row. I want to increase the spacing _between_ the columns (gutter) _without_ increasing the spacing between those columns and the table itself. Is there a way to do that in CSS without having to code in extra dummy columns in HTML to create gutters? -- ----------------------------------------------------------------------------- | Phil Howard KA9WGN | http://linuxhomepage.com/ ...
2
4366
by: Ben | last post by:
I have some ordered lists, containing unordered lists. I want to double-space the "paragraphs", i.e. ordered lists. But not the the nested lists. I can't figure out how. Page is here: http://s90632679.onlinehome.us/radio.html
1
3289
by: replyrpatil | last post by:
What I am trying to do: I need to print a compact access report (font 6 size) created using RTF2 program developed by Stephen Lebans to generate a TIF image of custom size (5.5 in x 2.0 in) Problem Recreation : Download attached RAR file (http://download.yousendit.com/627919383AFAA7E3 ) Steps 1) Install RTF2 program created by Lebans 2) Install ZAN Image Printer (Virtual Printer) 3) Create Custom Paper Size ----...
0
8604
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9083
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8961
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8800
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8801
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7627
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5819
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4324
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
3
1957
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.