Default p setting in style sheet so that it shows the same in IE and FF

I have a small problem with the paragraph text on my site.

In IE all <p> text is pushed to the top of its container with no gap. The same at the bottom - there is no gap

However in FireFox the <p> text has a nice gap at the top and bottom.

I am assuming that they are just guessing because they don't know what to do.

How do I set a value for this in the stylesheet so that it both does the same thing?

thanks.

 

Have you tried p{margin:0;padding:0;}? Of course, from there you'd need to add the styles you want. Also, at times I've found that it's necessary to be a little more specific when it comes to padding and margins of elements. For instance, say my outermost div had an id of "wrapper". Then, in the CSS I'll use #wrapper p{}, or maybe even go a div deeper if that doesn't work.

 

Without a link, we can only guess.

 

I did try that, but it seems to set the paragraphs with no line breaks between them for some reason. The text just ends up being a big block.

 

Hmmm... Even after adding something like "padding:0px 0px 10px 0px;" after that first declaration? Because, after setting things to zero, the initial effect would be that it's all one big block. That's a good thing! : ) The idea is that now you can build on that, changing the padding and margins as you need.

 

1. is normal in FF without putting p{margin:0}

2. is with putting p{margin:0}

In IE in both cases it looks like 2.

 

katendarcy have it right:
start all p's out with margin and padding zero'd. This SHOULD remove the nice space you have in FF. If it only removes the space BETWEEN the p's but NOT at the top or bottom, then that space isn't coming from the p's in the first place, but from the padding of the container.

If it's container padding, then you'll start out zeroing that. Check in all browsers that the zeroing really did remove the space in all browsers. Then, add in what you want.

.reviewimg {
padding: 10px 0;
}

that'll add 10px at the top and bottom, and none on the sides.

Then with the p's, after they're zero'd:

.reviewimg p {
margin: 10px 0;
}

This should give you 10px worth of space between each p (margin collapse means each 10px won't be added together to make 20px). it might also add to the padding of the container too-- so play with it to see what you like.

You don't actually have to zero everything before adding margins and padding-- it's needed if you have a lot of elements who you are not styling, because then the browsers will use their defaults, and the problem with the defaults is that what's default in FF is not default in IE (or Opera or Safari or whatever).

 

Lawlz, I just saw someone posting pictures looking kinda similar, as far as, there's a lack of spacing in IE but there in FF.

In that guy's case, the problem was resolved after adding a Doctype. So, if you don't have one of those, add one. : )

 

Don't worry, there is definitely a doc type.

 

thanks, that helps. I wasn't aware that I had to zero things.

is that margin to the top?

I know that margin {0 0 0 0} is top, right, bottom, left.

Is margin {10px 0} top, bottom?

 

This sounds like collapsed margins. IE wrongly collapses them where hasLayout gets involved.

Without seeing at least a test case of some sort, all anyone can do is guess; as did I.

cheers,

gary

 

Gary:
does the 1px padding trick undo that in IE?

Fade:

Yeah. 10px on top, 10px on bottom, nothing on sides.

Margin/padding/border: top right bottom left;
Margin/padding/border: top sides bottom;
Margin/padding/border: top-bottom sides;
Margin/padding/border: all sides;

 

Thanks, I tried that when you suggested it and it solved the problem. I just had to add a top and bottom margin to all my p elements after, which wasn't too hard.

 

No. See this test case. (standards mode)

div {
/*  float: left;  alternate version*/
    width: 300px;
    background-color: yellow;
    }

.padded {
    padding: 1px;
    }
=======================

<div class="padded">
  <p>padded</p>
</div>

<div>
  <p>not padded</p>
</div>

Code (markup):

As you see, in IE, the <p>'s margins collapses through its parent with or without padding. Modern browsers collapse only the unpadded version. In the floated <div>s, modern browsers do not collapse either, but IE collapses both.

cheers,

gary