width of bottom-border?

[FuzzyLogik]

By width, I don't mean weight. I have a row of <li>'s, with a
bottom-border. I want the bottom-border to only go 90% of the <li>
(centered)

Is there any way to do this?

I have it in this format:

CSS:
li {
border-bottom: 1px solid #00ff00;
}
HTML:
<ul>
<li>this</li>
<li>that</li>
<li>the other</li>
<li>bleh</li>
</ul>

[FuzzyLogik]

On Oct 30, 4:18 pm, "FuzzyLogik" <[e-mail]:

By width, I don't mean weight. I have a row of <li>'s, with a
bottom-border. I want the bottom-border to only go 90% of the <li>
(centered)

Is there any way to do this?

I have it in this format:

CSS:
li {
border-bottom: 1px solid #00ff00;

}HTML:
<ul>
<li>this</li>
<li>that</li>
<li>the other</li>
<li>bleh</li>
</ul>

!Also!

On the same list, when I have items rollover, it's not padding out like
the first line, e.g.:
|---This is a list item----|
|---This is a list item----|
|---This is a list item----|
|---This is a list item----|
|---This is a longer-------|
|List item-------------------|

I want it all to be padded out 6px.

[dorayme]

In article
<11*********************@i42g2000cwa.googlegroups. com>,
"FuzzyLogik" <ta****@gmail.comwrote:

is it not time for you to post a url?

--
dorayme

[FuzzyLogik]

dorayme wrote:

In article
<11*********************@i42g2000cwa.googlegroups. com>,
"FuzzyLogik" <ta****@gmail.comwrote:

is it not time for you to post a url?

--
dorayme

http://www.phazm.net/csstest/list01.html

Well, I don't know what I was doing wrong at work, but now the one that
wraps around is being padded correctly, so forget that :)

But I want the green bottom-border to NOT touch the blue border,
WITHOUT pushing the blue border out any more than 200px (which it's at
currently)

[Ben C]

On 2006-10-31, FuzzyLogik <ta****@gmail.comwrote:

>
dorayme wrote:

>In article
<11*********************@i42g2000cwa.googlegroups .com>,
"FuzzyLogik" <ta****@gmail.comwrote:

is it not time for you to post a url?

--
dorayme

http://www.phazm.net/csstest/list01.html

Well, I don't know what I was doing wrong at work, but now the one that
wraps around is being padded correctly, so forget that :)

But I want the green bottom-border to NOT touch the blue border,
WITHOUT pushing the blue border out any more than 200px (which it's at
currently)

Make the <lia bit narrower, and use margin instead of padding on the
left.

This works because padding goes inside the border, margin goes outside
it.

i.e. where you have

li {
padding-left:13px;
border-bottom:1px solid #33FF00;
width: 200px;
}

try

li {
/* padding-left:13px; */
margin-left: 13px;
border-bottom:1px solid #33FF00;
width: 174px;
}

[FuzzyLogik]

Ben C wrote:

On 2006-10-31, FuzzyLogik <ta****@gmail.comwrote:

dorayme wrote:

In article
<11*********************@i42g2000cwa.googlegroups. com>,
"FuzzyLogik" <ta****@gmail.comwrote:

is it not time for you to post a url?

--
dorayme

http://www.phazm.net/csstest/list01.html

Well, I don't know what I was doing wrong at work, but now the one that
wraps around is being padded correctly, so forget that :)

But I want the green bottom-border to NOT touch the blue border,
WITHOUT pushing the blue border out any more than 200px (which it's at
currently)

Make the <lia bit narrower, and use margin instead of padding on the
left.

This works because padding goes inside the border, margin goes outside
it.

i.e. where you have

li {
padding-left:13px;
border-bottom:1px solid #33FF00;
width: 200px;
}

try

li {
/* padding-left:13px; */
margin-left: 13px;
border-bottom:1px solid #33FF00;
width: 174px;
}

Great, thank you :)

[Beauregard T. Shagnasty]

Ben C wrote:

On 2006-10-31, FuzzyLogik <ta****@gmail.comwrote:

>http://www.phazm.net/csstest/list01.html

Well, I don't know what I was doing wrong at work, but now the one
that wraps around is being padded correctly, so forget that :)

But I want the green bottom-border to NOT touch the blue border,
WITHOUT pushing the blue border out any more than 200px (which it's
at currently)

Make the <lia bit narrower, and use margin instead of padding on
the left.

This works because padding goes inside the border, margin goes
outside it.

i.e. where you have

li {
padding-left:13px;
border-bottom:1px solid #33FF00;
width: 200px;
}

try

li {
/* padding-left:13px; */
margin-left: 13px;
border-bottom:1px solid #33FF00;
width: 174px;
}

Perhaps this will be a bit better, allowing the centering Fuzzy
originally mentioned, and also scaling when a visitor resizes:

ul {
padding:0;
margin:0;
list-style-type:none;
width:20%; /* size to taste */
border:1px solid #3399FF;
}
li {
margin: 0 5%; /* <-- makes width of border-bottom 90% */
border-bottom:1px solid #33FF00;
text-align: center; /* <-- as originally requested */
}

--
-bts
-Motorcycles defy gravity; cars just suck

[FuzzyLogik]

On Oct 31, 5:38 am, "Beauregard T. Shagnasty"
<[e-mail]:

Ben C wrote:

On 2006-10-31, FuzzyLogik <[e-mail]:

>http://www.phazm.net/csstest/list01.html

Well, I don't know what I was doing wrong at work, but now the one
that wraps around is being padded correctly, so forget that :)

But I want the green bottom-border to NOT touch the blue border,
WITHOUT pushing the blue border out any more than 200px (which it's
at currently)

Make the <lia bit narrower, and use margin instead of padding on
the left.

This works because padding goes inside the border, margin goes
outside it.

i.e. where you have

li {
padding-left:13px;
border-bottom:1px solid #33FF00;
width: 200px;
}

try

li {
/* padding-left:13px; */
margin-left: 13px;
border-bottom:1px solid #33FF00;
width: 174px;
}Perhaps this will be a bit better, allowing the centering Fuzzy

originally mentioned, and also scaling when a visitor resizes:

ul {
padding:0;
margin:0;
list-style-type:none;
width:20%; /* size to taste */
border:1px solid #3399FF;}li {
margin: 0 5%; /* <-- makes width of border-bottom 90% */
border-bottom:1px solid #33FF00;
text-align: center; /* <-- as originally requested */

}--
-bts
-Motorcycles defy gravity; cars just suck

Ahh, now that I'm at work and see my code again, it becomes a bit more
complicated.

#nav {
width: 138px;
background-color: #FFF;
padding:1em 0 1em 0;
}

#nav ul {
list-style: none;
padding: 0 0 13px 0;
margin: 0 0 1em 0;
border: none;
background-color: #00FF00;
}

#nav li {
padding-left:6px;
margin: 0;
border-right: 1px solid #669fb7;
border-left: 1px solid #669fb7;
background-color: #F0F9FE;
border-bottom: 1px solid #C5D3DD;
}

So I can't actually adjust the size of the li, because that will make
the border on the left not align with the border on the top. (makes it
shallower)

[FuzzyLogik]

On Oct 31, 7:14 am, "FuzzyLogik" <[e-mail]:

On Oct 31, 5:38 am, "Beauregard T. Shagnasty"

<[e-mail]:

Ben C wrote:

On 2006-10-31, FuzzyLogik <[e-mail]:
>>http://www.phazm.net/csstest/list01.html

>Well, I don't know what I was doing wrong at work, but now the one
>that wraps around is being padded correctly, so forget that :)

>But I want the green bottom-border to NOT touch the blue border,
>WITHOUT pushing the blue border out any more than 200px (which it's
>at currently)

Make the <lia bit narrower, and use margin instead of padding on
the left.

This works because padding goes inside the border, margin goes
outside it.

i.e. where you have

li {
padding-left:13px;
border-bottom:1px solid #33FF00;
width: 200px;
}

try

li {
/* padding-left:13px; */
margin-left: 13px;
border-bottom:1px solid #33FF00;
width: 174px;
}Perhaps this will be a bit better, allowing the centering Fuzzy

originally mentioned, and also scaling when a visitor resizes:

ul {
padding:0;
margin:0;
list-style-type:none;
width:20%; /* size to taste */
border:1px solid #3399FF;}li {
margin: 0 5%; /* <-- makes width of border-bottom 90% */
border-bottom:1px solid #33FF00;
text-align: center; /* <-- as originally requested */

}--
-bts
-Motorcycles defy gravity; cars just suckAhh, now that I'm at work and see my code again, it becomes a bit more

complicated.

#nav {
width: 138px;
background-color: #FFF;
padding:1em 0 1em 0;

}#nav ul {
list-style: none;
padding: 0 0 13px 0;
margin: 0 0 1em 0;
border: none;
background-color: #00FF00;

}#nav li {
padding-left:6px;
margin: 0;
border-right: 1px solid #669fb7;
border-left: 1px solid #669fb7;
background-color: #F0F9FE;
border-bottom: 1px solid #C5D3DD;

}So I can't actually adjust the size of the li, because that will make
the border on the left not align with the border on the top. (makes it
shallower)

That was confusing, here's an html file:

http://www.phazm.net/csstest/list1b.html

[Ben C]

On 2006-10-31, FuzzyLogik <ta****@gmail.comwrote:
[snip]

li {
padding-left:13px;
border-bottom:1px solid #33FF00;
width: 200px;
}

try

li {
/* padding-left:13px; */
margin-left: 13px;
border-bottom:1px solid #33FF00;
width: 174px;
}Perhaps this will be a bit better, allowing the centering Fuzzy

originally mentioned, and also scaling when a visitor resizes:

ul {
padding:0;
margin:0;
list-style-type:none;
width:20%; /* size to taste */
border:1px solid #3399FF;}li {
margin: 0 5%; /* <-- makes width of border-bottom 90% */
border-bottom:1px solid #33FF00;
text-align: center; /* <-- as originally requested */

[snip]

Ahh, now that I'm at work and see my code again, it becomes a bit more
complicated.

#nav {
width: 138px;
background-color: #FFF;
padding:1em 0 1em 0;
}

#nav ul {
list-style: none;
padding: 0 0 13px 0;
margin: 0 0 1em 0;
border: none;
background-color: #00FF00;
}

#nav li {
padding-left:6px;
margin: 0;
border-right: 1px solid #669fb7;
border-left: 1px solid #669fb7;
background-color: #F0F9FE;
border-bottom: 1px solid #C5D3DD;
}

So I can't actually adjust the size of the li, because that will make
the border on the left not align with the border on the top. (makes it
shallower)

Sorry, don't understand. What border on the top? The li has no top
border.

[FuzzyLogik]

On Oct 31, 7:27 am, Ben C <[e-mail]:

On 2006-10-31, FuzzyLogik <[e-mail]:
[snip]

li {
padding-left:13px;
border-bottom:1px solid #33FF00;
width: 200px;
}

try

li {
/* padding-left:13px; */
margin-left: 13px;
border-bottom:1px solid #33FF00;
width: 174px;
}Perhaps this will be a bit better, allowing the centering Fuzzy
originally mentioned, and also scaling when a visitor resizes:

ul {
padding:0;
margin:0;
list-style-type:none;
width:20%; /* size to taste */
border:1px solid #3399FF;}li {
margin: 0 5%; /* <-- makes width of border-bottom 90% */
border-bottom:1px solid #33FF00;
text-align: center; /* <-- as originally requested */

[snip]

Ahh, now that I'm at work and see my code again, it becomes a bit more
complicated.

#nav {
width: 138px;
background-color: #FFF;
padding:1em 0 1em 0;
}

#nav ul {
list-style: none;
padding: 0 0 13px 0;
margin: 0 0 1em 0;
border: none;
background-color: #00FF00;
}

#nav li {
padding-left:6px;
margin: 0;
border-right: 1px solid #669fb7;
border-left: 1px solid #669fb7;
background-color: #F0F9FE;
border-bottom: 1px solid #C5D3DD;
}

So I can't actually adjust the size of the li, because that will make
the border on the left not align with the border on the top. (makes it
shallower)Sorry, don't understand. What border on the top? The li has no top

border.

It has an image border, not CSS.
The blue border obviously needs to match up everywhere, while the
"underline" should not touch it, but be about 3-4px off on each side

[Ben C]

On 2006-10-31, FuzzyLogik <ta****@gmail.comwrote:

>

On Oct 31, 7:27 am, Ben C <[e-mail]:

>On 2006-10-31, FuzzyLogik <[e-mail]:
[snip]

li {
padding-left:13px;
border-bottom:1px solid #33FF00;
width: 200px;
}

try

li {
/* padding-left:13px; */
margin-left: 13px;
border-bottom:1px solid #33FF00;
width: 174px;
}Perhaps this will be a bit better, allowing the centering Fuzzy
originally mentioned, and also scaling when a visitor resizes:

>ul {
padding:0;
margin:0;
list-style-type:none;
width:20%; /* size to taste */
border:1px solid #3399FF;}li {
margin: 0 5%; /* <-- makes width of border-bottom 90% */
border-bottom:1px solid #33FF00;
text-align: center; /* <-- as originally requested */

[snip]

Ahh, now that I'm at work and see my code again, it becomes a bit more
complicated.

#nav {
width: 138px;
background-color: #FFF;
padding:1em 0 1em 0;
}

#nav ul {
list-style: none;
padding: 0 0 13px 0;
margin: 0 0 1em 0;
border: none;
background-color: #00FF00;
}

#nav li {
padding-left:6px;
margin: 0;
border-right: 1px solid #669fb7;
border-left: 1px solid #669fb7;
background-color: #F0F9FE;
border-bottom: 1px solid #C5D3DD;
}

So I can't actually adjust the size of the li, because that will make
the border on the left not align with the border on the top. (makes it
shallower)Sorry, don't understand. What border on the top? The li has no top

border.

It has an image border, not CSS.
The blue border obviously needs to match up everywhere, while the
"underline" should not touch it, but be about 3-4px off on each side

I see, the problem is that your <li>s also have left and right borders,
which you don't want to move.

You could move the left and right borders from the <li>s to the ul; but
that spoils your curved edges at the bottom. You can fix that by instead
of making the curved image the background-image of the <uljust make
it an <img style="display: block"that follows the ul (and transfer the
ul's bottom margin to that img as well).

Alternatively, since there is no problem in CSS which cannot be solved
by using another level of nesting, you can put inside your <li>s spans
with left and right margins. Then transfer the bottom borders from the
<li>s to the nested spans. Obviously the content goes in the span, i.e.

<li><span>This is a test</span></li>

Both of these solutions compromise the "logic" of your HTML by adding
extra elements, but I can't see a way of getting the exact effect you
want without doing that.

It's easy if you either lose the curved borders, or allow the bottom
borders to go all the way the edge.

There is one further alternative which is to get rid of the bottom
border altogether and use text-decoration: underline. Not exactly the
same effect, but fairly similar.

[Beauregard T. Shagnasty]

FuzzyLogik wrote:

The blue border obviously needs to match up everywhere, while the
"underline" should not touch it, but be about 3-4px off on each side

See my post where it says:

margin: 0 5%; /* <-- makes width of border-bottom 90% */

--
-bts
-Motorcycles defy gravity; cars just suck

[Ben C]

On 2006-10-31, Beauregard T. Shagnasty <a.*********@example.invalidwrote:

FuzzyLogik wrote:

>The blue border obviously needs to match up everywhere, while the
"underline" should not touch it, but be about 3-4px off on each side

See my post where it says:

margin: 0 5%; /* <-- makes width of border-bottom 90% */

That was a good suggestion for a solution to the original problem. But
now the OP wants a box that looks like this:

| _____ |

where | is left and right borders, and _ is bottom border.

i.e. gaps between the left and right ends of the bottom border and the
left and right borders.

This can't be done per se, so any solution is likely to involve the
left/right borders and bottom border being on different boxes.

[Beauregard T. Shagnasty]

Ben C wrote:

That was a good suggestion for a solution to the original problem. But
now the OP wants a box that looks like this:

Oh. I missed where Fuzzy changed the parameters ...
"When you come to the fork in the road, take it."

-Yogi Berra

--
-bts
-Motorcycles defy gravity; cars just suck

[FuzzyLogik]

On Oct 31, 9:01 am, Ben C <[e-mail]:

On 2006-10-31, FuzzyLogik <[e-mail]:

On Oct 31, 7:27 am, Ben C <[e-mail]:

On 2006-10-31, FuzzyLogik <[e-mail]:
[snip]

li {
padding-left:13px;
border-bottom:1px solid #33FF00;
width: 200px;
}

try

li {
/* padding-left:13px; */
margin-left: 13px;
border-bottom:1px solid #33FF00;
width: 174px;
}Perhaps this will be a bit better, allowing the centering Fuzzy
originally mentioned, and also scaling when a visitor resizes:

ul {
padding:0;
margin:0;
list-style-type:none;
width:20%; /* size to taste */
border:1px solid #3399FF;}li {
margin: 0 5%; /* <-- makes width of border-bottom 90% */
border-bottom:1px solid #33FF00;
text-align: center; /* <-- as originally requested */
[snip]
Ahh, now that I'm at work and see my code again, it becomes a bit more
complicated.

#nav {
width: 138px;
background-color: #FFF;
padding:1em 0 1em 0;
}

#nav ul {
list-style: none;
padding: 0 0 13px 0;
margin: 0 0 1em 0;
border: none;
background-color: #00FF00;
}

#nav li {
padding-left:6px;
margin: 0;
border-right: 1px solid #669fb7;
border-left: 1px solid #669fb7;
background-color: #F0F9FE;
border-bottom: 1px solid #C5D3DD;
}

So I can't actually adjust the size of the li, because that will make
the border on the left not align with the border on the top. (makes it
shallower)Sorry, don't understand. What border on the top? The li has no top
border.

It has an image border, not CSS.
The blue border obviously needs to match up everywhere, while the
"underline" should not touch it, but be about 3-4px off on each sideI see, the problem is that your <li>s also have left and right borders,

which you don't want to move.

You could move the left and right borders from the <li>s to the ul; but
that spoils your curved edges at the bottom. You can fix that by instead
of making the curved image the background-image of the <uljust make
it an <img style="display: block"that follows the ul (and transfer the
ul's bottom margin to that img as well).

Alternatively, since there is no problem in CSS which cannot be solved
by using another level of nesting, you can put inside your <li>s spans
with left and right margins. Then transfer the bottom borders from the
<li>s to the nested spans. Obviously the content goes in the span, i.e.

<li><span>This is a test</span></li>

Both of these solutions compromise the "logic" of your HTML by adding
extra elements, but I can't see a way of getting the exact effect you
want without doing that.

It's easy if you either lose the curved borders, or allow the bottom
borders to go all the way the edge.

There is one further alternative which is to get rid of the bottom
border altogether and use text-decoration: underline. Not exactly the
same effect, but fairly similar.

Alright, thanks for your help :-/

I guess I'm just going to leave them touching the border, as I need to
keep the code logical (I'm trying to convince my boss that tables are
not the way to go in this instance, and I just got done giving him my
speal on semantic coding, so I can't go and throw in a bunch of extra
stuff like that.

Let it be noted that I fully support adding a "length" and "height"
value to borders.
;)

[Ben C]

On 2006-10-31, FuzzyLogik <ta****@gmail.comwrote:
[snip]

>Both of these solutions compromise the "logic" of your HTML by adding
extra elements, but I can't see a way of getting the exact effect you
want without doing that.

It's easy if you either lose the curved borders, or allow the bottom
borders to go all the way the edge.

[snip]

I guess I'm just going to leave them touching the border, as I need to
keep the code logical (I'm trying to convince my boss that tables are
not the way to go in this instance, and I just got done giving him my
speal on semantic coding, so I can't go and throw in a bunch of extra
stuff like that.

Good decision. Much better to be a bit flexible about what it looks like
than go crazy trying to control the last pixel. And good to stick to the
principle of not introducing bogus elements purely for layout purposes.
And good to lecture the boss.

Let it be noted that I fully support adding a "length" and "height"
value to borders.
;)

Personally I think life is quite complicated enough already.