By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,494 Members | 1,957 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,494 IT Pros & Developers. It's quick & easy.

Problems with inheritance

P: n/a

Given the following style definitions,

#menu tr {
width: 100%
text-align: left;
}
#menu td {
text-align: left;
white-space: nowrap;
background-color: 4169E1; /* royalblue */
}
#menu a {
text-decoration: none;
color: white;
font-size: 10pt;
font-family: "Arial", "Helvetica", "MS Sans Serif", "sans-serif";
text-decoration: none;
font-weight: bold;
}
#menu {
color: white;
font-size: 10pt;
font-family: "Arial", "Helvetica", "MS Sans Serif", "sans-serif";
text-decoration: none;
font-weight: bold;
}

why doesn't the following table render the way I'd like? The table
cells are indeed blue, but the row does not extend all the way across
the screen, and the cells are center aligned. Thanks for any help.

<table id=\"menu\" border=\"0\" cellspacing=\"3\">
<tr colspan=\"5\">
<td>
<a href=\"/index.html\">Home</a>
|
<a href=\"/public/contactus.html\">Contact Us</a>
</td>
</tr>
</table>

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a

"Christopher Benson-Manica" <at***@nospam.cyberspace.org> wrote in message
news:c2**********@chessie.cirr.com...

Given the following style definitions,

#menu tr {
width: 100%
text-align: left;
}
#menu td {
text-align: left;
white-space: nowrap;
background-color: 4169E1; /* royalblue */
}
#menu a {
text-decoration: none;
color: white;
font-size: 10pt;
font-family: "Arial", "Helvetica", "MS Sans Serif", "sans-serif"; text-decoration: none;
font-weight: bold;
}
#menu {
color: white;
font-size: 10pt;
font-family: "Arial", "Helvetica", "MS Sans Serif", "sans-serif"; text-decoration: none;
font-weight: bold;
}

why doesn't the following table render the way I'd like? The table
cells are indeed blue, but the row does not extend all the way across
the screen, and the cells are center aligned. Thanks for any help.

<table id=\"menu\" border=\"0\" cellspacing=\"3\">
<tr colspan=\"5\">
<td>
<a href=\"/index.html\">Home</a>
|
<a href=\"/public/contactus.html\">Contact Us</a>
</td>
</tr>
</table>


I don't know how this works at all with all your backslashes. When I used
your code exactly as above, I get no background and underscored links..

Remove the backslashes. Then add

background-color: yellow;

to the properties for #menu, and you'll see how wide the table is--much less
than 100% of the width of the screen. Then observe that when you make the
width of a block 100%, it means 100% of the width of its containing block,
not of the screen. So setting width="100%" on a TR means that the TR will
take up 100% of the width of the table. But that's beside the point, because
by definition a row must be as wide as the table (taking all the padding and
margins and borders into account)!

So if you want the *table* to take up the full width of the screen, you need
to say so in your styles.

Jul 20 '05 #2

P: n/a
Harlan Messinger <h.*********@comcast.net> spoke thus:
I don't know how this works at all with all your backslashes. When I used
your code exactly as above, I get no background and underscored links..
Ah, my mistake. It was cut and pasted from the CGI source, and I
forgot to remove the (accursed!) backslashes. Sorry.
So if you want the *table* to take up the full width of the screen, you need
to say so in your styles.


Whoops - I feel suitably chastened by my foolishness. Thanks for
pointing out what should have been obvious.

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.