More problems with the table! - I am now trying to put the following code onto the web but as soon as I do it doesnt

Michael · 9th May 2009, 04:40 PM

I am now trying to put the following code onto the web but as soon as I do it doesnt look anything like it does on my PC.

Code:

<!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>Untitled Document</title>
<style type="text/css">
<!--

* {padding:0;margin:0;}

#wrapper {
    margin:0 auto;
    width:700px;

}

.helplines{font-size:100%;
font: 62.5%/1.5 "Lucida Grande", "Lucida Sana Unicode", Arial, Helvetica, sans-serif;
padding:20px;
border-collapse:collapse;
border:1px solid #c9c9c9;

}



td.helps {

border:1px solid #c9c9c9;
font-size:1.4em;
padding:1px 4px;

}

th.theaders {


background:url(tableheader.gif) 0 50% repeat-x;
text-align:left;
font-size:1.4em;

}

caption.helping {

font-weight:bold;
font-size:1.3em;
text-transform:uppercase;
padding: 0 0 5px;

}

tfoot.helpz {

background-color:#f3f3f3;
color:#555555;

}

tfoot.helpz td {

font-size:1.0em;
text-align:center;

}

-->
</style>
</head>

<body>
<div id="wrapper">

<table class="helplines" width="90%" border="0" cellspacing="0">
<caption class="helping">UK Helplines for Teens</caption>
<thead>
<tr>
<th class="theaders" scope="col">Organisations</th>
<th class="theaders" scope="col">Telephone Numbers</th>
</tr>
</thead>
<tfoot class="helpz">
<tr><td colspan="2">Teen helplines for those in need of emergency help &amp; advice.</td></tr>
</tfoot>
<tbody>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
<tr>
<td class="helps">Suicide Hotline</td>
<td class="helps"><img src="telephone.gif" alt="telephone" border="0" />&nbsp;084507096877</td>
</tr>
</tbody>

</table>

</div>
</body>
</html>

Here is the muck up page:

PHP Code:

  http://www.teenforumz.com/view.php?pg=teenhelplines

Awful isnt it? Where am I going wrong?

Thank you.

EDIT: I could just skip this and not bother to integrate it with the site but would that be okay or look awfully inconsistent say if I had a few links at the top of the page back to the site? I could maybe use this on another domain if I was to create the rest of the page and just use it as a helpline resources page for teenagers? Or, maybe create a mini static site full of resources on the same domain? :)

saltedm8 · 9th May 2009, 04:54 PM

add

Code:

cellpadding="blahpx"

also the tables can still be styled inline with css

Code:

style="blah: blah;"

Michael · 9th May 2009, 04:59 PM

None of the styles have been applied to it somehow, is my CSS wrong? I have a feeling that the way I am trying to use classes is wrong like:

tfoot.helpz, is this right? :S

saltedm8 · 9th May 2009, 05:26 PM

try this

Code:

.helpz td, tr{font-size:1.0em;text-align:center;}

as I am not 100% sure as to what you are trying to do with it

Michael · 9th May 2009, 07:00 PM

That did do something but sadly not to my table lol it made the forum names align centrally :)

MinatureCookie · 9th May 2009, 08:04 PM

Why is your entire CSS sheet wrapped in a ""? Does that have a purpose?
If you say that the browser doesn't seem to be picking up the stylesheet... That might be it?.. Maybe

saltedm8 · 9th May 2009, 08:10 PM

that is just being used because its how you do css that is included in the html file. that bits fine cookie, nice spot though.

MinatureCookie · 9th May 2009, 08:20 PM

Really? I thought it was the opening code for older browsers to ignore that bit of CSS? Heh... I never really do internal CSS within HTML, so learn something new every day ;)

What specifically is it that isn't working within your page, can I ask? Is it just that that stylesheet won't work at all? But it does when ran locally on your PC?

Michael · 9th May 2009, 08:25 PM

Yes that is the problem, it works fine locally but as soon as I add it to the CSS and the html to the test page it doesnt seem to apply the CSS correctly other than style the table footer.

Wrams · 9th May 2009, 08:50 PM

I'm not expert but why do people do internal CSS isn't it safer to do external CSS? Or doesn't it matter?

Also as a beginner would you recommend that i used external CSS because thats what i would have chosen.

Sorry to butt in on your topic Michael i'll let you all get back to it now...Lol ;)

9th May 2009, 04:54 PM	#2
saltedm8 Join Date: Dec 2008 Location: Kent Uk Posts: 1,633 Blog Entries: 6 Thanks: 15 Thanked 51 Times in 51 Posts Expertise: (X)HTML / CSS Experience: Professional	add Code: cellpadding="blahpx" also the tables can still be styled inline with css Code: style="blah: blah;" __________________ web design kent

9th May 2009, 04:59 PM	#3
Michael Senior Member Join Date: Jan 2009 Posts: 980 Thanks: 56 Thanked 14 Times in 14 Posts	None of the styles have been applied to it somehow, is my CSS wrong? I have a feeling that the way I am trying to use classes is wrong like: tfoot.helpz, is this right? :S __________________ Forum & Message Boards Directory Last edited by Michael; 9th May 2009 at 05:02 PM..

9th May 2009, 05:26 PM	#4
saltedm8 Join Date: Dec 2008 Location: Kent Uk Posts: 1,633 Blog Entries: 6 Thanks: 15 Thanked 51 Times in 51 Posts Expertise: (X)HTML / CSS Experience: Professional	try this Code: .helpz td, tr{font-size:1.0em;text-align:center;} as I am not 100% sure as to what you are trying to do with it __________________ web design kent

9th May 2009, 08:04 PM	#6
MinatureCookie Member Join Date: Jan 2009 Location: Hampshire, UK Posts: 270 Thanks: 3 Thanked 9 Times in 9 Posts Expertise: (X)HTML / CSS Experience: Professional	Why is your entire CSS sheet wrapped in a "<!-- lorem -->"? Does that have a purpose? If you say that the browser doesn't seem to be picking up the stylesheet... That might be it?.. Maybe __________________ MinatureCookie.com

9th May 2009, 08:10 PM	#7
saltedm8 Join Date: Dec 2008 Location: Kent Uk Posts: 1,633 Blog Entries: 6 Thanks: 15 Thanked 51 Times in 51 Posts Expertise: (X)HTML / CSS Experience: Professional	that is just being used because its how you do css that is included in the html file. that bits fine cookie, nice spot though. __________________ web design kent

9th May 2009, 07:00 PM	#5
Michael Senior Member Join Date: Jan 2009 Posts: 980 Thanks: 56 Thanked 14 Times in 14 Posts	That did do something but sadly not to my table lol it made the forum names align centrally :) __________________ Forum & Message Boards Directory

9th May 2009, 08:20 PM	#8
MinatureCookie Member Join Date: Jan 2009 Location: Hampshire, UK Posts: 270 Thanks: 3 Thanked 9 Times in 9 Posts Expertise: (X)HTML / CSS Experience: Professional	Really? I thought it was the opening code for older browsers to ignore that bit of CSS? Heh... I never really do internal CSS within HTML, so learn something new every day ;) What specifically is it that isn't working within your page, can I ask? Is it just that that stylesheet won't work at all? But it does when ran locally on your PC? __________________ MinatureCookie.com

9th May 2009, 08:25 PM	#9
Michael Senior Member Join Date: Jan 2009 Posts: 980 Thanks: 56 Thanked 14 Times in 14 Posts	Yes that is the problem, it works fine locally but as soon as I add it to the CSS and the html to the test page it doesnt seem to apply the CSS correctly other than style the table footer. __________________ Forum & Message Boards Directory

9th May 2009, 08:50 PM	#10
Wrams Join Date: Apr 2009 Location: Bristol, UK Posts: 916 Blog Entries: 1 Thanks: 63 Thanked 9 Times in 8 Posts Expertise: (X)HTML / CSS Experience: Intermediate	I'm not expert but why do people do internal CSS isn't it safer to do external CSS? Or doesn't it matter? Also as a beginner would you recommend that i used external CSS because thats what i would have chosen. Sorry to butt in on your topic Michael i'll let you all get back to it now...Lol ;) __________________ SuperValueWeb Hosting

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode