Problems with CSS in Netscape

[Enigmatic]

Yesterday I cleaned up my web site and got it looking and loading exactly how I wanted it. Today I decided to view it in Netscape and it looked different than in IE (different in a bad way). The first problem is the dotted HR line I'm using as a separator. Here is the coding I'm using in my css file:

hr {width: 90%; text-align: center; height: 1px; color: #CCCCCC; border-style: dotted; }

In IE it looks beautiful, but in Netscape the results are a dotted line which is double thickness. Basically it looks like two single dotted lines, one on top of the other. What is the recommendation to get the dotted line to look consistent across all major browsers?

My second problem is worse. I have a double border around my three main tables. In IE the effect looks really neat, however in Netscape it just looks like a single line around the tables. Here is the coding I'm using for that in CSS:

.outerbox { border: #00CC00 solid 1;padding:0;background-color: #006600 }

.innerbox { border: #00CC00 solid 1;padding:0;background-color: #000000 }

In my HTML document the coding looks like this, in order to call the "outerbox" and "innerbox."

<table width="175" border="0" cellpadding="0" cellspacing="2" class="outerbox">
<tr>
<td align="center" valign="top" class="innerbox"></td>

As well, how do I get this to look the same across all major browsers? Any suggestions.

Thanks as always,

Enigmatic

[vkaryl]

I think the first thing you should be doing is writing html to look the way you want it to look in Mozilla/Firefox, Gecko/NS, Opera, THEN see what you can do to make it more or less right in IE. IE is the "wrong" browser, not the others.

[BTW, I was an IE user/devotee until about a month ago. I have seen the light, and it is NOT IE....]

[Enigmatic]

Okay you're right, it looks the same in FireFox too. So where can I find an up-to-date source (i.e. web site, book, etc.) that shows me how to properly code CSS, DHTML and HTML for the "correct" browsers? A really good source, one that shows more than the basics, but keeps it simple.

Thanks,

Ted

[isitreal]

Cascading Style Sheets, 2nd edition, by Eric Meyer.

That just came out, it's the definitive reference, along with Eric Meyer's website.

[Rambo Tribble]

I think you'll find it easier to get consistent results with a div set to the appropriate height and width, with suitable margins and padding, rather than an hr, which is subject to considerable interpretive variance.

You might try placing div's within your table cells for your border effects, if it is the cells that have double borders, or place the table within a div if it is the whole table that has the double border. (Obviously you will need borders on the table elements and divs, and padding on either the cells or div.)

[choster]

The styles you are applying are technically for the <hr />'s borders, not for the <hr /> itself, and it is only through the respective quirks of IE and Mozilla that you get the results you have-- Opera will give you yet another (a box around the line).

Styling <hr /> is a pain. IE (and NS 4) treats <hr /> as an inline element, whereas Gecko (Mozilla/Firebird) and Opera treat it as a block element (this has been the case since at least IE/NS 4 and Mozilla 0.4, or thereabouts). Thus, you need to apply color for the first and background-color for the latter and so on. The workaround that seems to be favored by Craig Saila, Stefan Huber, and others is to wrap the <hr /> inside a <div> and set the desired styles on the containing <div>, for instance

<style type="text/css">
div.line {border-top: 1px dotted #ccc; clear:both; margin: 0.5em 5% -0.5em; width:90%}
div.line hr {visibility:hidden;}
</style>

<div class="line"><hr /></div>

[Enigmatic]

First of all, I really appreciate all the advice and help. Thank you. I have a couple of questions though. If I want to adopt a standard that prevents me from having cross-browser compatibility issues, should I be adopting XHTML? If I used XHTML, would I still be having problems in IE, Netscape, Opera, Firefox, etc. with CSS and HTML showing up identically? I'm frankly tired of building web pages incorrectly that look great in IE and look terrible in every other browser. Is XHTML the answer?

I just wish someone had a handbook or guide that gave every proper way to use CSS and HTML. A guide that gave you the coding for both internal and external files that was compatible all the way back to IE and Netscape 4.0. And a standard that worked in all browsers and allowed web designers to build web pages that worked every time a visitor came to visit their site. Increasingly frustrated,

Enigmatic

[DrDoc]

You can use HTML 3.2 or HTML 4.01 and make it look the same in every browser back to IE/NN 4.

[isitreal]

And a standard that worked in all browsers and allowed web designers to build web pages that worked every time a visitor came to visit their site. Increasingly frustrated,

As a general rule, if you want your pages to almost always work, and display decently on the browsers you specified, and also don't want to debug IE 5x mac display errors, don't use positioned div/CSS, use a table for the basic page layout. Don't use or rely on the following CSS techniques:

float:
position:
display:
margin:

Test pages on NS 4 as you write the site, since debugging CSS for NS 4 is very difficult. When something doesn't work, ns 4 will probably crash, and it was probably either a css float or a margin that made it crash.

NS 4 has bad div support, bad CSS background: support. It has some table CSS support, bad border/margin. The more HTML page level styling you use, the better your page will degrade, it's a choice you have to make. If you use a table for all basic site structures the page degrades well in terms of keeping to the original layout and design, if you don't, it doesn't. If you use td width="210" instead of CSS width: 210px; ns 4 will display your intended layout more or less correctly.

If you want almost perfect page display, you'll probably need to put the navigation in a table too.

[oberon]

The solution given to the hr styling is a bit complicated :-) :

hr {width: 50%; height:1px; border:0; border-top: 1px dashed red; }

BTW, IE doesn't support the "dotted" property, it displays it as dashes unlike other browsers. Border: is a shorthand to set the all borders of a block, which means border-top AND border-bottom, Netscape was right.

[Enigmatic]

I've validated my first page using XHTML 1.0 Transitional and it looks identical in Netscape 7.0, IE 6.0 and Firefox 0.8. This is exactly what I wanted. I have also gotten the HR element to display properly, thanks to choster.

However, I can't seem to get the "innerbox" and "outerbox" elements to display the way I want. Basically I'm looking to do the following. Imagine a border with a 1 pixel light green line on the outside, a 2 pixel dark green line in the inside, and again another 1 pixel light green line on the outside. Therefore the entire border is actually 4 pixels wide. Apparently the .outerbox and .innerbox elements are improper XHTML 1.0 Transitional, so the browsers only show the 2 pixel dark green line. Does anyone know what would be proper coding in order to achieve the desired results and still remain compliant? Thanks,

Enigmatic

[SuzyUK]

border: #00CC00 solid 1;

1 what? ;)

try making it 1px..

that's a simple crossbrowser headache solved.. always declare your intended measurement.. otherwise it could be interpreted as px, em, %, cm...

Suzy

[oberon]

td.innerbox { color: white}

.outerbox { border: 1px solid #00CC00; background-color: red; width:175px; }

.innerbox { border: 1px solid #00CC00; background-color: #000000; }

<table cellspacing="2" class="outerbox">
<tr>
<td class="innerbox">content</td><td class="innerbox">content</td>
</tr><tr>
<td class="innerbox">content</td><td class="innerbox">content</td>
</tr>
</table>

Pixels? points? centimeters? Don't forget the unit!

[Enigmatic]

Thanks SuzyUK and oberon! Putting in the 1 px unit worked!

My final code looks like this:

CSS:

.outerbox { border: 1px solid #00CC00; padding:0; background-color: #006600 }

.innerbox { border: 1px solid #00CC00; padding:0; background-color: #000000 }

Now finally my first page looks consistent among all the major browsers. Thanks again. I appreciate the help everyone has given me.

-Enigmatic