On 2007-02-09, David Housman <dhousman@gmail.comwrote:
Quote:
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.
Quote:
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.
Quote:
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>
