Design looks different in browser??

evil-monkey · 23-02-2009 5:02pm #1

Hi all. Dabbling in a bit of very basic web design and have encountered a problem.

The design I have in Dreamweaver does not appear the same when looked at in any browser. All of the tables are out of place. Here is the code;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table width="200" height="612" border="0" align="center">
<tr>
<td height="142"><img src="header.png" width="750" height="140" /></td>
</tr>
<tr>
<td height="27"><table width="200" border="0" align="center">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

In Dreamweaver, the A B C D E (intended to be place for buttons when done) are directly under the banner image. Yet, when viewed in a browser, there is a huge empty gap between the two. Any ideas??

Thanks in advance

Pixelcraft · 23-02-2009 5:08pm

for starters you're trying to fit an image with width of 750 into a table with a width of 200. Also, tables are bad for this! Learn CSS, as learning this way will be of no real benefit.

Goodshape · 23-02-2009 5:09pm

You shouldn't really be using tables for this sort of layout but..

try specifying the cellspacing and/or cellpadding on the table tag.

<table width="200" height="612" border="0" align="center" cellspacing="0" cellpadding="0">

DonkeyStyle \o/ · 23-02-2009 6:56pm

Remove the height attribute from the outer table, then if you need to you can add a height attribute here

<td> </td>

evil-monkey · 23-02-2009 9:11pm

Goodshape wrote: »

You shouldn't really be using tables for this sort of layout but..

try specifying the cellspacing and/or cellpadding on the table tag.

<table width="200" height="612" border="0" align="center" cellspacing="0" cellpadding="0">

I shouldn't?? Cool. Any suggestions on what I should use??

Pixelcraft · 23-02-2009 9:14pm

CSS as I mentioned above.

Goodshape · 23-02-2009 9:26pm

Yup, CSS - cascading style sheets.

It allows you to keep your HTML tidy and your style separated for easy maintenance and use across multiple pages.

The HTML (minus CSS/style) for something like this should be similar to the following, with all style related information such as height, width, padding, spacing, colour, etc. going into a separate "style sheet".

<body>
    
    <div id="pageWrap">
        <div id="header">
            <img src="header.png" alt="Name of my website" />    
            <ul id="menuButtons">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">D</a></li>
                <li><a href="#">E</a></li>
            </ul>
        </div>
        
        <div id="content">
            Hello.
        </div>
    </div>
    
</body>

That on it's own will look very plain but with added CSS the possibilities are vast.

pauldiv · 24-02-2009 3:42am

Yes much better to learn css. Tables were used for layout in the first few years of web design and desingers use css now mostly. Tables can make your pages heavy too and it is a nighmare to inspect the code looking for faults like you are describing.

Design looks different in browser??

Comments