Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



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

Posts: 60
Name: Matt
Trades: 0
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
 
 
Register now for full access!
Old 08-02-2007, 08:25 PM Re: Paragraph spacing... IE vs. FF
ADAM Web Design's Avatar
Canadastaninianite

Posts: 5,938
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Trades: 0
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;
}
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
(my blog)


Please login or register to view this content. Registration is FREE
(with proof)
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Old 08-02-2007, 08:43 PM Re: Paragraph spacing... IE vs. FF
highanddry's Avatar
Close Talker

Posts: 880
Name: Jacob
Trades: 0
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, 08:51 PM Re: Paragraph spacing... IE vs. FF
DrSeuss's Avatar
Skilled Talker

Posts: 60
Name: Matt
Trades: 0
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, 09:57 PM Re: Paragraph spacing... IE vs. FF
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
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 !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 08-02-2007, 10:07 PM Re: Paragraph spacing... IE vs. FF
ADAM Web Design's Avatar
Canadastaninianite

Posts: 5,938
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Trades: 0
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.
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
(my blog)


Please login or register to view this content. Registration is FREE
(with proof)
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Old 08-02-2007, 10:20 PM Re: Paragraph spacing... IE vs. FF
ForrestCroce's Avatar
Half Man, Half Amazing

Posts: 3,023
Name: Forrest Croce
Location: Seattle, WA
Trades: 0
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 %...
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
ForrestCroce is offline
Reply With Quote
View Public Profile Visit ForrestCroce's homepage!
 
Reply     « Reply to Paragraph spacing... IE vs. FF
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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

BB 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.36715 seconds with 12 queries