html/span/css navbar hell

[David Housman]

Hello,

I'm trying to implement a navigation bar with a ul in css. The code is
a template, but i'm customizing. I can handle just text in each block,
but i want the first block to have an image and then text, which I'm
doing with a span element. I think i need it that way to handle text
positioning of the text.

So there's an anchor block, and inside4 that i'm putting an image and
a span block.
Except. It. Doesn't. Work. http://www.discovertheuser.com/images/img1.gif
You can see the span sticking out of its ancestor blocks, and the text
padding screwed up. And some of the anchor block padding is stretching
below the img. I can get the span to show up below the img if i float
it left, and if I take my vertical-align to bottom, the span shows up
above the ul block.

I think there's some funky block/block/span quirkiness going on, and
I'd appreciate it if someone could steer me toward an explanation.
Thanks in advance for your help :).

The html:
<ul id="nav">
<li id="nav-home"><a id="a-home" href="../index.html"><img id="navimg"
src="../images/photos/dj.jpg" width="90" height="70" border="0"><span
class="regular">Home</span></a></li>

The css:
#nav {
margin-left:10%;
margin-right:10%;
margin-top:0;
margin-bottom:0;
padding:0;
background:#7A95FF url(nav_bg.jpg) 0 0 repeat-x;
float:left;
width:100%;
border:1px solid #000000;
border-width:1px 1px 2px 1px;
}
#nav li{
display:inline;
padding:0;
margin:0;
vertical-align:text-bottom;
}

#nav a:link,
#nav a:visited{
float:left;
color:#000;
background:#FFCC00;
padding:40px 40px 4px 10px;
width:auto;
height:25px;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;

}

#nav #a-home{
display:inline-block;
padding-top:0px;
padding-right:0px;
margin-bottom:0px;
height:auto;
padding-left:4px;
padding-bottom:0px;
}

#nav img{
margin:0px !important;
}

.regular{
float:none !important;
background-color:blue !important;
padding:40px 40px 4px 10px !important;
margin:0px !important;
height:25px !important;
}

[Ben C]

On 2007-02-08, David Housman <dh******@gmail.comwrote:

Hello,

I'm trying to implement a navigation bar with a ul in css. The code is
a template, but i'm customizing. I can handle just text in each block,
but i want the first block to have an image and then text, which I'm
doing with a span element. I think i need it that way to handle text
positioning of the text.

So there's an anchor block, and inside4 that i'm putting an image and
a span block.
Except. It. Doesn't. Work. http://www.discovertheuser.com/images/img1.gif
You can see the span sticking out of its ancestor blocks, and the text
padding screwed up. And some of the anchor block padding is stretching
below the img.

I can get the span to show up below the img if i float
it left, and if I take my vertical-align to bottom, the span shows up
above the ul block.

Do you want the span below the image, or to the right of it?

I think there's some funky block/block/span quirkiness going on, and
I'd appreciate it if someone could steer me toward an explanation.

..regular is an inline box. The exact dimensions of its background box is
not defined by the spec, and in this case, it extends below the
characters of "Home" to make room for the descenders in the current
font. If you look closely at your gif image, you will see that the
bottom of the image is aligned with the baseline of the text.

Basically I would say setting backgrounds, borders etc. on inline boxes
is not going to be a good way to do toolbars like this. Save it for
highlighting portions of text in a paragraph and things like that.

You need to work with block boxes and probably floats since inline-block
is not well supported.

The css:
#nav {
margin-left:10%;
margin-right:10%;
margin-top:0;
margin-bottom:0;
padding:0;
background:#7A95FF url(nav_bg.jpg) 0 0 repeat-x;
float:left;
width:100%;

margin-left:10% and width:100% means a horizontal scrollbar is
inevitable. Does #nav need to be floated?

[...]

#nav #a-home{
display:inline-block;

I can't see much reason for display: inline-block here, and it isn't
supported in Firefox.

[David Housman]

Hi,
Thanks for your help. Your advice has been helpful in helping me
understand what is going on. I"m not sure if my reply didn't get
through or was moderated, but I'll be more concise. and hope it was
teh former.
I have text inside a span inside an anchor. While I set teh box
attributes of the span
.regular{
float:none !important;
background-color:blue !important;
padding:40px 40px 4px 10px !important;
margin:0px 0px 10px 0px !important;
height:25px !important;
}

the text is potitioned at the baseline of the anchor (orangish)
element, (http://www.discovertheuser.com/images/img1.gif) and I can't
figure out why. Isn't the box around the text determined by the
attributes of the span? Why does the baseline of the text have any
bearing on the position of the span or teh text within the span?

Another question: Should the #nav box stretch to contain its objects,
if its set to height:auto? In the picture, its float:left. If i make
it float:none, the height collapses, I can make it big enough with a
div clear element or by manually setting the height. I would have
thought that if on auto, a containing block would stretch to fit its
child objects? Why does float have an effect on this?

Thanks,
Dave

\ ApparWhy does the position of the text matter from the perspective
of the enclosing anch
On Feb 8, 12:27 am, Ben C <[e-mail]:

On 2007-02-08, David Housman <[e-mail]:

Hello,

I'm trying to implement a navigation bar with a ul in css. The code is
a template, but i'm customizing. I can handle just text in each block,
but i want the first block to have an image and then text, which I'm
doing with a span element. I think i need it that way to handle text
positioning of the text.

So there's an anchor block, and inside4 that i'm putting an image and
a span block.
Except. It. Doesn't. Work.http://www.discovertheuser.com/images/img1.gif
You can see the span sticking out of its ancestor blocks, and the text
padding screwed up. And some of the anchor block padding is stretching
below the img.
I can get the span to show up below the img if i float
it left, and if I take my vertical-align to bottom, the span shows up
above the ul block.

Do you want the span below the image, or to the right of it?

I think there's some funky block/block/span quirkiness going on, and
I'd appreciate it if someone could steer me toward an explanation.

.regular is an inline box. The exact dimensions of its background box is
not defined by the spec, and in this case, it extends below the
characters of "Home" to make room for the descenders in the current
font. If you look closely at your gif image, you will see that the
bottom of the image is aligned with the baseline of the text.

Basically I would say setting backgrounds, borders etc. on inline boxes
is not going to be a good way to do toolbars like this. Save it for
highlighting portions of text in a paragraph and things like that.

You need to work with block boxes and probably floats since inline-block
is not well supported.

The css:
#nav {
margin-left:10%;
margin-right:10%;
margin-top:0;
margin-bottom:0;
padding:0;
background:#7A95FF url(nav_bg.jpg) 0 0 repeat-x;
float:left;
width:100%;

margin-left:10% and width:100% means a horizontal scrollbar is
inevitable. Does #nav need to be floated?

[...]

#nav #a-home{
display:inline-block;

I can't see much reason for display: inline-block here, and it isn't
supported in Firefox.

[David Housman]

Almost forgot: I'm trying to put teh text to the right of the image.

Thanks again,
Dave
On Feb 9, 2:19 pm, "David Housman" <[e-mail]:

Hi,
Thanks for your help. Your advice has been helpful in helping me
understand what is going on. I"m not sure if my reply didn't get
through or was moderated, but I'll be more concise. and hope it was
teh former.
I have text inside a span inside an anchor. While I set teh box
attributes of the span
.regular{
float:none !important;
background-color:blue !important;
padding:40px 40px 4px 10px !important;
margin:0px 0px 10px 0px !important;
height:25px !important;

}

the text is potitioned at the baseline of the anchor (orangish)
element, (http://www.discovertheuser.com/images/img1.gif) and I can't
figure out why. Isn't the box around the text determined by the
attributes of the span? Why does the baseline of the text have any
bearing on the position of the span or teh text within the span?

Another question: Should the #nav box stretch to contain its objects,
if its set to height:auto? In the picture, its float:left. If i make
it float:none, the height collapses, I can make it big enough with a
div clear element or by manually setting the height. I would have
thought that if on auto, a containing block would stretch to fit its
child objects? Why does float have an effect on this?

Thanks,
Dave

\ ApparWhy does the position of the text matter from the perspective
of the enclosing anch
On Feb 8, 12:27 am, Ben C <[e-mail]:

On 2007-02-08, David Housman <[e-mail]:

Hello,

I'm trying to implement a navigation bar with a ul in css. The code is
a template, but i'm customizing. I can handle just text in each block,
but i want the first block to have an image and then text, which I'm
doing with a span element. I think i need it that way to handle text
positioning of the text.

So there's an anchor block, and inside4 that i'm putting an image and
a span block.
Except. It. Doesn't. Work.http://www.discovertheuser.com/images/img1.gif
You can see the span sticking out of its ancestor blocks, and the text
padding screwed up. And some of the anchor block padding is stretching
below the img.
I can get the span to show up below the img if i float
it left, and if I take my vertical-align to bottom, the span shows up
above the ul block.

Do you want the span below the image, or to the right of it?

I think there's some funky block/block/span quirkiness going on, and
I'd appreciate it if someone could steer me toward an explanation.

.regular is an inline box. The exact dimensions of its background box is
not defined by the spec, and in this case, it extends below the
characters of "Home" to make room for the descenders in the current
font. If you look closely at your gif image, you will see that the
bottom of the image is aligned with the baseline of the text.

Basically I would say setting backgrounds, borders etc. on inline boxes
is not going to be a good way to do toolbars like this. Save it for
highlighting portions of text in a paragraph and things like that.

You need to work with block boxes and probably floats since inline-block
is not well supported.

The css:
#nav {
margin-left:10%;
margin-right:10%;
margin-top:0;
margin-bottom:0;
padding:0;
background:#7A95FF url(nav_bg.jpg) 0 0 repeat-x;
float:left;
width:100%;

margin-left:10% and width:100% means a horizontal scrollbar is
inevitable. Does #nav need to be floated?

[...]

#nav #a-home{
display:inline-block;

I can't see much reason for display: inline-block here, and it isn't
supported in Firefox.

[Ben C]

On 2007-02-09, David Housman <dh******@gmail.comwrote:

Hi,
Thanks for your help. Your advice has been helpful in helping me
understand what is going on. I"m not sure if my reply didn't get
through or was moderated, but I'll be more concise. and hope it was
teh former.

I don't think this NG is moderated, so it would have been the former.

I have text inside a span inside an anchor. While I set teh box
attributes of the span
.regular{
float:none !important;
background-color:blue !important;
padding:40px 40px 4px 10px !important;
margin:0px 0px 10px 0px !important;
height:25px !important;
}

the text is potitioned at the baseline of the anchor (orangish)
element, (http://www.discovertheuser.com/images/img1.gif) and I can't
figure out why.
Isn't the box around the text determined by the
attributes of the span? Why does the baseline of the text have any
bearing on the position of the span or teh text within the span?

The text sits on the baseline. Setting background colour on the inline
box is like painting some decoration around and behind the text. The
positioning is still determined by how the text sits on the line.

Another question: Should the #nav box stretch to contain its objects,
if its set to height:auto? In the picture, its float:left. If i make
it float:none, the height collapses, I can make it big enough with a
div clear element or by manually setting the height. I would have
thought that if on auto, a containing block would stretch to fit its
child objects? Why does float have an effect on this?

Basically because the rules say so. A float, absolutely positioned
element, inline-block, table-cell, or an element with 'overflow' other
than 'visible' establishes a new "block formatting context", which means
that it grows vertically to fit floats in. Normal boxes don't. If you
float #nav it starts a new block formatting context.

I think (in the absence of inline-block) you're better off making
everything a float. It is possible to use inline boxes and
vertical-align for this, but then it's hard to do the separators between
the boxes (the black vertical borders between "HOME", "ABOUT", etc.).

Here is an example, not perfect I'm sure but might give you some ideas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div#nav
{
border: 2px solid black;
height: 100px;
}
div#nav .label
{
float: left;
background-color: yellow;
border-right: 1px solid black;
border-left: 1px solid black;
}
div#nav span.label
{
text-transform: uppercase;
padding: 40px 40px 4px 10px;
height: 56px; /* 100 - 44 */
}
div#nav img.label
{
height: 100px;
}
</style>
</head>
<body>
<div id="nav">
<img class="label" src="foo.png">
<span class="label">Home</span>
<span class="label">About</span>
<span class="label">Portfolio</span>
</div>
</body>
</html>

[Bergamot]

Ben C wrote:

On 2007-02-09, David Housman <dh******@gmail.comwrote:

>Should the #nav box stretch to contain its objects,
if its set to height:auto? In the picture, its float:left. If i make
it float:none, the height collapses,

A float, absolutely positioned
element, inline-block, table-cell, or an element with 'overflow' other
than 'visible' establishes a new "block formatting context", which means
that it grows vertically to fit floats in. Normal boxes don't.

The difference here is block vs inline content. The height property
doesn't apply to non-replaced inline elements, which includes span.
Floated elements automatically become block.
http://www.w3.org/TR/CSS21/visudet.html#propdef-height
http://www.w3.org/TR/CSS21/visuren.html#float-position

<div id="nav">
<img class="label" src="foo.png">
<span class="label">Home</span>
<span class="label">About</span>
<span class="label">Portfolio</span>
</div>

See http://css.maxdesign.com.au/listamatic/

--
Berg