PDA

View Full Version : Can't get rid of white space


albinosaur
11-10-2009, 05:59 AM
When I work on my site it looks exactly how I want it, but the second I browse using Firefox or IE there appears to be spacing between all the cells of my table. The cell spacing, padding and borders all set to 0 so there should be no reason to see such margins.

here's my code: http://pastebin.com/m177e696f

I have googled my heart out and I have not been able to find a solution to my problem. I found other threads with the same problem but the solutions didn't seem to help me.

Any help would be great. Thank you.

edbr
11-10-2009, 06:44 AM
just post your code here it would be easier.
if you didnt use tables for layout im sure you would not have a problem

albinosaur
11-10-2009, 06:54 AM
Yeah, I really shouldn't have used tables but the site seemed simple enough that I could be lazy and use tables as I am not very skilled with other layouts. :(

As you can see my CSS is a bit messy but none of it implies any sort of margin, padding, spacing, or border that would effect the outcome like this. I was at the point where I decided to start over clean and fresh but came upon the same spacing issues.

Thanks a lot for any attempt at helping me :-)

<!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=utf-8" />
<title>Welcome to Adult Care Consultants</title>
<style type="text/css">
<!--
@import url("ACCCSS.css");
.wesdfg {
background-color: #373E96;
}
.trMenuBar {
font-size: 9px;
}
.p {
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
.IrisFont {
color: #373E96;
}
.IrisFont {
font-size: 16px;
}
.IrisFont {
font-size: x-large;
font-weight: bold;
text-align: left;
}
body {
background-color: #80AD8B;
}
a:link {
color: #373E96;
}
a:visited {
color: #373E96;
font-weight: bolder;
}
a:hover {
color: #006940;
}
a {
font-weight: bold;
}
.style1 {font-size: 14px; }
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="ACCCSS" rel="stylesheet" type="text/css" />
</head>

<center><body onload="MM_preloadImages('Images/MenuHistoryOver.jpg','Images/MenuCareManagementOver.jpg','Images/MenuServiceAreaOver.jpg','Images/MenuLocationsOver.jpg','Images/MenuLinksOver.jpg','Images/MenuContactUsOver.jpg','Images/MenuHome.jpg','Images/HistoryOver.jpg','Images/CareManagementOver.jpg','Images/HomeCareOver.jpg','Images/EmploymentOver.jpg','Images/ContactUsOver.jpg','Images/LinksOver.jpg','Images/Private.jpg','Images/Forensic.jpg','Images/Contracted.jpg','Images/ApplyBlank.jpg','Images/EmployeesBlank.jpg','Images/DirectoryBlank.jpg','Images/Apply.jpg','Images/Employees.jpg','Images/LocationsBlank.jpg','Images/Directory.jpg','Images/Locations.jpg','Images/PrivateBlank.jpg','Images/ForensicBlank.jpg','Images/ContractedBlank.jpg','Images/Home.jpg')">
<table width="801" height="883" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="801" height="222"><table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="Images/LogoIris.jpg" width="184" height="222" /></td>
<td><img src="Images/LogoACC.jpg" width="618" height="222" /></td>
</tr>
</table></td>
</tr>
<tr class="trMenuBar">
<td height="36" class="trMenuBar"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/Home.jpg',1)"><img src="Images/HomeOver.jpg" alt="Home" name="Home" width="72" height="36" border="0" id="Home" /></a><a href="history.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('History','','Images/HistoryOver.jpg',1)"><img src="Images/History.jpg" alt="History" name="History" width="94" height="36" border="0" id="History" /></a><a href="caremanagement.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Care Management','','Images/CareManagementOver.jpg',1)"><img src="Images/Care Management.jpg" alt="Care Management" name="Care Management" width="183" height="36" border="0" id="Care Management" onmouseover="MM_swapImage('privateblank','','Images/Private.jpg',1);MM_swapImage('forensicBlank','','I mages/Forensic.jpg',1);MM_swapImage('ContractedBlank','' ,'Images/Contracted.jpg',1);MM_swapImage('ApplyBlank','','I mages/ApplyBlank.jpg',1);MM_swapImage('employeesBlank',' ','Images/EmployeesBlank.jpg',1);MM_swapImage('DirectoryBlan k','','Images/DirectoryBlank.jpg',1);MM_swapImage('LocationsBlan k','','Images/LocationsBlank.jpg',0)" onmouseout="MM_swapImgRestore()" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home Care','','Images/HomeCareOver.jpg',1)"><img src="Images/HomeCare.jpg" alt="Home Care" name="Home Care" width="119" height="36" border="0" id="Home Care" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Employment','','Images/EmploymentOver.jpg',1)"><img src="Images/Employment.jpg" alt="Employment" name="Employment" width="125" height="36" border="0" id="Employment" onmouseover="MM_swapImage('ApplyBlank','','Images/Apply.jpg',1);MM_swapImage('employeesBlank','','Im ages/Employees.jpg',1);MM_swapImage('privateblank','',' Images/PrivateBlank.jpg',0);MM_swapImage('forensicBlank', '','Images/ForensicBlank.jpg',0);MM_swapImage('ContractedBlan k','','Images/ContractedBlank.jpg',0);MM_swapImage('DirectoryBla nk','','Images/DirectoryBlank.jpg',1);MM_swapImage('LocationsBlan k','','Images/LocationsBlank.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','Images/LinksOver.jpg',1)"><img src="Images/Links.jpg" alt="Links" name="Links" width="62" height="36" border="0" id="Links" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Us','','Images/ContactUsOver.jpg',1)"><img src="Images/ContactUs.jpg" alt="Contact Us" name="Contact Us" width="125" height="36" border="0" id="Contact Us" onmouseover="MM_swapImage('DirectoryBlank','','Images/Directory.jpg',1);MM_swapImage('LocationsBlank','' ,'Images/Locations.jpg',1);MM_swapImage('privateblank','',' Images/PrivateBlank.jpg',1);MM_swapImage('forensicBlank', '','Images/ForensicBlank.jpg',1);MM_swapImage('ContractedBlan k','','Images/ContractedBlank.jpg',1);MM_swapImage('ApplyBlank', '','Images/ApplyBlank.jpg',1);MM_swapImage('employeesBlank',' ','Images/EmployeesBlank.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
<tr class="tdSubMenu">
<td height="32" align="right"><a href="private.html"><img src="Images/PrivateBlank.jpg" alt="privateblank" name="privateblank" width="56" height="25" border="0" id="privateblank" /></a> <a href="forensic.html"><img src="Images/ForensicBlank.jpg" alt="forensicBlank" name="forensicBlank" width="66" height="25" border="0" id="forensicBlank" /></a> <a href="county.html"><img src="Images/ContractedBlank.jpg" alt="contractedBlank" name="ContractedBlank" width="81" height="25" border="0" id="ContractedBlank" /></a> <img src="Images/BlankDivider1.jpg" width="94" height="25" alt="" /> <a href="contact.html"><img src="Images/ApplyBlank.jpg" alt="applyBlank" name="ApplyBlank" width="45" height="25" border="0" id="ApplyBlank" /></a> <img src="Images/EmployeesBlank.jpg" alt="employeesBlank" name="employeesBlank" width="81" height="25" id="employeesBlank" /><img src="Images/BlankDivider2.jpg" width="43" height="24" alt="" /> <a href="directory.html"><img src="Images/DirectoryBlank.jpg" alt="" name="DirectoryBlank" width="72" height="25" border="0" id="DirectoryBlank" /></a> <a href="locations.html"><img src="Images/LocationsBlank.jpg" alt="" name="LocationsBlank" width="72" height="25" border="0" id="LocationsBlank" /></a></td>
</tr>
<tr>
<td valign="baseline" class="trBackground"><span class="PageTitle"> Welcome to Adult Care Consultants Inc.!&nbsp; </span></td>
</tr>
<tr class="trBackground">
<td align="center" valign="top"><table width="783" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="378" height="515" align="left" valign="top"><p class="p">We are a multifacted private social work agency with 3 offices and approximately 35 staff members. <br />
<br />
Agency owners, Bev Gudex and Mary Madden have been business partners since 1995. Bev is an active NAMI member and currently serves as Vice President of NAMI-Fond du Lac.&nbsp; Mary continues to be an Adjunct Professor at UW-Oshkosh School of Social Work, a position held for the past 17 years. <br />
<br />
Our personal interests and involvement dovetail nicely with the business, creating opportunities for employees, students, and most importantly, the people we serve. We seek new ventures whenever a need presents itself. <br />
<br />
Contact is only a phone call or e-mail away: <a href="mailto:bev.gudex@adultcareconsultants.com">bev.gudex@adultcareconsultants.com<br />
</a><a href="mailto:mary.madden@adultcareconsultants.com">mary.madden@adultcareconsultants.com</a><br />
</p></td>
<td width="21" class="trBackground"><p class="p">&nbsp;</p></td>
<td width="380" align="center" valign="top" class="trBackground"><p><img src="Images/Owners.jpg" alt="" width="244" height="224" /><br />
<span class="picdescription">Mary Madden and Bev Gudex<br />
Owners</span><br />
<span class="IrisFont"><br />
“We believe life offers <br />
opportunities for growth rather than hurdles to be overcome. We believe that we cannot and should not predict who will succeed or fail but rather work to create environments in which clients can make their own choices.”</span></p></td>
</tr>
</table></td>
</tr>
<tr>
<td height="22" class="trMenuBar">&nbsp;</td>
</tr>
</table>
<a href="index.html">Home</a> | <a href="history.html">History</a> | <a href="caremanagement.html">Care Management</a> | <a href="homecare.html">Home Care</a> | <a href="Employment.html">Employment</a> | <a href="links.html">Related Links</a> | <a href="contact.html">Contact Us</a> <br />
<a href="private.html">Private</a> | <a href="forensic.html">Forensic</a> | <a href="contracted.html">Contracted</a> | <a href="apply.html">Apply Online</a> | Employee Login | <a href="directory.html">Employee Directory</a> | <a href="locations.html">Office Locations</a><br />
Fond du Lac Office | Oshkosh Office | Waupaca Office <br />
<br />
</body></center>
</html>

gentleone
11-10-2009, 07:29 AM
I have to agree with ebdr. Don't use tables for layout. As far as I can see a CSS layout for what you are trying to achieve with tables wouldn't be that difficult.

Anyways, I looked at your code and I see something weird with your stylesheets. First you use @import url and further on the code you use link href="ACCCSS" (notice your missing here probably .css after it). This doesn't make sense!

Something else you can try is to reset the margins and paddings in the beginning of your stylesheet with the following:
* {margin:0; padding:0}

albinosaur
11-10-2009, 07:48 AM
Something else you can try is to reset the margins and paddings in the beginning of your stylesheet with the following:
* {margin:0; padding:0}

Yes, that fixes it. Now I feel like a complete idiot for not thinking of a CSS reset. :oops: I'm just going to pretend like it's the lack of sleep.

Anyway, thank you very much and I'm sorry if I wasted anyone's time with my noobishness. Have a good day/night!

gentleone
11-10-2009, 08:02 AM
If you really want to reset everything then you can use the reset.css stylesheet from Eric Meyer.

http://meyerweb.com/eric/tools/css/reset/

albinosaur
11-10-2009, 10:12 AM
Thanks, I'll keep that in mind.

domedia
11-10-2009, 07:15 PM
Also you cannot have anything between </head> and <body>, there a deprecated CENTER tag there now.

albinosaur
11-10-2009, 08:03 PM
Also you cannot have anything between </head> and <body>, there a deprecated CENTER tag there now.

Oh crap, I meant to remove that before I showed you my code. That was my temporary laziness to center the table and everything after. I did plan on fixing it before putting it up. I'm not THAT big of a noob. :lol:

Thanks again everyone!