...

View Full Version : Weird table stretching in Dreamweaver MX



ella_tall
11-01-2006, 09:20 PM
Hi... be gentle with me, because last time I coded HTML it was the nineties and we all used frames.

I'm coding a site with Macromedia Dreamweaver MX, and have created a template for everything to follow. It's a four-row table structure, with the first two being nav bars and the third being editable.

Problem is, I'm having to be really careful editing slave pages because, at the drop of a hat, the whole table for that one page goes about a mile wide - without any conceivable change to the coding (esp. since only that one block of text is editable). If I then try to undo it, the bit of text I edited / dropped in will disappear, but the new, irritating formatting stays.

Dreamweaver has done this to me before, on different machines, with different sites and with different versions. Why is it doing this? How can I stop it?

Any advice much appreciated, especially if it's in moron-speak so I can understand it. Thanks.

VIPStephan
11-01-2006, 09:31 PM
OK, we might know more about HTML than you but we would still need your code to see what the problem really is. ;)
Go to the code view in DW and copy the HTML. Then press the small '#' button in the reply window here and post the code in between the
tags. Then we can help you. :)

ella_tall
11-01-2006, 09:41 PM
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Template</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body bgcolor="#FFFDB7" text="#000033" link="#000066" vlink="#000066" alink="#000066">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFDAA" bgcolor="#8AB0FF">
<tr>
<td height="67" align="left" valign="top"><a href="/default.htm" target="_self"><img src="/IMG/TopBar.png" width="600" height="70" border="0" /></a></td>
</tr>
<tr>
<td height="37" align="left" valign="top"><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><img src="/IMG/NavBar.png" width="600" height="50" border="0" usemap="#Map" /></font></td>
</tr>
<tr>
<td height="280" align="left" valign="top" nowrap="nowrap"><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif">
<!-- Begin editable region -->
<!-- TemplateBeginEditable name="Body" --><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- TemplateEndEditable --></font></td>
</tr>
<tr>
<td height="16" align="right" valign="bottom"><font color="#000066" size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="/contact.htm">Contact</a>
-&nbsp;<a href="/about.htm">About</a> - Designed by <a href="http://www.helenpurves.co.uk">HNEP</a>
2006</font></td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="1,1,51,23" href="/default.htm" target="_self" />
<area shape="rect" coords="53,0,118,23" href="/contact.htm" target="_self" />
<area shape="rect" coords="120,1,168,23" href="/links.htm" target="_self" />
<area shape="rect" coords="2,24,73,50" href="/research.htm" target="_self" />
<area shape="rect" coords="75,22,198,48" href="/mresearch.htm" target="_self" />
<area shape="rect" coords="201,23,278,48" href="/marketing.htm" target="_self" />
<area shape="rect" coords="279,24,360,47" href="/mailshots.htm" target="_self" />
<area shape="rect" coords="361,24,443,50" href="/databases.htm" target="_self" />
<area shape="rect" coords="448,23,585,58" href="/dprint.htm" target="_self" />
</map>
</body>
</html>


Ta da! My template code. No laughing.

<?austin ?>
11-01-2006, 11:02 PM
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Template</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body bgcolor="#FFFDB7" text="#000033" link="#000066" vlink="#000066" alink="#000066">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFDAA" bgcolor="#8AB0FF">
<tr>
<td height="67" align="left" valign="top"><a href="/default.htm" target="_self"><img src="/IMG/TopBar.png" width="600" height="70" border="0" /></a></td>
</tr>
<tr>
<td height="37" align="left" valign="top"><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><img src="/IMG/NavBar.png" width="600" height="50" border="0" usemap="#Map" /></font></td>
</tr>
<tr>
<td height="280" align="left" valign="top" nowrap="nowrap"><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif">
<!-- Begin editable region -->
<!-- TemplateBeginEditable name="Body" --><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- TemplateEndEditable --></font></td>
</tr>
<tr>
<td height="16" align="right" valign="bottom"><font color="#000066" size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="/contact.htm">Contact</a>
-&nbsp;<a href="/about.htm">About</a> - Designed by <a href="http://www.helenpurves.co.uk">HNEP</a>
2006</font></td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="1,1,51,23" href="/default.htm" target="_self" />
<area shape="rect" coords="53,0,118,23" href="/contact.htm" target="_self" />
<area shape="rect" coords="120,1,168,23" href="/links.htm" target="_self" />
<area shape="rect" coords="2,24,73,50" href="/research.htm" target="_self" />
<area shape="rect" coords="75,22,198,48" href="/mresearch.htm" target="_self" />
<area shape="rect" coords="201,23,278,48" href="/marketing.htm" target="_self" />
<area shape="rect" coords="279,24,360,47" href="/mailshots.htm" target="_self" />
<area shape="rect" coords="361,24,443,50" href="/databases.htm" target="_self" />
<area shape="rect" coords="448,23,585,58" href="/dprint.htm" target="_self" />
</map>
</body>
</html>


Ta da! My template code. No laughing.

wtf? why do you have it as xml? try removing that. lol and nice to see an oldschool coder! masta frame manipulata i presume? oh and get rid of the tables please. lol

VIPStephan
11-01-2006, 11:38 PM
wtf? why do you have it as xml? try removing that. lol and nice to see an oldschool coder! masta frame manipulata i presume? oh and get rid of the tables please. lol

Despite this being a pretty useless advice he's right. The xml declaration at the very top is making IE switch into quirks mode and rendering the page differently. Just remove that line so that the doctype tag is at the very top.

I must admit I have never worked with DW templates before and I can't reproduce the problem right away. When I'm inserting text (even in design mode) it just extends the page downwards as it should.

And again, despite austin's advice being pretty useless, yeah, using tables to lay out a page is very outdated but I think it's not the right time to give you a sermon about CSS and stuff. :)

I'm gonna try to figure out what's happening. Maybe in the meanwhile someone else can/will tell you what to do.

Later!

Ah, now I see! I didn't insert enough text to see it stretching. So the problem is that the text isn't producing a line break at the end of the page. Actually it's a pretty simple issue. Look for this attribute (in red):


<tr>
<td height="280" align="left" valign="top" nowrap="nowrap"><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif">
<!-- Begin editable region -->

That makes it extend to eternity. Remove that attribute and everything will be alright. :thumbsup:

OK, but now: You should really take some time and learn how to create CSS based websites as this makes styling and editing much easier. Plus avoiding tables and image maps makes them much more search engine and user friendly. ;)

ella_tall
11-02-2006, 08:39 AM
Aha. Thanks for that. Had I been paying more attention to the code, it's possible I may have spotted it. Or not.

This whole CSS thing, is it true it doesn't work on macs etc? I have played with it a little before (a few years back), and understand it a tiny bit, but I like the way tables are nicely formatted. Perhaps I shall mend my old-school ways. Anyway, who cares about macs? heh.

Frames... takes me back. Remember textured wallpaper background effects? Ha ha ha. Have just been asked to replace this: http://www.alfordmorrismen.org.uk/. :eek:

VIPStephan
11-02-2006, 02:44 PM
CSS has developed drastically since "a few years back". And it's not the computer/OS that is important but the browser you use. A few years back barely any browser was supporting CSS. Nowadays all of them can deal with it in some way, doesn't matter whether on Windows machines or Macs. Not all of them are on the same level of support but it might surprise you that actually IE 6 for Windows is the worst browser when it comes to CSS support. The other ones do a pretty good job and once you get familiar with purely semantic HTML and CSS based layouts you won't go back to the old fashioned table layouts.

A good source for beginners is http://htmldog.com. And a good source of inspiration is http://csszengarden.com. Good luck. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum