div with nested links has no height?

[Kyle James Matthews]

Hello all,

I am nesting a set of links within a div with a background color and a
width of 100%. Opera 7.5 and IE 6.0 display the design I am attempting
to achieve, no doubt quite incorrectly. FireFox and Netscape assume
that the div has a height of 0. How can I get the div to stretch to the
height of the text without setting that height manually?

Example page if needed: http://www.digitalovertone.com/new/index2.php.

Many thanks,

Kyle

 

[Disco Octopus]

Hello all,

I am nesting.....

That is great news.

 

[Toby A Inkster]

Example page if needed: http://www.digitalovertone.com/new/index2.php.

Not tested, but after this bit:

<a href="pro.php">Professional</a>

Try adding:

<br style="clear:right;">

 

[Steve Pugh]

I am nesting a set of links within a div with a background color and a
width of 100%. Opera 7.5 and IE 6.0 display the design I am attempting
to achieve, no doubt quite incorrectly. FireFox and Netscape assume
that the div has a height of 0. How can I get the div to stretch to the
height of the text without setting that height manually?

Example page if needed: http://www.digitalovertone.com/new/index2.php.

#navbar a {
display:block;
float:right;
}

As the links are floated they are taken outside of the context of
their parent. Hence their parent has no content and thus has no
height.

You need to include an element with clear: right; after the last of
the links but before the end of the parent element.

Steve

 

[rf]

#navbar a {
display:block;
float:right;
}

As the links are floated they are taken outside of the context of
their parent. Hence their parent has no content and thus has no
height.

You need to include an element with clear: right; after the last of
the links but before the end of the parent element.

Or even better, firmly keeping the KISS principle in mind:

Remove float: right;
Then of course - remove display: block:
Then, to put it all back together, suggest text-align: right for the parent
div.

The more CSS (and to a certain extent HTML) you throw at browsers the more
likelihood one of them will barf.

Hmmm... just glanced at the rest of the CSS file. Veritable overkill. Kyle:
Rewrite it from the ground up, considering very carefully each thing you put
in there.

Cheers
Richard.

 

[Kyle James Matthews]

The more CSS (and to a certain extent HTML) you throw at browsers the more
likelihood one of them will barf.

Actually, I'm going for projectile vomiting. Do you think I have a shot?

Hmmm... just glanced at the rest of the CSS file. Veritable overkill. Kyle:
Rewrite it from the ground up, considering very carefully each thing you put
in there.

Thank you for that advice, but I have a follow-up question. When you
refer to my CSS as "veritable overkill," are you suggesting that the
design I am trying to achieve is too complicated and I should simplify,
or that the CSS I am using to achieve my design is too complicated and
can be achieved more concisely? If it is the former, I am content to
have a complicated and potentially barf-inducing CSS, as my intent for
now is to learn what I can do and how I can do it. If it is the latter,
can you please be more specific? I am always hoping to learn from the
people in this group.

The only caveat is that the background images have to stay in the CSS.
I would like to be able to design multiple styles without having to
change my HTML markup. Perhaps that is why the CSS is a little bloated?

Thanks,

Kyle

 

[Kyle James Matthews]

As the links are floated they are taken outside of the context of
their parent. Hence their parent has no content and thus has no
height.

You need to include an element with clear: right; after the last of
the links but before the end of the parent element.

Of course. Thank you. This worked perfectly.

 

[rf]

Actually, I'm going for projectile vomiting. Do you think I have a shot?


Thank you for that advice, but I have a follow-up question. When you
refer to my CSS as "veritable overkill," are you suggesting that the
design I am trying to achieve is too complicated and I should simplify,
or that the CSS I am using to achieve my design is too complicated and
can be achieved more concisely?

The latter. The design *is* too complicated for what it does but that is how
you wrote it so that's OK. My problem is with the CSS.

You seem to be using a seperate CSS rule to describe each element on the
page. This is reinforced by the fact that you select based on id, not class
(*). This makes it tricky to change one single CSS rule and have the entire
page or site change.

You compound this by having a body.index rule, replicating most of what is
in the body rule anyway. Do you intend to have your index.html with <body
class="index"> and your arts.html with <body class="arts">? Confusing and
needless replication.

CSS is meant to describe the whole site, not each individual page or each
individual bit of a page. That is, change one single rule and your entire
site changes from dark purple to shocking pink.

(*) It is better to use class as then you can have several elements on the
page with the same class.

Keep inheritance in mind. For example, only specify font once, in the body
rule and let it inherit down to the child elements. Don't replicate it all
over the place, this just makes it harder to change.

Don't have rules like .hidden, .center, .left etc. You end up with (in your
HTML) something like
<div class="center">
which is exactly the same as
<div style="text-align: center">
A style rule should not describe just a single property. It should describe
the entire visual appearance of the element it selects.

Hmmm. A bit rambly How to end...

Don't write your HTML in anticipation of how it will look on the page. HTML
is for content. Get that content in there first. Things like your header
block, your navigation block, your content block.

Only once that is done think about how each block should look and create a
CSS rule, selecting that block, that describes how it should look.

Conversly, don't write the CSS rules in anticipation of what the content
will be (your .center rules). You might just as well include all the CSS in
a style attribute.

Finally, KISS principle. If you can remove something without affecting the
look of the page then do so.

Cheers
Richard.