Reply
Paragraph spacing... IE vs. FF
Old 08-02-2007, 07:16 PM Paragraph spacing... IE vs. FF
DrSeuss's Avatar
Skilled Talker

Posts: 60
Name: Matt
So I have noticed, and it is actually quite annoying, that the paragraph spacing when using <p> styles is quite different when viewed in FF and IE. The result is my text being too squished at the top, or too far down at the bottom. Is there a way to fix this, so it displays the same in both browsers?

Here is an example page... view in both FF and IE and compare.

http://new2007.systemsnspace.com/abo...cts-hcgpo.html

Thanks!
DrSeuss is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 08-02-2007, 07:25 PM Re: Paragraph spacing... IE vs. FF
ADAM Web Design's Avatar
Canadastaninianite

Posts: 5,945
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Put this in your CSS, and it will solve the issue every time. I never really understood why this paragraph behaviour occurs...I just figured this out as a fix 4 years ago and it's served me well since.
Code:
p {
     margin:  0 0 1em 0;
     padding:  0;
}
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Old 08-02-2007, 07:43 PM Re: Paragraph spacing... IE vs. FF
highanddry's Avatar
Close Talker

Posts: 876
Name: Jacob
wow great information. I didn't know you could specify paragraph spacing
highanddry is offline
Reply With Quote
View Public Profile
 
Old 08-02-2007, 07:51 PM Re: Paragraph spacing... IE vs. FF
DrSeuss's Avatar
Skilled Talker

Posts: 60
Name: Matt
Thanks for the info

These are my current <p> classes, so how would I incorporate that fix if they already have margin and padding?

p {
color: #000000;
text-align: justify;
margin-right: 380px;
padding-left: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
p.thumbs{
color: #000000;
text-align: justify;
padding-left: 25px;
padding-right: 65px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
DrSeuss is offline
Reply With Quote
View Public Profile
 
Old 08-02-2007, 08:57 PM Re: Paragraph spacing... IE vs. FF
LadynRed's Avatar
Super Moderator

Posts: 6,557
Location: Tennessee
Quote:
I didn't know you could specify paragraph spacing
Of course you can and there are several ways to achieve it.

One way is by specifying line-height for your <p>. Another, as Adam pointed out, is to use margins and/or padding.

Matt, your only margin and padding on your p's is left and right. You need to add top and/or bottom.

So, something like: margin: 3px 380px 3px 0;
Or, specify a line-height, start with 1.5em and make it larger until you get the spacing you want.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 08-02-2007, 09:07 PM Re: Paragraph spacing... IE vs. FF
ADAM Web Design's Avatar
Canadastaninianite

Posts: 5,945
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
p {
color: #000000;
text-align: justify;
margin-right: 0 380px 1em 0;
padding-left: 0 0 0 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}p.thumbs{
color: #000000;
text-align: justify;
margin: 0 0 1em 0;
padding: 0 65px 0 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
That'll do ya.
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Old 08-02-2007, 09:20 PM Re: Paragraph spacing... IE vs. FF
ForrestCroce's Avatar
Half Man, Half Amazing

Posts: 3,024
Name: Forrest Croce
Location: Seattle, WA
Quote:
Originally Posted by ADAM Web Design View Post
Put this in your CSS, and it will solve the issue every time.
Code:
p {
     margin:  0 0 1em 0;
     padding:  0;
}
I find myself using this trick a lot, but from the other approach:

<someTag style="margin-top: -1em;">

Em is so much nicer than px or %...
ForrestCroce is offline
Reply With Quote
View Public Profile Visit ForrestCroce's homepage!
 
Reply     « Reply to Paragraph spacing... IE vs. FF
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.80402 seconds with 12 queries