I have been using CSS for over a year and have not seen this before . . .

I have a body tag with margin=0 and padding=0. In FF(2.0.0.3), the zero margins and padding eliminate a ~3px default padding between the edges of the body and the elements that it contains. Such default padding is not seen in IE.

I have a p tag with text in it followed immediately by a div tag with text in it. I have zero margins and padding on both boxes along with a background color on both to visually distinguish them. FF shows a blank space between the p and div boxes. IE6 does not.

If I add a border to the div, then the space between the two boxes disappears, but seems to move inside the div box i.e. now there is colored space between the top of the div box and the text that wasn't there before the border went in. This also doesn't happen in IE.

Oh, and if I make both boxes divs instead of just the second one, both have space above them! But, that's probably redundant.

I though I was used to similar IE glitches which is why I put margin=0 and padding=0 on just about everything unless some other value is needed. But I am not used to such issues with FF. Maybe I misunderstood the glitch. Never-the-less, I need the two browsers to behave more alike in this regard. How is it characterized and how do I work with or around it?

Here is the URL of the very simple code that behaves as described:
www.cofcteencamp.com/test2.html

First of, the way you have structured your doc isn't really using css, its using styles embedded in the html which does not really get the benefit of css- i.e removing the stylinf from the content.

I have redone your code in a more css friendly way and corrected the element thats causing the problem. I don't see a difference between ie7 or FF2 on the machine I have, they treat it identically- when you say ie maybe you mean ie6? ie7 is more compliant, and is what I have on my main machine here (alonfg with FF).

Anyway the issue is caused by the <p> tag on the contents of the div. You need to force a margin of 0px on thisor you get the break.
The way i have done it here is to add a couple of classes- one to the p outside the div (simple) and one inside (embedded). Basically it does what you want.
here is the code- note the css is in the page but I would normally stick it in a linked file. Have a look here:
www.halleynet.co.uk/demoarea/Untitled-1.html

HTH
Kenny

-----------------------------------
www.halleynet.co.uk

Thank you. It of course cleans up my test document. I have to dig deeper to figure out why this is the case in my real page. I'm sure it will work itself out.

I do understand the glories of CSS and normally do put the CSS in a linked file. Today's particular issue has cost me a whole day and a half of coding time and confusion during which I sliced away all of the other code that I thought was the cause of this mysterious blank space, coming down to these fundamental pieces. The original page is way more complex, visually and code-wise. It is easier for me to test the impact of the code when I insert it inline as I did. Once I'm happy with it, then I move it up and out so that I can re-use it elsewhere.

Yes, I do mean IE6. My client base is not likely to have upgraded yet, so I still deal with the less-compliant issues, though generally don't bother to go back further than IE6.

I am surprised that the p tag has a different impact on a div with a border than one without, and right there in wonderful FF!

Even though I design for only FF, IE6, (and soon I'm sure IE7), cross-browser inconsistencies drive me crazy. Is there an index somewhere that just lists the differences in browser handlings of CSS? I've searched and searched - usually in the panic of a problem like this - and haven't found one yet.

Thanks again. MAS

Hi
I am not sure if ther eis a website that covers all the differences but there ar eplenty out there that list the known issues and bugs- though getting to grips with what the authors mean can be tricky- I had an issue with FF2 /ie7 difference myself last weekend where links in an unordered list format "coloured up" differently if the link itself was to a directory other than the current one or to another site. Why it did this I have no idea- but i managed to resolve it with what to me seems like a bit extraneous css but allows everything to act the same and now seems cross browser compatible,

I agree its a pain- I too develop for ie6 and FF2/ ie7 only- mainly because when i look at my server logs I rarely see more than 1% hits from browsers of lower build than this, so why bother developing to correct when they can't be bothered to upgrade!

If I get insurmountable issues when designing- for example a recent clients site I did, used a fixed position css based background which renders really nicely in ie7 and FF2 and Opera but not in ie6 (I expected this issue from the outset). There was asupposed to be a javascript fix for this but I found it was a bit rubbish with my code- probably beacuse it was written with an image on the left in mind- and my client insisted on his image being on the right!

So what i did to maintain crossbrowser support was write some server side code that adapts the css to the calling browser- if it won't do the fixed backgrounds, It removes this line of css and delivers a slighlty plainer page. Everyone seems happy and in time when more people have adopted better browsers the site will be fine- I get about a 60% hit rate of up to date browsers these days.

-----------------------------------
www.halleynet.co.uk

My problem, thought to be fixed by setting margins and padding of p elements nested inside divs, seems to persist in my original document.

www.cofcteencamp.com/index-fix.html

There is a trash div called "spacer" that I threw in in desperation so as to move the right-hand text down the page. If you show borders around this div you will see that it does not go to the top of the view-port. On the div before it (which is floated left), if you get rid of the top margin, it also sits 10 or so pixels away from the top of the view-port. I put margins and borders on all the nested p tags and it hasn't changed anything.

I'm stymied.

copy, paste and run....

www.bestmobiletools.com/popular.html

I love css controls, enjoy <img src=../images/dmxzone/forum/icon_smile_approve.gif border=0 align=middle>

*Tested in FF2, IE7 and Opera 9.0*
*all with the same resulting view*

<pre id=code><font face=courier size=2 id=code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
.margin {
margin: 0px;
padding:2px;
background-color: #CCFF33;
}

.nigram {
margin: 0px;
padding:2px;
background-color: #FFCC99;
}

.page {
margin: 0px;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;

&lt;body class="page"&gt;

&lt;p class="margin"&gt;
This is just a paragraph of simple text. With the body styled as above,
it butts up against the edges of the viewport just like I want it to.&lt;/p&gt;

&lt;p class="nigram"&gt;
This is a group of text to which I've added forced line returns. View
in FireFox - see that "white" space just above this orange box? Why is
it there? The whole thing validated last time I checked. &lt;br&gt;&lt;br&gt;
Contact names &lt;br&gt;
street address &lt;br&gt;
Lee's Summit, MO 64082 &lt;br&gt;
phone: (xxx)xxx-xxxx &lt;br&gt;
&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;</font id=code></pre id=code>

Edited by - NickNR on 07 Jun 2007 21:44:44

Thank you , Nick.

Unfortunately, you removed the div tags and I need the div tags. This is really a problem extracted from a much more complicated page where the divs actually do something that I think makes the divs necessary- ie I can't solve the problem by removing them. So, the question remains.

MAS

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
I love css controls, enjoy <img src=../images/dmxzone/forum/icon_smile_approve.gif border=0 align=middle>

*Tested in FF2, IE7 and Opera 9.0*
*all with the same resulting view*

<pre id=code><font face=courier size=2 id=code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
.margin {
margin: 0px;
padding:2px;
background-color: #CCFF33;
}

.nigram {
margin: 0px;
padding:2px;
background-color: #FFCC99;
}

.page {
margin: 0px;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;

&lt;body class="page"&gt;

&lt;p class="margin"&gt;
This is just a paragraph of simple text. With the body styled as above,
it butts up against the edges of the viewport just like I want it to.&lt;/p&gt;

&lt;p class="nigram"&gt;
This is a group of text to which I've added forced line returns. View
in FireFox - see that "white" space just above this orange box? Why is
it there? The whole thing validated last time I checked. &lt;br&gt;&lt;br&gt;
Contact names &lt;br&gt;
street address &lt;br&gt;
Lee's Summit, MO 64082 &lt;br&gt;
phone: (xxx)xxx-xxxx &lt;br&gt;
&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;</font id=code></pre id=code>

Edited by - NickNR on 07 Jun 2007 21:44:44
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

Tested this again, just wrap the &lt;p&gt; tags in the divs.

Still has the same effect across FF2, IE7 and Opera9 and allows you to add back in the elements you want for the divs:

<pre id=code><font face=courier size=2 id=code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
.margin {
margin:0px;
padding:2px;
background-color: #CCFF33;
}

.nigram {
margin:0px;
padding:2px;
background-color: #FFCC99;
}

.page {
margin:0px;
}

--&gt;
&lt;/style&gt;
&lt;/head&gt;

&lt;body class="page"&gt;

&lt;div&gt;&lt;p class="margin"&gt;
This is just a paragraph of simple text. With the body styled as above,
it butts up against the edges of the viewport just like I want it to.&lt;/p&gt;&lt;/div&gt;

&lt;div&gt;&lt;p class="nigram"&gt;
This is a group of text to which I've added forced line returns. View
in FireFox - see that "white" space just above this orange box? Why is
it there? The whole thing validated last time I checked. &lt;br /&gt;&lt;br /&gt;
Contact names &lt;br /&gt;
street address &lt;br /&gt;
Lee's Summit, MO 64082 &lt;br /&gt;
phone: (xxx)xxx-xxxx &lt;br /&gt;
&lt;/p&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</font id=code></pre id=code>

My original code had the same style rules you have proposed here EXCEPT class=nigram was applied to its containing div instead of the p tag. In this simplified example, it appears equivalent to apply these rules to either the div or respective nested p tags. But, I don't sense that it's always feasible to do that.

Here is my posting from somewhere in the middle of this discussion where I offered a more complex example for which this solution is insufficient. There are features of the divs that I would not want to apply to the nested elements individually.

Am I just being difficult, wanting something like a clear "rule," something like "thus and so is how FF handles divs with nested whatevers . . ." instead of a one-time work around?

MAS

From previous posting:
" My problem, thought to be fixed by setting margins and padding of p elements nested inside divs, seems to persist in my original document.

www.cofcteencamp.com/index-fix.html

There is a trash div called "spacer" that I threw in in desperation so as to move the right-hand text down the page. If you show borders around this div you will see that it does not go to the top of the view-port. Or, get rid of the spacer div and highlight the two p.home tags and you will see they do not go to the top of the view port. On the div before these (which is floated left), if you get rid of the top margin, it also sits 10 or so pixels away from the top of the view-port. I put margins and borders on all the nested p tags and it hasn't changed anything.

I'm stymied."

Very useful, thank you

converter free video zune
www.giftdownload.net

Hi Mary Ann,

I noticed this just recently as well. I don't know what is causing it, but either:

a) I have never noticed this before (which seems highly unlikely) or;
b) Something has changed in FF and now all my old sites are busted.

Either way, I'm not happy.

Anyway, the solution is:

p{ margin:0px; padding:0px;}

Hope that helps.

Rob

Thanks, Rob. I had not been aware of it before and was secretly suspicious that I had been too novice to notice &lt;oh self doubt&gt;, even after a year of intense, grueling, CSS coding.

I have tried the margin=0 and padding=0 on all p tags. It appears that sometimes it works; sometimes it doesn't. I'm still trying to characterize when. And then there's the margin-top vs. top rule thing. What's with that?

But, as you say, something may have changed in one of the new updates of FF. I think I'll see if FF has a CSS forum specifically and ask.

Mary Ann

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Hi Mary Ann,

I noticed this just recently as well. I don't know what is causing it, but either:

a) I have never noticed this before (which seems highly unlikely) or;
b) Something has changed in FF and now all my old sites are busted.

Either way, I'm not happy.

Anyway, the solution is:

p{ margin:0px; padding:0px;}

Hope that helps.

Rob
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

"im just dropping by,nice post!"

www.mp4-converter.net/dvd-to-mp4/

I started a new page today and ran into the same problem right off the bat with only a few p elements, an image, and a body background imposed AND zero margins and padding on every element on the page.

So I went in search of FireFox issues and found this: www.search-this.com/2007/03/12/no-margin-for-error/
The author points to various browser default values for margin and padding, then suggests either setting these to zero for EVERY element used, or just setting a global (*) rule.

It's compelling. I put a global margin and padding = 0 right at the top of the style sheet, then set everything else the way I really wanted it and poof, I have control again. It works. What do you think? Too good to be true?


<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Hi Mary Ann,

I noticed this just recently as well. I don't know what is causing it, but either:

a) I have never noticed this before (which seems highly unlikely) or;
b) Something has changed in FF and now all my old sites are busted.

Either way, I'm not happy.

Anyway, the solution is:

p{ margin:0px; padding:0px;}

Hope that helps.

Rob
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

don't think so, they should be cross browser, so you should be fine.