Content stretching my layout a little bit

design

#1

So I wanted to code this new layout I made, but I decided to use tables for various reasons. I know Im not the best at tables so please bear with me. Ive tried to add the content and once I did, it messed up my layout.
You can see this here : http://www.mischievous-designs.net

I think the problem is with the width of the contents.
Anyways, this is my index.html

[code]

M I S C H I E V O U S X 3
	<td valign="top" style="background: url(images/index_06.gif) no-repeat;"> 

Navigation

Link here
Link here
Link here
Link here


Link here
Link here
Link here
Link here


Link here
Link here
Link here
Link here

	<td>
		<img src="images/index_07.gif" width="12" height="590" alt=""></td>
	
		<td valign="top" width=494 style="background: url(images/index_08.gif) no-repeat;"> 

Testing

testing testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testing testing testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testing testing testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testing testing testing testingtesting testing testingtesting testing testingtesting testing testing
testing testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testing

testing testing testingtesting testing testingtesting testing testingtesting testing testing

testing testing testingtesting testing testingtesting testing testingtesting testing testing testing testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testing testing testing testingtesting testing testingtesting testing testingtesting testing testing

	<td>
		<img src="images/index_09.gif" width="10" height="590" alt=""></td>
	
		<td valign="top" width="194" style="background: url(images/index_10.gif) no-repeat;"> 

Navigation

Link here

Link here

Link here

Link here





Link here

Link here

Link here

Link here





Link here

Link here

Link here

Link here


	<td>
		<img src="images/index_11.gif" width="247" height="590" alt=""></td>
</tr>
<tr>
	<td colspan="7">
		<img src="images/index_12.jpg" width="1400" height="309" alt=""></td>
</tr>
[/code]

And this is my style.css

[code]BODY {
background-color: #82166f;
background-image: url(‘image/bg.gif’);
background-repeat: repeat-y;
color: #FFFFFF;
font-family: Verdana;
font-size: 10pt;
margin : 0px ;
letter-spacing: 1pt; }

b { color: #ffffff;
font-family: Verdana;
font-size: 10pt;
letter-spacing: 1pt; }

i { color: #ffffff;
font-family: Verdana;
font-size: 10pt;
letter-spacing: 1pt; }

a { color: #ffffff;
font-weight: normal;
text-decoration: none;
letter-spacing: 1pt; }

a:hover { color: #FFFFFF;
font-weight: bold;
text-decoration: none;
letter-spacing: 1pt; }

td { color: #FFFFFF;
font-family: Verdana;
font-size: 11px;
letter-spacing: 1pt; }

#nav1
{ width: 190px;
color: #FFFFFF;
font-family: Verdana;
font-size: 11px;
letter-spacing: 1pt;}

#nav2
{ width: 190px;
color: #FFFFFF;
font-family: Verdana;
font-size: 11px;
letter-spacing: 1pt;}

#content
{width: 494px;
color: #FFFFFF;
font-family: Verdana;
font-size: 11px;
letter-spacing: 1pt;
}[/code]

Thanks for your help guys, I really appreciate it.


#2

You should not use tables for page layout. It’s bad practice.

Also, you have no !doctype declaration, which is also bad practice and causes browsers to render your pages in quirks mode.


#3

i know tables are difficult to code but i have my own reasons for prefering it for that layout. im getting closer to just remaking that layout as a div…


#4

It looks as though you have some of the widths of the “main” columns wrong. For instance, #nav1 looks like it should have a width of 194px, not 190.

kjodle’s advise is sound, though. Table-based layouts like this one are really fragile and hard to work with — anything in the the page that causes the content to change sizes (e.g, a large image or a long unbreakable word), or even just an errant margin, will turn it into a total mess. If you’re already planning to rework this design, now’s the time.


#5

I know they very hard to work with but I have my own reasons for using it :slight_smile: Thanks for your help


#6

Hello everyone. The problem is slight but it can still seen which bothers me a lot. It seems like my content or navigation is stretching the image…and it only happens when I stretch the page vertically, when I keep it short, it’s gone. The first time I saw it was when I added my updates through cutenews.

The problem can be seen at the top and bottom…I’ve adjusted the widths in my css as well as the paddings, and problem still persists.

You can see the problem here: mischievous-designs.net
This is my index

[code]

M I S C H I E V O U S X 3
		<td valign="top" id="nav1">
		<div id="nav3">
		<h1>Site</h1>
		<img src="images/square.jpg"><a href="index.php"> Home</a><br>
		<img src="images/square.jpg"><a href="about.php"> About</a><br>
		<img src="images/square.jpg"><a href="#"> Terms of Usage</a><br>
		<img src="images/square.jpg"><a href="#"> Contact</a><br>
		<img src="images/square.jpg"><a href="#"> Link In/Out</a><br>
		<br><br>
		<h1>Affiliates</h1>
		<img src="images/square.jpg"><a href="#"> Affiliate #1</a><br>
		<img src="images/square.jpg"><a href="#"> Affiliate #2</a><br>
		<img src="images/square.jpg"><a href="#"> Affiliate #3</a><br>
		<img src="images/square.jpg"><a href="#"> Affiliate #4</a><br>
		<img src="images/square.jpg"><a href="#"> Affiliate #5</a><br>
		<img src="images/square.jpg"><a href="#"> Apply? [FULL]</a><br>
		<br><br>
		<h1>Misc</h1>
		<img src="images/square.jpg"><a href="#"> Extra</a><br>
		<img src="images/square.jpg"><a href="#"> Extra</a><br>
		<img src="images/square.jpg"><a href="#"> Extra</a><br>
		<img src="images/square.jpg"><a href="#"> Extra</a><br>
		<br><br>
		</div>
		
	
	</td>


	<td>
		<img src="images/index_07.gif" width="12" height="590" alt=""></td>[/code]

I have my header and footer included through PHP and here they are:
header.php:

[code]

M I S C H I E V O U S X 3
		<td valign="top" id="nav1">
		<div id="nav3">
		<h1>Site</h1>
		<img src="images/square.jpg"><a href="index.php"> Home</a><br>
		<img src="images/square.jpg"><a href="about.php"> About</a><br>
		<img src="images/square.jpg"><a href="#"> Terms of Usage</a><br>
		<img src="images/square.jpg"><a href="#"> Contact</a><br>
		<img src="images/square.jpg"><a href="#"> Link In/Out</a><br>
		<br><br>
		<h1>Affiliates</h1>
		<img src="images/square.jpg"><a href="#"> Affiliate #1</a><br>
		<img src="images/square.jpg"><a href="#"> Affiliate #2</a><br>
		<img src="images/square.jpg"><a href="#"> Affiliate #3</a><br>
		<img src="images/square.jpg"><a href="#"> Affiliate #4</a><br>
		<img src="images/square.jpg"><a href="#"> Affiliate #5</a><br>
		<img src="images/square.jpg"><a href="#"> Apply? [FULL]</a><br>
		<br><br>
		<h1>Misc</h1>
		<img src="images/square.jpg"><a href="#"> Extra</a><br>
		<img src="images/square.jpg"><a href="#"> Extra</a><br>
		<img src="images/square.jpg"><a href="#"> Extra</a><br>
		<img src="images/square.jpg"><a href="#"> Extra</a><br>
		<br><br>
		</div>
		
	
	</td>


	<td>
		<img src="images/index_07.gif" width="12" height="590" alt=""></td>[/code]

my footer:

[code]

		<td valign="top" id="nav2">
		<div id="nav4">
		<h1>Graphics</h1>
		<img src="images/square.jpg"><a href="#"> Avatars</a><br>
		<img src="images/square.jpg"><a href="#"> Banners</a><br>
		<img src="images/square.jpg"><a href="#"> Buttons</a><br>
		<img src="images/square.jpg"><a href="#"> Extras</a><br>
		<br><br>
		<h1>Designs</h1>
		<img src="images/square.jpg"><a href="#"> Div Layouts</a><br>
		<img src="images/square.jpg"><a href="#"> Table Layouts</a><br>
		<img src="images/square.jpg"><a href="#"> Iframe Layouts</a><br>
		<img src="images/square.jpg"><a href="#"> Pop-Up Layouts</a><br>
		<br><br>
		<h1>Shop</h1>
		<img src="images/square.jpg"><a href="#"> Avatars</a><br>
		<img src="images/square.jpg"><a href="#"> Banners</a><br>
		<img src="images/square.jpg"><a href="#"> Buttons</a><br>
		<img src="images/square.jpg"><a href="#"> Layouts</a><br>
		
		</div>
	


	<td>
		<img src="images/index_11.gif" width="247" height="590" alt=""></td>
</tr>
<tr>
	<td colspan="7">
		<img src="images/index_12.jpg" width="1400" height="309" alt=""></td>
</tr>
[/code]

and lastly, my style.css

[code]
BODY {
background-color: #82166f;
background-image: url(‘image/bg.gif’);
background-repeat: repeat-y;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
margin : 0px ;
letter-spacing: 1pt; }

b { color: #ffffff;
font-family: Verdana;
font-size: 10pt;
letter-spacing: 1pt; }

i { color: #ffffff;
font-family: Verdana;
font-size: 10pt;
letter-spacing: 1pt; }

a { color: #ffffff;
font-weight: normal;
text-decoration: none;
letter-spacing: 1pt;
padding: 3px; }

a:hover {
color:#ffffff;
text-shadow:#fff 0px 0px 10px, #fff 0px 0px 10px;}

td { color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
letter-spacing: 1pt; }

#nav1
{background-image: url(‘images/index_06.gif’);
background-repeat:repeat-y;
width:194px;}

#nav3 {
color: #FFFFFF;
font-family: Verdana;
font-size: 11px;
letter-spacing: 1pt;
padding:5px;}

#nav2
{background-image: url(‘images/index_10.gif’);
background-repeat:repeat-y;
width:186px;}

#nav4
{color: #FFFFFF;
font-family: Verdana;
font-size: 11px;
letter-spacing: 1pt;
width: 180px;
margin-left:3px;}

h1
{border-bottom: 3px double #FFFFFF;
Font-style: Verdana;
text-align:center;
font-size:15px;
text-transform:uppercase;
text-shadow:#fff 0px 0px 30px, #fff 0px 0px 30px;
}

h2
{background-image: url(‘images/header.jpg’);
background-repeat:no-repeat;
width: 493px;
height:25px;
Font-style: Verdana black;
font-color: #000000;
text-align:center;
font-size:15px;
text-transform:uppercase;
margin-left: -2px;
margin-top:10px;
}

#content
{background-image:url(‘images/index_08.gif’);
background-repeat:repeat-y;
width:493px;}

#content1
{color: #FFFFFF;
font-family: Verdana;
font-size: 11px;
letter-spacing: 2pt;
line-height: 15px;
width: 485px;
padding-left: 3px;
}[/code]

I hope I didn’t stretch the page too much but I would like to provide the codes Im using. Any help would be appreciated, thank you.


#7

No need to keep reposting your code; we can see your html and css just fine.

That may be, but the reasons for NOT using tables for page layouts are precisely because of the types of problems you are having. Tables are for tabular data, not page layout. If you insist on using tables for page layout, you are going to run into this issue repeatedly (i.e., almost any time you add/edit/delete content).

No, they are not when they are used properly; i.e., for tabular data. As modern web browsers have evolved, they have become less adept for page layout. Most browsers do not handle them well for page layout no matter how you code them, and they are almost impossible to make responsive.

Still no !doctype declaration, which is going to cause your page to look different in different browsers.