[sly]

Im trying to add padding to my headline but it doesn't work, here is the part of my HTML and CSS code that has to do with my problem.

HTML:

<div class="headline">			
<td id="headline">
<table border="1">
<tr>
<td>
This is were you write stuff<p> 
This is were you write stuff<p> 
This is were you write stuff<p> 
This is were you write stuff<p> 
This is were you write stuff<p> 
This is were you write stuff<p> 
This is were you write stuff<p> 
This is were you write stuff<p> 
This is were you write stuff<p> 
This is were you write stuff<p> 
This is were you write stuff<p> 
This is were you write stuff<p> 
</td>
</tr>
</table>
</div>

CSS:

td#headline {
padding-top: 100%;
}

i think something is wrong with the td#healine in my css but im not sure so thats why im asking you
thanks!

[Martyr2]

Yeah first of all the td#headline part is not going to work. You use the pound sign (#) to mark styles that link directly to an id. Since you have an ID called "headline" it would just be...

#headline { 
	 padding-top: 20px;
}

Second issue is padding. While padding can take a percentage, it doesn't work as expected in all browsers so you really should try to avoid it if possible. Use a length instead like 20px like I have defined above.

Also make sure that your <td> tags are part of a table. From what you show there, it is outside the table definition. If it is part of another table definition we can't see, then you are ok.

Lastly, while there is nothing saying you can't have an ID called headline and a CSS class called headline, you might want to make sure these are two different names so that you (or the browser) will get them confused in the future.

Try the definition I have put above and see if that works for you.

"At DIC we be pad styling code ninjas... we also wear the latest fashions like polka dots because we are trend setters of style"

This post has been edited by Martyr2: 19 January 2009 - 10:59 PM

[sly]

what exactly do u mean by

"Also make sure that your <td> tags are part of a table. From what you show there, it is outside the table definition. If it is part of another table definition we can't see, then you are ok."

?

[sly]

nvm i fixed it thanks!

[thehat]

Martyr2, on 20 Jan, 2009 - 05:57 AM, said:

Yeah first of all the td#headline part is not going to work. You use the pound sign (#) to mark styles that link directly to an id. Since you have an ID called "headline" it would just be...

#headline { 
	 padding-top: 20px;
}

This isn't entirely true. Stating the element type in front of the pound sign (or hash if you're in the UK ) just makes the rule more specific. This is more useful with classes, as you can put the same class on many elements.

I personally always specify the elements type ahead of the id or class symbol, because it makes large css files easier to follow.

[Arenlor]

thehat, on 20 Jan, 2009 - 08:51 AM, said:

This isn't entirely true. Stating the element type in front of the pound sign (or hash if you're in the UK ) just makes the rule more specific. This is more useful with classes, as you can put the same class on many elements.

I personally always specify the elements type ahead of the id or class symbol, because it makes large css files easier to follow.

As stated on http://www.w3.org/TR...tml#specificity
#headline{}; would have a specificity of 100
td#headline{}; would have a specificity of 101
Which means that no matter what order you put them in td#headline{}; would override. On top of that, having:

<td id="headline" style="padding-top:10px">

Would still be overwritten by td#headline{}; in a stylesheet since it is more specific.