PDA

View Full Version : Borders don't extend as tables get bigger



AtotheL
Nov 25th, 2004, 04:48 PM
Help. Totally new to all the best stuff in css (I had just used it before on my old site design to change text color, size, links etc).

I'm trying to incorporate it more on my site redesign and am running into some trouble with the borders of my site using css to call them in. (I'm using Dreamweaver to build with btw).

The problem is best explained by looking at these two site links (a before and after if you will

http://www.altrap.net/ALTRAPDOTNET/realindex.html

http://www.altrap.net/ALTRAPDOTNET/borderprobs.html

Here's the code...

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="dotnet.css" type="text/css">
</head>

<body bgcolor="#000000" text="#FFFFFF">

<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" colspan="3" height="124">
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width=800 valign="top"><img src="altrapgraphics/realtitle.jpg" width="800" height="124"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="142" height="500" valign="top">
<table width="142" border="0" cellpadding="0" cellspacing="0" class="menupixel">
<tr>
<td valign="top" width="142">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="500" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="500" valign="top" align="center"><img src="altrapgraphics/realmenu.jpg" width="140" height="500"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="528" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="tile">
<tr>
<td width="109" height="281"></td>
<td width="321"></td>
<td width="98"></td>
</tr>
<tr>
<td height="151"></td>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr>
<td width="321" height="151" valign="top">Content box... no problems
yet...</td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td height="66"></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td width="130" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="rightpixel">
<tr>
<td width="130" height="500" valign="top">
<table width="130" border="0" cellpadding="0" cellspacing="0" class="rightbackground">
<tr>
<td width="130" height="500"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height="108" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="70" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="menupixel">
<tr>
<td width="142" height="70"></td>
</tr>
</table>
</td>
<td width="528" valign="top">
<table width="528" border="0" cellpadding="0" cellspacing="0" class="tile">
<tr>
<td width="30"></td>
<td width="478" valign="top">
<table width="478" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="478" height="70" valign="middle" align="center" class="box"><img src="altrapgraphics/mobileunderground.gif" width="468" height="60"></td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</td>
<td width="130" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="rightpixel">
<tr>
<td width="130" height="70"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="28" colspan="3" valign="top"><img src="altrapgraphics/realfooter.jpg" width="800" height="28"></td>
</tr>
<tr>
<td height="53"></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="18"></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>


Please be gentle with me if I'm missing something blindingly obvious - I'm fresh to this stuff!

Thanks in advance.

A to the L

ronaldb66
Nov 26th, 2004, 01:11 PM
What strikes me first is the overwhelming abundance of tables; for the sake of argument I copied and pasted your code in a local document and it took me quite some time to figure out which of those many tables actually held the borders you mentioned.

I suggest looking into the CSS border (http://www.w3.org/TR/2004/CR-CSS21-20040225/box.html#border-properties) properties and the CSS box model (http://www.w3.org/TR/2004/CR-CSS21-20040225/box.html) in general (conveniently found in the same chapter); hopefully, you'll discover easier, leaner ways of including basic one-pixel borders than images and better, less code-heavy ways of spacing things out than hurdles of empty table cells, and tables for that matter.

Your "gaps", by the way, seem to be caused by the respective tables, or actually the surrounding table cell, being set at a specific height. I guess you did this because you wanted every page to have a certain minimum height; I'd like to advice against this and let the content determine the necessary height.

ronaldb66
Nov 26th, 2004, 02:31 PM
Okay, I couldn't help myself: here's an alternative layout with less tables (one, in fact). It's a transitional layout using one three column, two row layout table with as little garbage and as much CSS styling as possible:

<!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>Layout test</title>

<style type="text/css">

html {
font-family: verdana, helvetica, sans-serif;
font-size: 89%;
}

body {
font-size: 1em;
color: white;
background-color: black;
text-align: center;
}

#wrapper {
text-align: left;
width: 750px;
margin: 0 auto;
}

#masthead {
width: auto;
padding: 0 4em;
height: 4em;
text-align: center;
border-bottom: 2px solid white;
}

#lay {
width: 100%;
}

td {
vertical-align: top;
}

#menu {
width: 120px;
border-left: 1px solid white;
border-right: 1px solid white;
padding: 0.5em;
background-color: #00c;
}

#menu ul {
padding: 0;
margin: 0;
list-style-stype: none;
}

#cntxt {
width: 120px;
border-left: 1px solid white;
border-right: 1px solid white;
padding: 0.5em;
background-color: #00c;
}

#maincont {
margin: 2em;
padding: 1em;
border: 1em;
border: 1px solid #ccc;
}

#menufoot, #cntxtfoot {
border-left: 1px solid #fcc;
border-bottom: 1px solid #fcc;
border-right: 1px solid #fcc;
}

#mainfoot {
text-align: center;
border: 1px solid #cfc;
}

</style>
</head>

<body>

<div id="wrapper">

<div id="masthead">
masthead goes here...
</div>

<table id="lay" cellspacing="0" cellpadding="0">
<tr>
<td id="menu">
<ul>
<li>Menu</li>
<li>goes</li>
<li>here.</li>
</ul>
</td>
<td id="main">
<div id="maincont">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam id erat sed urna hendrerit

vestibulum. Quisque enim velit, viverra at, ultrices non, auctor ac, wisi. Aliquam in lectus vel

elit molestie porttitor. Aliquam volutpat vestibulum ante. Maecenas placerat laoreet erat. Cras

molestie neque a magna. Morbi accumsan ante. Morbi ligula erat, mollis ac, pellentesque id,

viverra sed, ante. Vivamus eros mauris, dictum et, pharetra id, tristique non, nunc. Curabitur

porttitor dui ultrices arcu. In ultricies mattis lorem. Etiam ullamcorper mauris sed tellus.
</p>
<p>
Ut pharetra neque at risus. Nulla nec augue. Curabitur et diam. Aenean mollis interdum nunc. Nam

egestas quam quis urna. Nulla tempor est nec risus. Curabitur laoreet libero sit amet est. Duis

sit amet erat. Integer gravida, wisi id elementum placerat, lorem nulla aliquet dolor, adipiscing

ornare mauris eros at nisl. Praesent volutpat neque a mi. Nam luctus neque non massa. Nullam

augue enim, dapibus auctor, placerat sed, laoreet vitae, diam. Donec neque eros, tincidunt eget,

vestibulum id, commodo id, turpis.
</p>
</div>
</td>
<td id="cntxt">
<p>Yeah, what's this for, anyway?</p>
</td>
</tr>
<tr>
<td id="menufoot">&nbsp;
</td>
<td id="mainfoot">Guess some stuff goes here, too.
</td>
<td id="cntxtfoot">&nbsp;
</td>
</tr>
</table>

</div>

</body>

</html>

I didn't validate so ther may be some boo-boos in there, but at least it's a lot more compact. I left the styles internal for easy editing, but replicating these in DW shouldn't be too hard; I liberally sprinkled ids around to offer unique "hooks" for the various styles.
The bottom left and right corners are done with borders, but if you want bevelled corners you need to get creative with background images; same goes for the other imagery and backgrounds.

If you got any more questions, do reply.