HTMLHelp Forums > Tearing my hair out!

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

delambo

Nov 19 2009, 05:27 AM

Hi guys, great forum I wish I had found this ages ago!!

I have a little problem with the way a layout table is being displayed and want to know why!! The code is as below

CODE

<TABLE ALIGN="CENTER" WIDTH="750" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr>
<td height="18" bgcolor="#0000FF">
 This
 entire site and all of its content is subject to copyright. E&OE</td>
</tr>
 <tr>
 <td> <a href="http://www.sapsuk.com/contact.htm"> <img src="http://sapsuk.com/telephone.gif" width="750" height="101" border="0" alt="telephone number 0844 884 5956"></a> </td>
 </tr>
 <tr>
 <td height="32" bgcolor="#0000FF"> Calls
 to this number are charged at 5p per minute at all times from a BT land
 line. 
 0844 884 5956
 </td></tr>
</TABLE>

Now in deamweavers wysiwyg view it looks exactly how I want it to, as it does in w3schools tryit editor - example below

IPB Image

but in Firefox and IE it looks like this (with extra space between the layout cells - causing the table to be higher than I want).

IPB Image

I have tried so many ways to get it to look right!

Any suggestions for me to try?

pandy

Nov 19 2009, 10:10 AM

The margins browsers add to P, probably. Control them with CSS or remove the Ps.

In IE6 I also see a gap caused by this.
http://htmlhelp.com/faq/html/images.html#image-nospace

delambo

Nov 19 2009, 06:44 PM

Thanks pandy!!

Removing the p tags does exactly what I want it to do - except not centered.

I am not a complete newbie but do not code in html terribly often. I never learned about css when I first learned html (back i the dark ages). I have done a little research on css but it all seems a bit of a minefield and I cant really seem to find the answers to what I want to do here. Could somebody please give me a quick "idiots guide" to get me round this problem using css, and any decent learning resources to help me to learn more about css?

pandy

Nov 19 2009, 06:59 PM

http://htmlhelp.com/reference/css/

Start at the top. It's only CSS 1, but that's where you should start anyway and it will get you into it.

Meanwhile, you can use align with TD as well, so the P was never needed for that reason.
http://htmlhelp.com/reference/html40/tables/td.html

pandy

Nov 19 2009, 07:13 PM

Don't get me wrong now. I normally love P

, but for a one-liner that's already in some kind of block level element (TD), it maybe isn't needed.

delambo

Nov 20 2009, 09:58 AM

Yeah obvious really!! Thanks for the advise it worked a treat - I guess I just get carried away with p sometimes.

I will have a proper look at the css link soon - it looks pretty helpful at first glance.

pandy

Nov 20 2009, 04:42 PM

Me too.

If you want to keep the P, maybe you plan to have more paras there later on, all you need to do is to set its top and bottom margins to 0 with CSS. Note that browsers use different margins, so you really need to control both, even if it looks OK with just one of them gone in the browser you happen to use ATM.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.