Jump to content

Spacing Between Cells

holmedwa04

By holmedwa04
in HTML/XHTML

 Share

Recommended Posts

holmedwa04 Invested Member

holmedwa04

Posted
Posted

Hi,I have created a template for a website that I am making and even though I have set the cellpadding, cellspacing and border to 0 for all tables, it still leaves a space at the bottom of the cell which stops pictures from joining properly.This is the code:

<html><head><title>Shape Making Club - CCMS</title></head><body  bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginheight="0" marginwidth="0" bgcolor="#04053D" text="#FFFFFF" link="#3F9CDC" vlink="#3F9CDC"><table width="100%" border=1" cellspacing="0" cellpadding="0"><tr><td width="70%" colspan="2"><marquee behavior="alternate"><font face="arial"><B>Shape Making Club - CCMS</B></marquee></td><td align=right><font size="4"><img border="0" src="top_right1.gif" width="319" height="22"></td></tr><tr><td width="12%" align=left><img border="0" src="swirl.gif" width="90" height="117"></td><td align=left><font color="#3f9cdc" size="6" face="arial">Shape Making Club</font><BR><font color="FFFFFF" size="1" face="arial"><BR></font><font color="FFFFFF" face="arial">@ CCMS</td><td align=right><img border="0" src="top_right2.gif" width="184" height="184"></td></tr><tr><td colspan="3"><table border="1" width="100%" height="100%" cellpadding="10" cellspacing="0"><tr><td width="15%" height="100%" valign=top>This is the navigation bar.</td><td width="70%">This is the Main Body</td><td width="15%" style="background: url(rightbg.gif) repeat-y;background-position:right;"></td></tr></table></td></tr></table></body></html>

Can anyone help me, I have also changed the border of all of m pictures to 0 as well?

Link to comment
Share on other sites
Cronthenoob Member

Cronthenoob

Posted
Posted
I have created a template for a website that I am making and even though I have set the cellpadding, cellspacing and border to 0 for all tables, it still leaves a space at the bottom of the cell which stops pictures from joining properly.This is the code:
<table width="100%" border=1" cellspacing="0" cellpadding="0">

Can anyone help me, I have also changed the border of all of m pictures to 0 as well?

It says your border=1" ??try border="0"There is a recent post on this forum where someone had the same problem, I'm searching for it now and post a link when I find it.Here it is Maybe you can use that and figure something out.
Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

Thats an excelent point, but it hasn't done the trick. I have tried also to put the css bit on the link you gave me to another topic, but that doesn't work either?I can upload the page if you like, then you can have a proper look at it with images, would you like me to do that?

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

change this 

<td align=right><font size="4"><img border="0" src="top_right1.gif" width="319" height="22"></td>

to

<td align=right><img border="0" src="top_right1.gif" width="319" height="22"><br></td>

if you open a font tag close it within the same cell...i removed it since it was pointless.and change this

<td align=right><img border="0" src="top_right2.gif" width="184" height="184"></td>

to

<td align=right><img border="0" src="top_right2.gif" width="184" height="184"><br></td>

BTW, it looks fine in FireFox and Opera....you are experiencing a bug in IE that is why you have to add a <br> after an image inside a cell. Doesn't make sense but it works

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

Thanks very much, that is great, I think I read somewhere about putting a break in after cells with just an image, but I never really understood it, and I think the font tag was there, because at some point I was changing the font, then forgot to remove it.That is great beond words, because I have been trying to get that working for months and then I just gave up, but when I found W3Schools forums I thought would try and ask here.So, your help is really appricated!!! :)

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted
That works in framesets (from what i remember when I actually used them) But i don't think it'll work in the context you are asking about.Try using a % value.
Im not sure how much percent it is though, I just want it to fill the rest of the page, unless it obvioulsy has more content than one page.
Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted
Hmmm. Can you link what you are working on?My brain is a little slow sometimes :)Try putting 100% and see what the result is.(height can't be 100% unless a specific height is specified somewhere)
kk, here is the linkIt is the table that is nested with the Navigation, and main body that I would like to strechto the rest of the screen.
Link to comment
Share on other sites
Cronthenoob Member

Cronthenoob

Posted
Posted

Try copy and pasting this

<html style="height:100%"><head><title>Shape Making Club - CCMS</title><style type="text/css">img{border: 0px;margin: 0px;}</style></head><body  bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginheight="0" marginwidth="0" bgcolor="#04053D" text="#FFFFFF" link="#3F9CDC" vlink="#3F9CDC" style="height:100%"><table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"><tr><td width="70%" colspan="2"><marquee behavior="alternate"><font face="arial"><B>Shape Making Club - CCMS</B></marquee></td><td align=right><img border="0" src="top_right1.gif" width="319" height="22"><br></td></tr><tr><td width="12%" align=left><img border="0" src="swirl.gif" width="90" height="117"></td><td align=left><font color="#3f9cdc" size="6" face="arial">Shape Making Club</font><BR><font color="FFFFFF" size="1" face="arial"><BR></font><font color="FFFFFF" face="arial">@ CCMS</td><td align=right><img border="0" src="top_right2.gif" width="184" height="184"><br></td></tr><tr><td height="70%" colspan="3"><div style="height:100%"><table border="1" width="100%" height="100%" cellpadding="10" cellspacing="0"><tr><td width="15%" height="100%" valign=top>This is the navigation bar.</td><td width="70%">This is the Main Body</td><td width="15%" style="background: url(rightbg.gif) repeat-y;background-position:right;"> </td></tr></table></div></td></tr></table></body></html>

I didnt have it with images, but it stretches it to the size of the page. Let me know if this is the solution you are looking for :) If you don't like it, then its back to the drawing board for me, lol. :)

Link to comment
Share on other sites
Cronthenoob Member

Cronthenoob

Posted
Posted

Yah, im still working, almost there, lol.alright, this doesnt seem to stretch it and put gaps for the images. Try it out.

<html style="height:100%"><head><title>Shape Making Club - CCMS</title><style type="text/css">img{border: 0px;margin: 0px;}</style></head><body  bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginheight="0" marginwidth="0" bgcolor="#04053D" text="#FFFFFF" link="#3F9CDC" vlink="#3F9CDC" style="height:100%"><table width="100%" border="1" cellspacing="0" cellpadding="0" height="100%"><tr><td width="70%" colspan="2"><marquee behavior="alternate"><font face="arial"><B>Shape Making Club - CCMS</B></marquee></td><td align=right valign="bottom"><img border="0" src="top_right1.gif" width="319" height="22"><br></td></tr><tr><td width="12%" align=left valign="top"><img border="0" src="swirl.gif" width="90" height="117"></td><td align=left><font color="#3f9cdc" size="6" face="arial">Shape Making Club</font><BR><font color="FFFFFF" size="1" face="arial"><BR></font><font color="FFFFFF" face="arial">@ CCMS</td><td align=right><img border="0" src="top_right2.gif" width="184" height="184"><br></td></tr><tr><td height="80%" colspan="3"><div style="height:100%"><table border="1" width="100%" height="100%" cellpadding="10" cellspacing="0"><tr><td width="15%" height="100%" valign=top>This is the navigation bar.</td><td width="70%">This is the Main Body</td><td width="15%" style="background: url(rightbg.gif) repeat-y;background-position:right;"> </td></tr></table></div></td></tr></table></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...