Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

Receive Fast Advice
Learn Programming Languages

Get Professional Website Reviews
Quick Troubleshooting Assistance

The Web Squeeze > Designing Your Website > HTML/XHTML

Dreamweaver: Why Are My Table Componants Spacing Out?

This is a discussion on Dreamweaver: Why Are My Table Componants Spacing Out?, within the HTML/XHTML section. This forum and the thread "Dreamweaver: Why Are My Table Componants Spacing Out?" are both part of the Designing Your Website category.

Reply to this topic

Start new topic

Dreamweaver: Why Are My Table Componants Spacing Out?, HTML, CSS, DW CS

Inkers View Member Profile	Mar 18 2008, 08:06 AM Post #1
Fresh Squeezed Group: Members Posts: 17 Joined: 14-February 08 From: Somerset, UK Member No.: 62	I'm updating a site for a client using tables and .gifs (I know, I know, but it needs to be that way) but for some reason, the content is spreading itself out and I can't for the life of me figure out why. Does anyone have any thoughts? I'm thinking a second pair of eyes might see what I'm missing. Screenshot: Code: CODE <div id="container"> <table width="790px" border="0"> <tr> <td colspan="2"><img src="images/page_top_spacer.gif" width="769" height="13"/></td> <td rowspan="8"></td> </tr> <tr> <td><img src="images/nav_home_off.gif" width="348" height="25"></td> <td rowspan="4"><img src="images/main_logo.gif" width="421" height="98"></td> </tr> <tr> <td><img src="images/nav_who_off.gif" width="348" height="23"></td> </tr> <tr> <td><img src="images/nav_services_off.gif" width="348" height="25"></td> </tr> <tr> <td><img src="images/nav_contact_off.gif" width="348" height="25"></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> <div id="footerleft"> BD&M Limited: Registered in England & Wales number 310753 </div> <div id="footerright"> Registered Office: Skies, 20 St. Martinsfield, Winterbourne St. Martin, Dorchester, Dorset, DT29 9JW </div> </div> At the moment the images are just img tags but they'll be rollover links when I'm done. I want to fix the formatting before I go any further though. -------------------- 'What's an Intel chip doing in a Mac?' 'A whole lot more than it ever did in a PC.'

karinne View Member Profile	Mar 18 2008, 08:12 AM Post #2
Co-Founder Group: Co-Founders Posts: 2,498 Joined: 13-February 08 From: Squeezin' Member No.: 2	try adding cellpadding="0" and cellspacing="0" to your <table ... > tag. -------------------- The Squeeze Store is now OPEN! Come on in and grab something! a web design portfolio \| web non-sense I'm also on: del.icio.us \| flickr \| virb \| facebook \| twitter The Web Squeeze is also on: virb \| facebook \| stumbleupon - JOIN IN!

Inkers View Member Profile	Mar 18 2008, 09:29 AM Post #3
Fresh Squeezed Group: Members Posts: 17 Joined: 14-February 08 From: Somerset, UK Member No.: 62	QUOTE (karinne @ Mar 18 2008, 01:12 PM) try adding cellpadding="0" and cellspacing="0" to your <table ... > tag. Perfect! It was already set to 0 but it looks like it was needing specified. Thanks Karinne! -------------------- 'What's an Intel chip doing in a Mac?' 'A whole lot more than it ever did in a PC.'

Inkers View Member Profile	Mar 20 2008, 06:25 AM Post #4
Fresh Squeezed Group: Members Posts: 17 Joined: 14-February 08 From: Somerset, UK Member No.: 62	QUOTE (Inkers @ Mar 18 2008, 02:29 PM) Perfect! It was already set to 0 but it looks like it was needing specified. Thanks Karinne! Going to keep it in the same thread as it's the same subject etc. Again with the image based table, if I have a row span in a column on the right, how can I stop the images on the left in the left hand column from breaking apart? Screenshot: However as you can see, the DV in DW shows it to be 'together' DW Screenshot: Code: CODE <div id="container"> <table width="790" height="245" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"><img src="images/main_pages/page_top_spacer.gif" width="769" height="13"></td> <td width="21" rowspan="11"><img src="images/main_pages/page_right_spacer.gif" width="21" height="252"></td> </tr> <tr> <td width="360" height="9"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/main_pages/page_home_on.gif',1)"><img src="images/main_pages/page_home_off.gif" alt="Home" name="Home" width="360" height="24" border="0"></a></td> <td width="409" rowspan="4"><img src="images/main_pages/page_mainlogo.gif" width="409" height="97"></td> </tr> <tr> <td height="10"><a href="whoweare.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Who We Are','','images/main_pages/page_who_on.gif',1)"><img src="images/main_pages/page_who_off.gif" alt="Who we Are" name="Who We Are" width="360" height="24" border="0"></a></td> </tr> <tr> <td><a href="services.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services Provided','','images/main_pages/page_services_on.gif',1)"><img src="images/main_pages/page_services_off.gif" alt="Services Provided" name="Services Provided" width="360" height="24" border="0"></a></td> </tr> <tr> <td><a href="contactus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','images/main_pages/page_contact_on.gif',1)"><img src="images/main_pages/page_contact_off.gif" alt="Contact Us" name="Contact Us" width="360" height="25" border="0"></a></td> </tr> <tr> <td><img src="images/main_pages/page_left_1.gif" width="360" height="15"></td> <td rowspan="2"><div align="right"> <h4>Contact Us</h4> </div></td> </tr> <tr> <td><img src="images/main_pages/page_left_2.gif" width="360" height="17"></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td height="18"> </td> <td> </td> </tr> <tr> <td colspan="2"><img src="images/main_pages/contact_footer.gif" width="769" height="27"></td> <td width="21"><img src="images/main_pages/page_footer_2.gif" width="21" height="27"></td> </tr> </table> <div id="footerleft"> BD&M Limited: Registered in England & Wales number 310753 </div> <div id="footerright"> Registered Office: Skies, 20 St. Martinsfield, Winterbourne St. Martin, Dorchester, Dorset, DT29 9JW </div> </div> <!--Container Div --> So with these issues of 'breaking apart' I'm having, is there anyway to maybe create some sort of expanding background or... something? What's the easiest way to fix this issue? If it were my way I'd rewrite the whole thing in CSS but that's not what's required at the moment. -------------------- 'What's an Intel chip doing in a Mac?' 'A whole lot more than it ever did in a PC.'

Linda View Member Profile	Mar 20 2008, 06:34 AM Post #5
Co-Founder Group: Co-Founders Posts: 2,476 Joined: 13-February 08 From: Pink House in USA Member No.: 3	I think you need to give each row behind those images a set height. That will tighten everything up. Also make sure you have the table height correct. I think you currently have it at 245 px and it's actually 279px. But assigning a row height to each row should take care of the problem. -------------------- The Squeeze Shop is OPEN! I just ordered my awesome shirts! Did you? Maine-ly Web Design \| My Photography \| Twitter ME Become a Fan on Facebook \| Check out Stumbleupon

Inkers View Member Profile	Mar 20 2008, 07:01 AM Post #6
Fresh Squeezed Group: Members Posts: 17 Joined: 14-February 08 From: Somerset, UK Member No.: 62	QUOTE (Linda @ Mar 20 2008, 11:34 AM) I think you need to give each row behind those images a set height. That will tighten everything up. Also make sure you have the table height correct. I think you currently have it at 245 px and it's actually 279px. But assigning a row height to each row should take care of the problem. Well that seems to have tightened up the 'navigation' aspect, still having issues with the H4 with the left hand rowspan still breaking up. Screenshot: You can see the bottom right corner's wobbled a little too. Code: CODE <table width="790" height="280" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" height="13px" width="769"><img src="images/main_pages/page_top_spacer.gif" width="769" height="13"></td> <td width="21" rowspan="10" height"252px"><img src="images/main_pages/page_right_spacer.gif" width="21" height="252"></td> </tr> <tr> <td width="360px" height="24px"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/main_pages/page_home_on.gif',1)"> <img src="images/main_pages/page_home_off.gif" alt="Home" name="Home" width="360" height="24" border="0"></a></td> <td width="411" rowspan="4"><img src="images/main_pages/page_mainlogo.gif" width="411" height="97"></td> </tr> <tr> <td height="24px" width="360"><a href="whoweare.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Who We Are','','images/main_pages/page_who_on.gif',1)"> <img src="images/main_pages/page_who_off.gif" alt="Who we Are" name="Who We Are" width="360" height="24" border="0"></a></td> </tr> <tr> <td height="24px" width="360"><a href="services.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services Provided','','images/main_pages/page_services_on.gif',1)"> <img src="images/main_pages/page_services_off.gif" alt="Services Provided" name="Services Provided" width="360" height="24" border="0"></a></td> </tr> <tr> <td height="25" width="360"><a href="contactus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','images/main_pages/page_contact_on.gif',1)"> <img src="images/main_pages/page_contact_off.gif" alt="Contact Us" name="Contact Us" width="360" height="25" border="0"></a></td> </tr> <tr> <td width="360" height="15"><img src="images/main_pages/page_left_1.gif" width="360" height="15"></td> <td rowspan="3"><div align="right"> <h4>Contact Us</h4> </div></td> </tr> <tr> <td width="360" height="17"><img src="images/main_pages/page_left_2.gif" width="360" height="17"></td> </tr> <tr> <td width="360" height="13"><img src="images/main_pages/page_left_3.gif" width="369" height="13"></td> </tr> <tr> <td height="60" colspan="2"><table width="779" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="369"> </td> <td width="172"> </td> <td width="238"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table></td> </tr> <tr> <td colspan="2" width="769" height="10"><img src="images/main_pages/page_bottom_spacer.gif" width="769" height="10"></td> </tr> <tr> <td colspan="2" width="769" height="27"><img src="images/main_pages/contact_footer.gif" width="769" height="27"></td> <td width="21" height="27"><img src="images/main_pages/page_footer_2.gif" width="21" height="27"></td> </tr> </table> Thanks everyone who's contributing, it's hugely, hugely appreciated. -------------------- 'What's an Intel chip doing in a Mac?' 'A whole lot more than it ever did in a PC.'

karinne View Member Profile	Mar 20 2008, 08:29 AM Post #7
Co-Founder Group: Co-Founders Posts: 2,498 Joined: 13-February 08 From: Squeezin' Member No.: 2	You wouldn't happen to have this online would you? It would alot easier to help you out since we could actually play around with your code online. -------------------- The Squeeze Store is now OPEN! Come on in and grab something! a web design portfolio \| web non-sense I'm also on: del.icio.us \| flickr \| virb \| facebook \| twitter The Web Squeeze is also on: virb \| facebook \| stumbleupon - JOIN IN!

Inkers View Member Profile	Mar 20 2008, 09:38 AM Post #8
Fresh Squeezed Group: Members Posts: 17 Joined: 14-February 08 From: Somerset, UK Member No.: 62	QUOTE (karinne @ Mar 20 2008, 01:29 PM) You wouldn't happen to have this online would you? It would alot easier to help you out since we could actually play around with your code online. Sadly I don't (if you mean uploaded to an FTP server). Right now I'm editing it locally as the site is is currently live, I'm just running updates but because way the pages are currently set up (it was made a LONG time ago) I'm having to rebuild large chunks. If you want the actual code, I'd be happy to attach the files as the whole file is only 252kb -------------------- 'What's an Intel chip doing in a Mac?' 'A whole lot more than it ever did in a PC.'

karinne View Member Profile	Mar 20 2008, 09:40 AM Post #9
Co-Founder Group: Co-Founders Posts: 2,498 Joined: 13-February 08 From: Squeezin' Member No.: 2	nah ... i'm too lazy to download, unzip, run files I like it when it's online so I can just play around with the code using firebug. -------------------- The Squeeze Store is now OPEN! Come on in and grab something! a web design portfolio \| web non-sense I'm also on: del.icio.us \| flickr \| virb \| facebook \| twitter The Web Squeeze is also on: virb \| facebook \| stumbleupon - JOIN IN!

Inkers View Member Profile	Mar 20 2008, 09:57 AM Post #10
Fresh Squeezed Group: Members Posts: 17 Joined: 14-February 08 From: Somerset, UK Member No.: 62	QUOTE (karinne @ Mar 20 2008, 02:40 PM) nah ... i'm too lazy to download, unzip, run files I like it when it's online so I can just play around with the code using firebug. If it would help, I could upload it to my test server for you to use the source code? -------------------- 'What's an Intel chip doing in a Mac?' 'A whole lot more than it ever did in a PC.'

Linda View Member Profile	Mar 20 2008, 10:14 AM Post #11
Co-Founder Group: Co-Founders Posts: 2,476 Joined: 13-February 08 From: Pink House in USA Member No.: 3	You still have rows I believe that do not have heights assigned. Also your h4 "contact us" text is probably "taller" in height than the row would allow. Therefore causing spaces. All those spaces are because the row is too tall. Double check the heights. Now you are figuring out why tables are a pain.... Imagine if this site needs to have another navigation option added? Then what are you going to do? Redesign and have to update every single page. With all the energy you have spent on this, you'd have been better off recoding in css/xhtml. -------------------- The Squeeze Shop is OPEN! I just ordered my awesome shirts! Did you? Maine-ly Web Design \| My Photography \| Twitter ME Become a Fan on Facebook \| Check out Stumbleupon

karinne View Member Profile	Mar 20 2008, 10:15 AM Post #12
Co-Founder Group: Co-Founders Posts: 2,498 Joined: 13-February 08 From: Squeezin' Member No.: 2	And there's also the fact that headings have default margins and padding ... might be that those are fudging your heights. -------------------- The Squeeze Store is now OPEN! Come on in and grab something! a web design portfolio \| web non-sense I'm also on: del.icio.us \| flickr \| virb \| facebook \| twitter The Web Squeeze is also on: virb \| facebook \| stumbleupon - JOIN IN!

Inkers View Member Profile	Mar 20 2008, 10:37 AM Post #13
Fresh Squeezed Group: Members Posts: 17 Joined: 14-February 08 From: Somerset, UK Member No.: 62	QUOTE (Linda @ Mar 20 2008, 03:14 PM) You still have rows I believe that do not have heights assigned. Also your h4 "contact us" text is probably "taller" in height than the row would allow. Therefore causing spaces. All those spaces are because the row is too tall. Double check the heights. Now you are figuring out why tables are a pain.... Imagine if this site needs to have another navigation option added? Then what are you going to do? Redesign and have to update every single page. With all the energy you have spent on this, you'd have been better off recoding in css/xhtml. Most likely looking at a life sentence for murder ^_~ Funny enough, my boss has just said that we should have just rewritten it in CSS... wonders if she could haul it out in a weekend Think I could do it? For the records tables are EVIL. I get the feeling that this could all be solved with a fixed background and scrolling content or even background-repeat. ^_~ This post has been edited by Inkers: Mar 20 2008, 10:39 AM -------------------- 'What's an Intel chip doing in a Mac?' 'A whole lot more than it ever did in a PC.'

Inkers View Member Profile	Mar 20 2008, 10:38 AM Post #14
Fresh Squeezed Group: Members Posts: 17 Joined: 14-February 08 From: Somerset, UK Member No.: 62	QUOTE (karinne @ Mar 20 2008, 03:15 PM) And there's also the fact that headings have default margins and padding ... might be that those are fudging your heights. Ooo I'd not thought of that... that's something to think about.... -------------------- 'What's an Intel chip doing in a Mac?' 'A whole lot more than it ever did in a PC.'

Linda View Member Profile	Mar 20 2008, 12:44 PM Post #15
Co-Founder Group: Co-Founders Posts: 2,476 Joined: 13-February 08 From: Pink House in USA Member No.: 3	Not sure how fast you can get it done because I've only seen graphics ... Good luck to ya!! -------------------- The Squeeze Shop is OPEN! I just ordered my awesome shirts! Did you? Maine-ly Web Design \| My Photography \| Twitter ME Become a Fan on Facebook \| Check out Stumbleupon

« Next Oldest · HTML/XHTML · Next Newest »

If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!

Reply to this topic

Start new topic

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)

0 Members: