...

View Full Version : Website all distorted



OGGordon
10-31-2009, 09:46 PM
Check out my website:

http://derderder.cwsurf.de/

I don't know what I do wrong but if I open it up with firefox it looks all distorted. With chrome, the right side looks weird. IE is the same as chrome.

Here is the php file:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
</head>

<body>
<table width="770" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="147" bgcolor="782117">&nbsp;</td>
<td width="6" background="/images/bg1 left.png"><p>&nbsp;</p></td>
<td width="264" bgcolor="852519">&nbsp;</td>
<td width="6" background="/images/bg 1 right.png">&nbsp;</td>
<td width="148" bgcolor="782117">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#AA2C1D">&nbsp;</td>
<td background="/images/bg2 left.png"><p>&nbsp;</p>
<p>&nbsp;</p></td>
<td bgcolor="BF2F24">&nbsp;</td>
<td background="/images/bg 2 right.png">&nbsp;</td>
<td bgcolor="AA2C1D">&nbsp;</td>
</tr>
<tr>
<td bgcolor="E5E5E5">&nbsp;</td>
<td background="/images/bg 3 left.png"><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
<td><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
<td background="/images/bg 3 right.png">&nbsp;</td>
<td bgcolor="E5E5E5">&nbsp;</td>
</tr>
<tr>
<td bgcolor="B5B5B5">&nbsp;</td>
<td background="/images/bg 4 left.png">&nbsp;</td>
<td bgcolor="C5C5C5">&nbsp;</td>
<td background="/images/bg 4 right.png">&nbsp;</td>
<td bgcolor="B5B5B5">&nbsp;</td>
</tr>
</table>
</body>
</html>


Any help, greatly appreciated!

Excavator
10-31-2009, 09:50 PM
Hello OGGordon,
Since your just starting your site it might be a good time to ditch the tables.

See Why tables are bad for layout (http://phrogz.net/CSS/WhyTablesAreBadForLayout.html).

OGGordon
10-31-2009, 10:15 PM
hey excavator,
what do you suggest me using then? I watched a bunch of tutorials on youtube and they all seem to use tables. But I have previously encountered problems with using tables, just not sure what else to use.

Electricspace
10-31-2009, 10:15 PM
Hi OGGordon,

Some values of bgcolor don't start with a "#". Firefox skips that information since it's not valid. IE knows it's invalid code, but since it also knows you're intention, it displays the right color anyhow.

It could indeed be a good idea to learn how to use DIVs instead of tables since most websites are built in DIVs. And it would really help to put all your styling like background color and widths in an external CSS. I don't know how big your site will be, but if it's 10+ pages it will really help in the long run since CSS is all about styling a lot of pages at once.

Excavator
10-31-2009, 10:32 PM
hey excavator,
what do you suggest me using then? I watched a bunch of tutorials on youtube and they all seem to use tables. But I have previously encountered problems with using tables, just not sure what else to use.

I'm sorry, that was some pretty lame advice telling you not to use tables and not suggesting an alternative.
Divs positioned with floats and margins are the current best practice for building websites. Have a look at a site I just found - http://nunos.zi-yu.com/2008/03/divs-instead-of-tables/

I have lots of examples up at http://nopeople.com/design/CSS%20tips/index.html

And you're already at the best source for help on the internet. Lots of people here with a wide range of knowledge.

OGGordon
10-31-2009, 10:44 PM
I'm sorry, that was some pretty lame advice telling you not to use tables and not suggesting an alternative.
Divs positioned with floats and margins are the current best practice for building websites. Have a look at a site I just found - http://nunos.zi-yu.com/2008/03/divs-instead-of-tables/

I have lots of examples up at http://nopeople.com/design/CSS%20tips/index.html

And you're already at the best source for help on the internet. Lots of people here with a wide range of knowledge.

not lame at all :thumbsup:

thanks for the tips. I was just about to ask how to define all the positioning etc but the first link you posted already explains everything very well. thank you!

OGGordon
10-31-2009, 10:45 PM
Hi OGGordon,

Some values of bgcolor don't start with a "#". Firefox skips that information since it's not valid. IE knows it's invalid code, but since it also knows you're intention, it displays the right color anyhow.

It could indeed be a good idea to learn how to use DIVs instead of tables since most websites are built in DIVs. And it would really help to put all your styling like background color and widths in an external CSS. I don't know how big your site will be, but if it's 10+ pages it will really help in the long run since CSS is all about styling a lot of pages at once.

thanks for the advice. Reading about CSS on www.w3schools.com :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum