[css-d] Problem with paragraphs and headers
Hi all,
I'm trying my first liquid layout and have run into a couple of
snags. Forgive me if I'm totally going about this the wrong way, but
I had to start somewhere. First, here are the links:
http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css
The problem is that there is a space above and below my #main_content
div when I place a p or an h1,2,3 tag in the first or last part
of the content. This is happening in IE6, IE7, FF and Safari. The
weird thing is when place a visible border around #main_content, that
all goes away and things act as I expected. So what am I missing
here? Below is the css for the #main_content div. Uncomment the
border to see what I mean.
#main_content {
/* border: 1px solid red;*/
margin-left: 170px;
line-height: 150%;
}
Any help is appreciated.
Thanks,
Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with paragraphs and headers
On Mon, 9 Jul 2007 11:17:05 -0700, Mark Wheeler wrote: Hi all, I'm trying my first liquid layout and have run into a couple of snags. Forgive me if I'm totally going about this the wrong way, but I had to start somewhere. First, here are the links: http://dev.tonedeafdesign.com/ob/test.html http://dev.tonedeafdesign.com/ob/css/global.css The problem is that there is a space above and below my #main_content div when I place a p or an h1,2,3 tag in the first or last part of the content. This is happening in IE6, IE7, FF and Safari. The weird thing is when place a visible border around #main_content, that all goes away and things act as I expected. So what am I missing here? Below is the css for the #main_content div. Uncomment the border to see what I mean. I think you are referring to escaping margins. Google css escaping margins for an explanation. Basically, the top and bottom margins of your Hn or P elements escape through the top and bottom of your DIV. Adding a border or padding to the top and bottom of your DIV will block them. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with paragraphs and headers
Hi David,
Thanks for the education. I just googled it and came across this link:
http://www.communitymx.com/abstract.cfm?cid=CB7B3
Thanks for the push in the right direction. I've made the changes to
css file. You can see the changes now.
http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css
I just added:
p, h1, h2, h3 {
margin: 0;
padding: 5px 0;
}
And that tightened everything up.
Thanks again,
Mark
--
On Jul 9, 2007, at 6:24 PM, David Hucklesby wrote:
On Mon, 9 Jul 2007 11:17:05 -0700, Mark Wheeler wrote:
Hi all,
I'm trying my first liquid layout and have run into a couple of
snags. Forgive me if
I'm totally going about this the wrong way, but I had to start
somewhere. First, here
are the links:
http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css
The problem is that there is a space above and below my
#main_content div when I place
a p or an h1,2,3 tag in the first or last part of the
content. This is happening
in IE6, IE7, FF and Safari. The weird thing is when place a
visible border around
#main_content, that all goes away and things act as I expected. So
what am I missing
here? Below is the css for the #main_content div. Uncomment the
border to see what I
mean.
I think you are referring to escaping margins.
Google css escaping margins for an explanation.
Basically, the top and bottom margins of your Hn or P elements
escape through the top and bottom of your DIV. Adding a border
or padding to the top and bottom of your DIV will block them.
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with paragraphs and headers
Hi All,
I just changed it from what I just said to adding a:
padding: 1px 0; /* This is needed to get rid of the escaping
margins. Just add a 1px padding-top and padding-bottom to the div.*/
to the #main_content div. This seemed a bit cleaner and allows me a
bit more flexibility with my P and Hn rules.
Thanks again.
Mark
-
On Jul 9, 2007, at 6:54 PM, Mark Wheeler wrote:
Hi David,
Thanks for the education. I just googled it and came across this link:
http://www.communitymx.com/abstract.cfm?cid=CB7B3
Thanks for the push in the right direction. I've made the changes to
css file. You can see the changes now.
http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css
I just added:
p, h1, h2, h3 {
margin: 0;
padding: 5px 0;
}
And that tightened everything up.
Thanks again,
Mark
--
On Jul 9, 2007, at 6:24 PM, David Hucklesby wrote:
On Mon, 9 Jul 2007 11:17:05 -0700, Mark Wheeler wrote:
Hi all,
I'm trying my first liquid layout and have run into a couple of
snags. Forgive me if
I'm totally going about this the wrong way, but I had to start
somewhere. First, here
are the links:
http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css
The problem is that there is a space above and below my
#main_content div when I place
a p or an h1,2,3 tag in the first or last part of the
content. This is happening
in IE6, IE7, FF and Safari. The weird thing is when place a
visible border around
#main_content, that all goes away and things act as I expected. So
what am I missing
here? Below is the css for the #main_content div. Uncomment the
border to see what I
mean.
I think you are referring to escaping margins.
Google css escaping margins for an explanation.
Basically, the top and bottom margins of your Hn or P elements
escape through the top and bottom of your DIV. Adding a border
or padding to the top and bottom of your DIV will block them.
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
