Hi there, this is my first post but I've been reading here for a while and couldn't think of a better place to ask for help! I searched for this particular problem, but can't find it answered anywhere.
I'm adding a <div> to my page and want to pad the text inside. The code I'm using is
<div id="4b" style="background-color: #99FF99; color: #666666; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
<p><b>This is a title</b><br />
And this is the content.</p>
</div>
The left and right padding works exactly as I would expect it to, but the top and bottom padding adds extra padding that I didn't request.
The other issue I found is that the W3C validator says id="4b" is an invalid ID attribute.
Can anybody shed any light on either of these issues for me? I'm viewing it in IE 6.
Cheers, JohnOriginally posted by catterfeld
The left and right padding works exactly as I would expect it to, but the top and bottom padding adds extra padding that I didn't request.It is probably the <p> tags, not the <div>.
The other issue I found is that the W3C validator says id="4b" is an invalid ID attribute.IDs cannot start with a number. There are other rules for valid IDs as well according to W3C. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/types.html#type-idThat's">http://www.w3.org/TR/html4/types.html#type-idThat's</a><!-- m --> great, thanks!
Do you think there's CSS I can use on the <p> tag then to achieve the 5px padding at the top and bottom of the <div>?Put a 1px border on the DIV and the P, then you can see what needs to be messed with. Different browsers will give different results. You could set the margins to zero.Cheers, I'll have a play!
JohnOriginally posted by catterfeld
That's great, thanks!
Do you think there's CSS I can use on the <p> tag then to achieve the 5px padding at the top and bottom of the <div>?
Do it with a play-off between the div and the p styles. E.g., just pad the top of the div and set the p margin-top to zero, p margin-bottom to 5px.Originally posted by catterfeld
<div id="4b" style="background-color: #99FF99; color: #666666; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
<p><b>This is a title</b><br />
And this is the content.</p>
</div>
A couple of things that weren't mentioned. You can use the shorthand version of things to trim down your code. Here's the first time run through.
<div id="fourb" style="background-color: #9F9; color: #666; padding: 5px;">
<p><b>This is a title</b><br />
And this is the content.</p>
</div>
The second thing is to know what, when, where, and why you use certain tags. Your mock title should be placed in a header tag. If it's the title of the page, then use <h1>. If it's a sub title, then use something like <h2>, <h3>, etc.... The header tag also defaults to a bold font weight so that eliminated the <b> tag.
Second run through gives you this...
<div id="fourb" style="background-color: #9F9; color: #666; padding: 5px;">
<h1>This is a title</h1>
<p>And this is the content.</p>
</div>
If you want to change the spacing around the <h1> tag you can do that with CSS. Taking your CSS and placing it into a external CSS file gives your HTML this final look.
<div id="fourb">
<h1>This is a title</h1>
<p>And this is the content.</p>
</div>
Your CSS looks something like this
h1 { margin-bottom:-16px; font-size:16px; }
#fourb { background-color: #9F9; color: #666; padding: 5px; }
Now, when you are looking at your HTML file, won't that be a ton easier to read?
A side note, I'm viewing the page in Win2K Pro and that's why I use the font size and margin adjustment the way I did. There is a whole chapter in "Designing with Web Standards" talking about the pros and cons of using %, em, px, etc.Cheers spufi.
Although I was planning to put the styles in an external style sheet, I've now also tidied up the heading as per your advice.
Thanks, John
I'm adding a <div> to my page and want to pad the text inside. The code I'm using is
<div id="4b" style="background-color: #99FF99; color: #666666; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
<p><b>This is a title</b><br />
And this is the content.</p>
</div>
The left and right padding works exactly as I would expect it to, but the top and bottom padding adds extra padding that I didn't request.
The other issue I found is that the W3C validator says id="4b" is an invalid ID attribute.
Can anybody shed any light on either of these issues for me? I'm viewing it in IE 6.
Cheers, JohnOriginally posted by catterfeld
The left and right padding works exactly as I would expect it to, but the top and bottom padding adds extra padding that I didn't request.It is probably the <p> tags, not the <div>.
The other issue I found is that the W3C validator says id="4b" is an invalid ID attribute.IDs cannot start with a number. There are other rules for valid IDs as well according to W3C. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/types.html#type-idThat's">http://www.w3.org/TR/html4/types.html#type-idThat's</a><!-- m --> great, thanks!
Do you think there's CSS I can use on the <p> tag then to achieve the 5px padding at the top and bottom of the <div>?Put a 1px border on the DIV and the P, then you can see what needs to be messed with. Different browsers will give different results. You could set the margins to zero.Cheers, I'll have a play!
JohnOriginally posted by catterfeld
That's great, thanks!
Do you think there's CSS I can use on the <p> tag then to achieve the 5px padding at the top and bottom of the <div>?
Do it with a play-off between the div and the p styles. E.g., just pad the top of the div and set the p margin-top to zero, p margin-bottom to 5px.Originally posted by catterfeld
<div id="4b" style="background-color: #99FF99; color: #666666; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
<p><b>This is a title</b><br />
And this is the content.</p>
</div>
A couple of things that weren't mentioned. You can use the shorthand version of things to trim down your code. Here's the first time run through.
<div id="fourb" style="background-color: #9F9; color: #666; padding: 5px;">
<p><b>This is a title</b><br />
And this is the content.</p>
</div>
The second thing is to know what, when, where, and why you use certain tags. Your mock title should be placed in a header tag. If it's the title of the page, then use <h1>. If it's a sub title, then use something like <h2>, <h3>, etc.... The header tag also defaults to a bold font weight so that eliminated the <b> tag.
Second run through gives you this...
<div id="fourb" style="background-color: #9F9; color: #666; padding: 5px;">
<h1>This is a title</h1>
<p>And this is the content.</p>
</div>
If you want to change the spacing around the <h1> tag you can do that with CSS. Taking your CSS and placing it into a external CSS file gives your HTML this final look.
<div id="fourb">
<h1>This is a title</h1>
<p>And this is the content.</p>
</div>
Your CSS looks something like this
h1 { margin-bottom:-16px; font-size:16px; }
#fourb { background-color: #9F9; color: #666; padding: 5px; }
Now, when you are looking at your HTML file, won't that be a ton easier to read?
A side note, I'm viewing the page in Win2K Pro and that's why I use the font size and margin adjustment the way I did. There is a whole chapter in "Designing with Web Standards" talking about the pros and cons of using %, em, px, etc.Cheers spufi.
Although I was planning to put the styles in an external style sheet, I've now also tidied up the heading as per your advice.
Thanks, John