Problem with CSS 'width' property
Posted: Wed Sep 14, 2005 9:53 am
I've got a three line layout. I'm trying to reduce the width of the middle line TD, and place another TD beside it as a sidebar.
In theory, I should be able to just reduce the 'width: 600px;' to 'width: 400px;'. Unfortunately... this has no effect whatsoever. Here's my CSS and XHTML (ish... not cleaned it properly yet). I know the design is a Bad Thing - table abuse etc, but hey.
It's not even done.
(Sorry for the formatting of the CSS... At some point, some program has decided to change it for me
)
--
blogstyle.css
--
index.html
If you copy and paste these into two files you'll see what I mean - the 'sidebar' style thing over at the right should be indented, in line with the rest of the content. 
Any ideas? (I've doubtless done something wrong... this is my first time even attempting anything remotely interesting with handwritten XHTML and CSS.
In theory, I should be able to just reduce the 'width: 600px;' to 'width: 400px;'. Unfortunately... this has no effect whatsoever. Here's my CSS and XHTML (ish... not cleaned it properly yet). I know the design is a Bad Thing - table abuse etc, but hey.
--
blogstyle.css
Code: Select all
BODY
{
FONT-SIZE: 10pt;
COLOR: #999988;
FONT-FAMILY: tahoma,arial,sans-serif;
BACKGROUND-COLOR: #222233;
TEXT-ALIGN: justify;
}
H1
{
FONT-SIZE: 13pt;
WORD-SPACING: 0pt;
FONT-FAMILY: helvetica,tahoma,arial,sans-serif;
LETTER-SPACING: 0pt;
}
H1.header
{
FONT-SIZE: 10pt;
FONT-FAMILY: tahoma,helvetica,tahoma,arial,sans-serif;
LETTER-SPACING: 0pt;
COLOR: #AAAA99;
PADDING-TOP: 15px;
PADDING-LEFT: 5px;
}
A
{
COLOR: #999988;
FONT-FAMILY: tahoma,arial,san-serif;
}
TABLE.header
{
PADDING-RIGHT: 0%;
PADDING-LEFT: 0%;
PADDING-BOTTOM: 0%;
BORDER-TOP-STYLE: none;
PADDING-TOP: 0%;
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
BORDER-BOTTOM-STYLE: none;
}
TD.header
{
BORDER-RIGHT: #333333 2px solid;
PADDING-RIGHT: 0%;
BORDER-TOP: #333333 7px solid;
PADDING-LEFT: 0%;
BACKGROUND-ATTACHMENT: fixed;
BACKGROUND-IMAGE: url(http://www.freespaces.com/angusl/Banner.jpg);
PADDING-BOTTOM: 0%;
VERTICAL-ALIGN: top;
BORDER-LEFT: #333333 2px solid;
WIDTH: 400px;
PADDING-TOP: 0%;
BORDER-BOTTOM: #333333 1px solid;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 150px;
max-width: 400px;
max-height: 150px;
}
TD.main
{
BORDER-RIGHT: #333333 2px solid;
PADDING-RIGHT: 0%;
BORDER-TOP: #333333 1px solid;
PADDING-LEFT: 0%;
PADDING-BOTTOM: 0%;
OVERFLOW: hidden;
BORDER-LEFT: #333333 2px solid;
WIDTH: 400px;
PADDING-TOP: 0%;
BORDER-BOTTOM: #333333 1px solid;
BACKGROUND-COLOR: #111111;
max-width: 400px;
}
TD.sidebar
{
BORDER-RIGHT: #333333 2px solid;
PADDING-RIGHT: 0%;
BORDER-TOP: #333333 1px solid;
PADDING-LEFT: 0%;
PADDING-BOTTOM: 0%;
OVERFLOW: hidden;
BORDER-LEFT: #333333 2px solid;
WIDTH: 200px;
PADDING-TOP: 0%;
BORDER-BOTTOM: #333333 1px solid;
BACKGROUND-COLOR: #111111;
max-width: 200px;
}
TD.footer
{
BORDER-RIGHT: #333333 2px solid;
PADDING-RIGHT: 0%;
BORDER-TOP: #333333 1px solid;
PADDING-LEFT: 0%;
BACKGROUND-ATTACHMENT: fixed;
BACKGROUND-IMAGE: url(http://www.freespaces.com/angusl/Footer.jpg);
PADDING-BOTTOM: 0%;
VERTICAL-ALIGN: top;
BORDER-LEFT: #333333 2px solid;
WIDTH: 600px;
PADDING-TOP: 0%;
BORDER-BOTTOM: #333333 7px solid;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 50px;
max-width: 600px;
max-height: 50px;
}
IMG.link
{
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
BORDER-LEFT: 0px;
BORDER-BOTTOM: 0px;
}index.html
Code: Select all
<!DOCTYPE html PUBLIC="-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><$BlogPageTitle$> :: Angus Lepper's Blog</title>
<$BlogMetaData$>
<!-- http://www.freespaces.com/angusl/blogstyle.css -->
<link rel="stylesheet" type="text/css" href="blogstyle.css" />
</head>
<body>
<table class="header" align="center">
<tr>
<td class="header">
<h1 class="header">Home</h1>
</td>
</tr>
<tr>
<td class="main">
<!-- BLOG CONTENT GOES HERE -->
<h1>Hello World!</h1>
</td>
<td class="sidebar">
<!-- Blog Description -->
<p><$BlogDescription$></p>
<!-- Mini-profile -->
<$BlogMemberProfile$>
<br />
<b>Previously:</b>
<p>
<!-- Permalinks to recent previous posts -->
<BloggerPreviousItems>
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a><br />
</BloggerPreviousItems>
</p>
<MainOrArchivePage>
<b>Archives</b>
<p>
<!-- Links to archived posts -->
<BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a><br />
</BloggerArchives>
</p>
</MainOrArchivePage>
<p>
<!-- 'I power Blogger' tag image -->
<a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger [link to Blogger main]" class="link" /></a>
</p>
</td>
</tr>
<tr>
<td class="footer">
<!-- Quote will go here - aligned over image -->
</td>
</tr>
</table>
</body>
</html>Any ideas? (I've doubtless done something wrong... this is my first time even attempting anything remotely interesting with handwritten XHTML and CSS.