Im creating a simple table-based design. Im having a few problems. Between the header and the content, there is a gap. I have included the HTML and CSS code, if someone could point out my mistake, that would be great. Thanks! PS: And you dont have to tell me the code is messy, I know. I go back and clean it up at the end. Yes I am new to web design so I am open to any suggestions. HTML CODE: CSS CODE:
Have you tried this with a "transitional" DTD, like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Please give this a try; it might be enough to fix the issue and move on. Best wishes, Tom
Here is the updated code: If everything looks right, then I dont know, because the gap is still there. Thanks for all your help.
I'm just going to fix it all. To start: Why the quotes around the widths and some colors in the body? They arn't needed, take them out. Take the border-collapse:collapse; out of all of it apart from the table, tr, td part. background-color: #FFFFFF; don't forget the #'s So it would look like this: body { background-color: gray; text-align: center; margin-top: 0px; scrollbar-face-color: blue; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-arrow-color: #CCCCCC; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #000000; margin-bottom: 0px; } table, tr, td { border-collapse: collapse; } #container { cellpadding: 0px; cellspacing: 0px; width: 58%; border-width: 2px; border-color: blue; text-align: center; } #header { width: 58%; border: 0px; } #content { background-color: #FFFFFF; width: 760px; border: 0px; } #nav { width: 25%; border: 0px; } #sub_content { width: 50%; border: 0px; } #footer { width: 20%; position: relative; } Code (markup): I'd need to play about with it to see if I can get it to work. Give me 5mins. ps Why don't you have a opening body tag? That could be your problem there.
Chances are you're running into this. I suggest you try this: on the table cell where you have the gap, apply a vertical-align of bottom to the image inside or make it display:block. Make sure there is no space between the first and last tags inside the table cell NOT like this:
damn IE. Yeah, I was looking in FF. I can't think of anything that could be causing it, i'll try and get back to you. But you would be much better just doing it using divs, much easier too. ps heres the html formatted if you want it: <!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>Template</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table id="container"> <tr> <td> <table id="header"> <tr> <td> <img src="kids_happy.gif" /> </td> </tr> </table> </td> </tr> <tr> <td> <table id="content"> <tr> <td> <table id="nav" align="left"> <tr> <td> Navigation </td> </tr> </table> <table id="sub_content" align="center"> <tr> <td> Hello, welcome to the test site! </td> </tr> </table> </td> </tr> <tr> <td> <table border="1" id="footer"> <tr> <td> <img src="kids_happy.gif" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html> Code (markup): ps the vertical align on images worked. Good for soulscratch, i'll have to remember that one.
I put your code in there with the DOCTYPE and it doesnt put the bacgkround as gray. I removed the the DOCTYPE and it works. Please explain...
Setting a margin on a table cell (<th>, <td>) is pointless. I believe the link I posted in my previous reply is the solution.