html/span/css navbar hell

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View


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.
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

The css:
   #nav {
       background:#7A95FF url(nav_bg.jpg) 0 0 repeat-x;
       border:1px solid #000000;
       border-width:1px 1px 2px 1px;

   #nav li{

       #nav a:link,
   #nav a:visited{
    padding:40px 40px 4px 10px;
 border-right:1px solid #42432d;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;


   #nav #a-home{

   #nav img{
   margin:0px !important;

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

Re: html/span/css navbar hell

Quoted text here. Click to load it

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

Quoted text here. Click to load it

.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.

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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

Re: html/span/css navbar hell

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
    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, ( 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?


\ ApparWhy does the position of the text matter from the perspective
of the enclosing anch
Quoted text here. Click to load it

Re: html/span/css navbar hell

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

Thanks again,
Quoted text here. Click to load it

Re: html/span/css navbar hell

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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.

Quoted text here. Click to load it

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.

" ">
        <title>Test Page</title>
        <style type="text/css">
                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;
        <div id="nav">
            <img class="label" src="foo.png">
            <span class="label">Home</span>
            <span class="label">About</span>
            <span class="label">Portfolio</span>

Re: html/span/css navbar hell

Ben C wrote:
Quoted text here. Click to load it

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.

Quoted text here. Click to load it

See /


Site Timeline