CSS Problems w/Netscape....AGAIN!

[steviedifranco]

i've decided netscape sux.

but still some people haven't figured that out and still use it.

i'm trying to make a site using a lot of css, and netscape always blows it. why does netscape add a line break above a <p> on the first line of a <div>? i even think this happens using tables...but i can't be sure of this. is there a way to avoid this?

[Sardtok]

Let me get this straight the code looks something like this:

<div class="some_class_if_I_use_custom_classes">
<p>
I use paragraphs weeeeh!
<p>
I use paragraphs the old way without closing the tags weeeeh!
<p>
Or maybe I do close them sometimes, I don't know weeeeh!
</p>
</div>


My suggestion is:
use span instead of div, then you are guaranteed no formatting rules apply except for those you apply with css... ;)

[edit]
DOH! Managed to type [CODE] twice instead of closing it with the closing code vB tag...

[steviedifranco]

all my tags are closed....in fact i'm making a page right now that is w3c strict...so they have to be.

i tried using <span> but that didn't work. i think it might just be some quirky thing with netscape. but then again, if i'm the only one that's seen it, maybe it is something i'm doing wrong.

as soon as i finish this page today, i'll post a link and maybe then someone can figure it out, cuz i sure can't.

[steviedifranco]

Okay, I'm at a good stopping point right now. Take a look at this template...looks wonderful in IE, but the in Netscape, there are added line breaks where there shouldn't be any. Does anyone know what is up with this?

http://www.ohioconnect.net/template.php

[Sardtok]

Unless you really need to use a paragraph,
try using span instead, just change all occurences of <p whatever> to <span whatever> unless you rely on the paragraph formatting this is actually a good idea.
<p> should only be used for actual paragraphs,
if the formatting depends upon css you should use divs or spans instead (I think there's a third one too, but can't remember).

I should have suggested this in the first place,
but I don't always know what I'm talking about,
sometimes you just get lucky and catch me in a moment of clarity ;)
And I didn't know you were using paragraphs for this type of formatting.
If you require a newline at the end of the span, as you would get with a paragraph, you should be able to use css to do that using a pseudo class...
I'll check it out later,
it's not supported by all browsers and so might not be the best idea to use, and I don't remember this stuff all that well,
I only do css cooking once in a while... ;)

[katkin]

Try adding (in your style.css):

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

Then set the margins and padding just where you want them in each class or id

alternately, you can set all margins and padding in each class/id, for example:

.google {margin:0px 0px 10px 0px; padding: 5px 10px}

Netscape assumes a certain default amount of space around paragraphs and divs unless it's specifically told otherwise.

[GarbageCat]

Which version of Netscape are you referring to ? 4.x or 6+ ? The CSS implementation in Netscape 4.x browsers was really bad. Thankfully they don't make up much of the user base anymore.

The problem you are seeing with the P tags inside of the DIV tags is because they're both block level elements. Rather than using the P tags, you might just use double <BR> tags anywhere that you want the appearance of a <P> tag. For instance:

<div class="some_class_if_I_use_custom_classes">
I use paragraphs weeeeh!
<br><br>
I use paragraphs the old way without closing the tags weeeeh!
<br><br>
Or maybe I do close them sometimes, I don't know weeeeh!
</div>

[deker]

Using spans and double breaks defeats the purpose of trying to make your site standards compliant and validating in XHTML strict. If it's a paragraph, use a paragraph tag. That's the whole point of separating style from content, so that your XHTML does not contain any code that is just for the purpose of making your site appear a certain way. XHTML just structures the document, CSS handles all presentation.

Setting the top margin and padding to zero should fix the problem, unless you are trying to make it look good in Netscape 4.x, which is probably impossible.

[GarbageCat]

Yeah, your right.. I missed that he was looking to be XHTML compliant, since that was not in the original posting.

-----

Another solution is to just add the class to each P tag and forget about the DIV wrapper.

<p class="custom_class">
I use paragraphs weeeeh!
</p><p class="custom_class">
I use paragraphs the old way without closing the tags weeeeh!
</p><p class="custom_class">
Or maybe I do close them sometimes, I don't know weeeeh!
</p>
-----

Or yet another solution is to ad a style in your css for spacers, say:

<style type="text/css">
.spacer10 {height: 10px; font-size: 10px;}
</style>

Then anywhere you want a spacer, put:
<div class="spacer10">&nbsp;</div>

These can be nested inside the other DIV where the custom class was specified. I believe this is standards compliant too. If not, it does at least satisfy the original need to not have double line breaks. Not only that, but by changing the height, you can have even more control over the size of your spacers.

-----

Most of the time, there is no real need to be standards complaint, just to make sure your site looks consistent from browser to browser. I am pretty sure that both of the options I listed this time should be compliant though.