weird p tag issue: IE versus Firefox - Firefox correct, IE is not - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

weird p tag issue: IE versus Firefox - Firefox correct, IE is not

extra vertical space before first p tag in my content div

nwilcox

8:47 pm on Sep 11, 2006 (gmt 0)

I'm consistently getting this issue with IE only

[site details removed]

In Firefox the content body is spaced off the header area correctly ... 15px as set in my div padding

In IE it is about 30px or about double the correct height. This extra height only appears when the text is wrapped in a <p> tag and it only happens on the first and last occurance of the <p> tag within the div. It does not happen when span tags or other elements are used.

Is there something I shold do differently in my CSS?

Thank you for any help as I'm quite lost as to how IE is adding the extra space.

[edited by: SuzyUK at 9:31 pm (utc) on Sep. 11, 2006]

penders

10:39 pm on Sep 11, 2006 (gmt 0)

Are you using a correct DOCTYPE? IE will behave differently, particulary in respect to margins in quirksmode (ie. without a valid DOCTYPE).

The P tag does have margins top and bottom by default. I think FF and IE can behave differently with floated elements in this respect - have you tried removing or setting the margin-top of the P tag?

Several folk on here have suggested setting the margins and padding for all elements to ZERO before you start and then set margins for each element as you go... must admit I have started doing this now as well for new projects... it does ensure they are then set the same in different browsers.

* { 
margin:0; 
padding:0; 
}

nwilcox

9:12 pm on Sep 13, 2006 (gmt 0)

thank you for your reply!

what doctype should I set to make sure they display the same?

penders

10:23 pm on Sep 13, 2006 (gmt 0)

To ensure both browsers display in standards compliance mode... The standard HTML4.01 (Transistional) DOCTYPE would suffice:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">

Or if you adhere to the strict standard (using no deprecated elements etc.) then the HTML4.01 Strict DOCTYPE is good:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

icantthinkofone

12:33 am on Sep 14, 2006 (gmt 0)

All new pages should always use the strict doctype.

isulong seoph

2:06 am on Sep 14, 2006 (gmt 0)

hope you can help me to find best CSS tutorials

---------------------------

[edited by: SuzyUK at 8:18 pm (utc) on Sep. 29, 2006]
[edit reason] no signatures please, see TOS#13 [/edit]

nwilcox

1:44 pm on Sep 14, 2006 (gmt 0)

hi penders

I've got it set for that DOCTYPE already? Could there be another issue?

I just set "display: inline-block;" for the default <p> tag and that actually seems to help IE a little bit

thanks again!

penders

1:08 pm on Sep 19, 2006 (gmt 0)

I just set "display: inline-block;" for the default <p> tag and that actually seems to help IE a little bit

Personally I don't see how this can have any effect... Ok, FF doesn't support inline-block (?) But neither should IE, on a <p> tag! "In IE6 and 7 it works only on elements that have a natural display of 'inline' (SPAN, A etc.)" (<p> is a block-level element)

If you are still having problems then paste the HTML/CSS and we can have a look...

SuzyUK

10:29 am on Oct 1, 2006 (gmt 0)

Personally I don't see how this can have any effect... Ok, FF doesn't support inline-block (?) But neither should IE, on a <p> tag! "In IE6 and 7 it works only on elements that have a natural display of 'inline' (SPAN, A etc.)" (<p> is a block-level element)

FF doesn't support inline block it's true. IE supports inline-block on inline elements naturally, AND it can be made to do so on block elements in IE6/7 too which could perhaps account for the difference.

However the main thing is that inline-block; is a hasLayout trigger so its use is likely to cause things to be a bit different in IE.

@nwilcox, as you're suggesting the <p> elements is a cause here and only top and bottom I would think perhaps collapsing margins are actually in play here, IE also has another little foible whereby it's not very good at handling the collapsing of default margins so try adding your own explicit margins to elements:

p {margin 1em 0;}

to your CSS to see if that helps, also add temporary background colors to the elements that are affected header(?) & <p> so you can see exactly where the "gap" is.

Suzy

nwilcox

2:04 pm on Oct 2, 2006 (gmt 0)

thank you all for the suggestions (sorry about the code paste). The code you suggested does not deal with the padding or spacing or whatever the heck is wrong with IE. It is driving me crazy! It doesn't do this when in a table cell in IE. Why is that?

I tried "margin-top: 0;" again on my p tags and that fixes FF and Netscape ... but IE just flat simply ignores the 0 margin declaration. I colored the div and IE puts all this extra space aove the div so how can I control that if it isn't even in the div?

Is there a better way to force IE to behave correctly?

nwilcox

2:30 pm on Oct 2, 2006 (gmt 0)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
</style>
</head>
<body>
<table>
<tr>
<td bgcolor="#CCCCCC">Here is some regular table text</td>
</tr>
<tr>
<td bgcolor="#F7F7F7"><p>Here is some paragraph table text</p>
<p>Here is some paragraph text</p></td>
</tr>
</table>
<hr>
<div style="background-color:#CCCCCC">here is some regular div text</div>
<div style="background-color:#F7F7F7"><p>here is some paragraph div text</p></div>
</body>
</html>

simple example to illustrate my question. Why does the P tag within the div affect the margin of the div? Shouldn't the div rest right underneath the div directly above it?

Shouldn't the div have extra padding around the p tag, not the margin outside the div

Setek

3:46 am on Oct 3, 2006 (gmt 0)

simple example to illustrate my question. Why does the P tag within the div affect the margin of the div? Shouldn't the div rest right underneath the div directly above it?

Your problem isn't a doctype issue, it's more likely a collapsing margins issue :)

Try putting 1px of padding on the

div

in question, and if it pushes the

in its 'proper' place, then the problem is collapsing margins.

So, like, what are collapsing margins?

Let's say you have a parent object which has a margin of 5px to its top edge, but no padding to that top edge. We're going to put a light green background on it just to see where it starts and ends.

Then we're going to put lots of

s within that parent object, because that's what we do.

Those

s have a margin of 10px on them - so why does the first one sit flush against the top of the parent object (and its background colour?) And why is the margin on the top of the parent object now 10px?

Simply put:

Margins on unfloated elements collapse;
Margins on floated elements do not;
We can prevent it by having something 'blocking' the two margins from collapsing together (such as padding, a border)
There are other less stable ways to do this, such as absolutely positioning, floating, or changing the overflow to anything other than visible (why are these less stable? Because most take the element out of the natural flow of the document, which is preferably left untouched to avoid display issues/bugs/cross-browser issues.)

nwilcox

1:23 pm on Oct 3, 2006 (gmt 0)

I didn't think this would be so difficult!

thank you for your words of wisdom! :)

I'll give that a shot

Thanks!