Why wont be <LI> background span the whole background?

Im making my first foray into table-less web site design and have run
into a brick wall. This is the URLs:

http://www.ainewmedia.co.uk/css_page.htm
http://www.ainewmedia.co.uk/css_test.css

Im using an inline list for my horizontal navbar items with the right
hand border of each <LI> item set to white 1px to create the illusion
of a divider between each item.

The trouble is, no matter what I try it only fills about 3/4 of the
23px block. I want the divider lines to fill the block from top to
bottom.

Ive tried loads of things but am stuck.

Can anyone please help?

Thanks...John

http://www.ainewmedia.co.uk/css_page.htm

On 2006-09-25, john_aspinall (AT) yahoo (DOT) co.uk <john_aspinall (AT) yahoo (DOT) co.uk> wrote:

Im making my first foray into table-less web site design and have run
into a brick wall. This is the URLs:

http://www.ainewmedia.co.uk/css_page.htm
http://www.ainewmedia.co.uk/css_test.css

Im using an inline list for my horizontal navbar items with the right
hand border of each <LI> item set to white 1px to create the illusion
of a divider between each item.

The trouble is, no matter what I try it only fills about 3/4 of the
23px block. I want the divider lines to fill the block from top to
bottom.

Ive tried loads of things but am stuck.

Can anyone please help?

This is pretty difficult. You could get it to work by changing the
line-height property of the <ul>, but it's not advisable, as the height
of the <li> inline-boxes and therefore of their borders is not precisely
defined.

See CSS 2.1 10.6.1: "The height [...] should be based on the font, but
this specification does not specify how".

The best thing to use here would arguably be inline-block, although
Firefox doesn't support those. So I suggest make the <ul> and <li> both
float: left, and then you can set the height on the <li> to 23px.

Sweet, your last suggested worked perfectly, thanks.

I dont understand why it works and would like to! What was going on
with the floats and why did it make it work? I thought float was used
to make content flow around a block?

Cheers....John

Ben C wrote:

On 2006-09-25, john_aspinall (AT) yahoo (DOT) co.uk <john_aspinall (AT) yahoo (DOT) co.uk> wrote:
Im making my first foray into table-less web site design and have run
into a brick wall. This is the URLs:

http://www.ainewmedia.co.uk/css_page.htm
http://www.ainewmedia.co.uk/css_test.css

Im using an inline list for my horizontal navbar items with the right
hand border of each <LI> item set to white 1px to create the illusion
of a divider between each item.

The trouble is, no matter what I try it only fills about 3/4 of the
23px block. I want the divider lines to fill the block from top to
bottom.

Ive tried loads of things but am stuck.

Can anyone please help?

This is pretty difficult. You could get it to work by changing the
line-height property of the <ul>, but it's not advisable, as the height
of the <li> inline-boxes and therefore of their borders is not precisely
defined.

See CSS 2.1 10.6.1: "The height [...] should be based on the font, but
this specification does not specify how".

The best thing to use here would arguably be inline-block, although
Firefox doesn't support those. So I suggest make the <ul> and <li> both
float: left, and then you can set the height on the <li> to 23px.

Also, Ive just noticed I am getting the dreaded horizontal scroll bar
appearing! I dont have anything set to over 100% in width - what
goings on?

Thanks.


john_aspinall (AT) yahoo (DOT) co.uk wrote:

Sweet, your last suggested worked perfectly, thanks.

I dont understand why it works and would like to! What was going on
with the floats and why did it make it work? I thought float was used
to make content flow around a block?

Cheers....John

Ben C wrote:
On 2006-09-25, john_aspinall (AT) yahoo (DOT) co.uk <john_aspinall (AT) yahoo (DOT) co.uk> wrote:
Im making my first foray into table-less web site design and have run
into a brick wall. This is the URLs:

http://www.ainewmedia.co.uk/css_page.htm
http://www.ainewmedia.co.uk/css_test.css

Im using an inline list for my horizontal navbar items with the right
hand border of each <LI> item set to white 1px to create the illusion
of a divider between each item.

The trouble is, no matter what I try it only fills about 3/4 of the
23px block. I want the divider lines to fill the block from top to
bottom.

Ive tried loads of things but am stuck.

Can anyone please help?

This is pretty difficult. You could get it to work by changing the
line-height property of the <ul>, but it's not advisable, as the height
of the <li> inline-boxes and therefore of their borders is not precisely
defined.

See CSS 2.1 10.6.1: "The height [...] should be based on the font, but
this specification does not specify how".

The best thing to use here would arguably be inline-block, although
Firefox doesn't support those. So I suggest make the <ul> and <li> both
float: left, and then you can set the height on the <li> to 23px.

On 2006-09-25, john_aspinall (AT) yahoo (DOT) co.uk <john_aspinall (AT) yahoo (DOT) co.uk> wrote:

Sweet, your last suggested worked perfectly, thanks.

I dont understand why it works and would like to! What was going on
with the floats and why did it make it work? I thought float was used
to make content flow around a block?

It is used for that, but another property of floats is that if you have
a series of left floats they stack up against each other from the left,
until there isn't room, at which point they move down and start from the
left again.

In that respect they behave a little bit like inline-boxes in a
left-to-right formatting context. But the floated boxes themselves are
more like block boxes in the sense that you can precisely control their
height.

So they're not bad for lining up boxes next to each other to do
toolbar type of things.

What you've got is each <li> trying to float left inside the <ul>, but
after the first one's floated all the way to left, the second one floats
as far as it can until it bumps into the first one. The third one bumps
into the second one and so on. So they stack up from the left.

Ben C wrote:
On 2006-09-25, john_aspinall (AT) yahoo (DOT) co.uk <john_aspinall (AT) yahoo (DOT) co.uk> wrote:
Im making my first foray into table-less web site design and have run
into a brick wall. This is the URLs:

http://www.ainewmedia.co.uk/css_page.htm
http://www.ainewmedia.co.uk/css_test.css

Im using an inline list for my horizontal navbar items with the right
hand border of each <LI> item set to white 1px to create the illusion
of a divider between each item.

The trouble is, no matter what I try it only fills about 3/4 of the
23px block. I want the divider lines to fill the block from top to
bottom.

Ive tried loads of things but am stuck.

Can anyone please help?

This is pretty difficult. You could get it to work by changing the
line-height property of the <ul>, but it's not advisable, as the height
of the <li> inline-boxes and therefore of their borders is not precisely
defined.

See CSS 2.1 10.6.1: "The height [...] should be based on the font, but
this specification does not specify how".

The best thing to use here would arguably be inline-block, although
Firefox doesn't support those. So I suggest make the <ul> and <li> both
float: left, and then you can set the height on the <li> to 23px.

On 2006-09-25, john_aspinall (AT) yahoo (DOT) co.uk wrote:

Im making my first foray into table-less web site design and have run
into a brick wall. This is the URLs:

http://www.ainewmedia.co.uk/css_page.htm
http://www.ainewmedia.co.uk/css_test.css

Im using an inline list for my horizontal navbar items with the right
hand border of each <LI> item set to white 1px to create the illusion
of a divider between each item.

The trouble is, no matter what I try it only fills about 3/4 of the
23px block. I want the divider lines to fill the block from top to
bottom.

Rather than take up only a portion of the block, in my browser
window they overflow the block:
<http://cfaj.freeshell.org/testing/ainewmedia.jpg>


--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Chris F.A. Johnson wrote:

On 2006-09-25, john_aspinall (AT) yahoo (DOT) co.uk wrote:

http://www.ainewmedia.co.uk/css_page.htm

no matter what I try it only fills about 3/4 of the 23px block.

in my browser window they overflow the block:
http://cfaj.freeshell.org/testing/ainewmedia.jpg

Make your browser window narrower and they will also wrap to a 2nd line,
making it even less attractive.

--
Berg

On 2006-09-25, john_aspinall (AT) yahoo (DOT) co.uk <john_aspinall (AT) yahoo (DOT) co.uk> wrote:

snip

http://www.ainewmedia.co.uk/css_page.htm
http://www.ainewmedia.co.uk/css_test.css
snip

Also, Ive just noticed I am getting the dreaded horizontal scroll bar
appearing! I dont have anything set to over 100% in width - what
goings on?

The problem there is:

#right {
position:absolute;
right:1px;
top:174px;
width:15px;
background-color:#999999
}

15px isn't big enough for the content (the word "right"), so that
overflows, and also goes past the 1px you've set for right. So the UA
gives you the scrollbar to take you to the end of the overflowed text.
If you increase right or width a bit the scrollbar goes away.

Better not to set width at all (or set it to "auto"), then the div will
"shrink to fit" the content and be just wide enough.

Other options, depending on what you want, are to set min-width or
max-width on #right. And as a last resort if you set overflow: hidden on
body then whatever happens you shouldn't get the dreaded horizontal
scrollbar.

But for developing your page it may be better not to set overflow:
hidden so you know what's going on.