• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 417
  • Last Modified:

CSS in Netscape

Can you please look at www.eoni.com/~jwilcox/CSS/index.html and tell me what is wrong with it, and why it displays so weird in Netscape? I like how it looks in IE, and in TopStyle, but in Netscape it just looks silly. It even looks good in Opera with just one minor glitch...Here is my .css file.

P {text-align: left;  font-size: 12pt;  text-indent :  10px; }
HR { display: none}
A {
      font-size: 12pt; color: #ff0; text-decoration: none;}

A:HOVER {
      color: red
}
.interweave {font-size: 12pt; color: #ff0; text-decoration: none;}

DIV.Middle {  text-align: center; width: 70%;
                margin : 0;
                padding-left : 1%;
                padding-right : 1%;
                border-style : none;
                border-right-width : 1px;
                border-left-width : 8px;
                        float: left;
 }

 DIV.right {  text-align: center; width: 14%; background: #085380;
                 margin : 0;
                padding-left : 1%;
                padding-right : 1%;
                border-style : none;
                border-right-width : 1px;
                border-left-width : 8px;
                        float: left;
}
Q.large { font-size: 18pt; color: #fff;}
P.large {  font-size: 18pt; color: #fff; }
BODY { color: #000;  background: #fff }

DIV.left { color: #fff; background: #085380; text-align : center;
                margin : 0;
                padding-left : 1%;
                padding-right : 1%;
                border-style : none;
                border-right-width : 8px;
                border-left-width : 1px;
                width : 14%;
                float : left; }
                        
DIV.Header {  text-align: center; color: #fff; background: #085380; font-size: 16pt;    
                        margin : 0;
                padding-left : 1%;
                padding-right : 1%;
                border-style : none;
                border-right-width : 1px;
                border-left-width : 1px;
                        width: 100%;
                }
DIV.Body { color: #000; background: #37a7c8;  font-size: 12pt;
                     width: 100%;
                               margin: 0;
                               padding-left: 1%;
                               padding-right: 1%;
                               border-style: none;
                               border-right-width: 0px;
                               border-left-width: 0px;
                        }
                        
INPUT.Search {   }
A.OnWhite {  color: #085380; }
0
Psyc01
Asked:
Psyc01
  • 8
  • 8
  • 5
  • +2
1 Solution
 
nettromCommented:
you're probably wondering why the block elements do not get a real block background color, but only background coloring where there's text.

Netscape doesn't consider the block element (a DIV I'd assume) to be a whole block before you fiddle around with 'border'.  Try setting some border-properties in your definitions, like:

border: none;

and see what happens. :-)
0
 
mgfranzCommented:
You need to specify the background color for NN;

background-color:#085380;

For more on NN style issues check here;

http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm
0
 
jwilcoxCommented:
So, mgfranz, Netscape doesn't understand the background shortcut? It has to have background-color set?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
mgfranzCommented:
That is correct.
0
 
nettromCommented:
problem is, according to HTMLHelp's CSSCheck, 'background' is more supported than 'background-color'.  I could also not see any problem with the background color on Psyc01's page except for the beforementioned non-block backgrounds.

the background color for both the left and the right hand colums (DIVs) are like they should be (compared with IE).

I ran the stylesheet through HTMLHelp's CSSCheck (http://www.htmlhelp.com/tools/csscheck/), and it mostly complains about the absolute length units, and that colors and background colors aren't defined together.
0
 
mgfranzCommented:
The 'background' value is a IE4 syntax only, you can assign various values to background using - in NN4, the following <STYLE> tags are supported in NN4 background properties.

background-image
background-color

If you want to use layers you can get in to a whole bunch of options... for your project I would recommend it.
0
 
nettromCommented:
"The 'background' value is a IE4 syntax only"

I beg to differ.

according to webreview.com's CSS1 grid, 'background' is on the safe list, which suggests good support across the board of CSS-enabled browsers.

the master list (http://webreview.com/pub/guides/style/mastergrid.html) defines quite well what is and is not supported by Netscape, and the only problem related to background-color is the already mentioned bug (see note http://webreview.com/pub/guides/style/notes.html#532color)
0
 
mgfranzCommented:
Wierd...
<body style="background : Yellow none no-repeat scroll top;">

And;

<style type="text/css">
BODY {
      background : Yellow;
      background-attachment : scroll;
      background-position : top;
      background-repeat : no-repeat;
}
</style>

Work fine in both browsers...

My documentation states, "Although the 'Background' attribute is not officially available in Navigator 4, some combinations of values may work with it".  So either Netscape needs to update their Developer resources, or I need a new book...
0
 
Psyc01Author Commented:
Maybe Netscape just doesn't like the hex values I'm using inside of the style sheet then?
0
 
nettromCommented:
Psyc01, there's two immediate things I notice about your site when I compare Netscape to IE.

1: the white text in the right hand column is black, and therefore hard to read (not to mention that it's not the right size, but lets take a step at a time)

2: some of the text in the middle column has a medium blue background which doesn't cover the whole area it should, it's only the text that has the background color.

Problem #1 is a result of Netscape resetting the colors to my default colors after TABLE (a known problem), and since DIV.right doesn't have a color defined, the text becomes black.  I'd add "color: #ffffff;" to the properties for DIV.right.

Problem #2 is a known bug, Netscape will not color the whole block area untill you add a border property.  try adding "border: none;" to the properties for DIV.body.

I think that should cover most of it.

and Mark (mgfranz), yes Netscape should update their developer resources more often.  the Netscape CSS bug list (http://developer.netscape.com/support/bugs/index.html?content=known/css.html) is incredibly outdated (but mentions a few bugs though).
0
 
mgfranzCommented:
There were also some color references to #fff  You should always specify the entire RGB value, #ffffff
0
 
Psyc01Author Commented:
Okay, well now it all works great for me in Netscape except for the fact that the header(Search the Internet) and the Body are side by side, and bleed over my side column, rather than being one ontop of the other.  The other two colum/header pairs don't even appear so I'm guessing some weird wrapping stuff is going down....here is what I think is probably the relevant CSS. Thanks for all your help...
DIV.Header {  text-align: center; color: #fff; background-color: #085380; font-size: 16pt;  
                        width: 100%;
                        margin : 0;
                padding-left : 1%;
                padding-right : 1%;
                border-style : none;
                border-right-width : 1px;
                        border-left-width: 1px;
                float : left;
                }
DIV.Body { text-align: center; color: #000; background: #37a7c8;  font-size: 12pt;
                              width: 100%;
                     margin : 0;
                      padding-left : 1%;
                      padding-right : 1%;
                      border-style : none;
                      border-right-width : 1px;
                      border-left-width : 1px;
                              border-bottom-width: 10px;
                      float : left;
                        }

DIV.Middle {  text-align: center; width: 70%;
                margin : 0;
                padding-left : 1%;
                padding-right : 1%;
                border-style : none;
                border-right-width : 1px;
                border-left-width : 8px;
                        float: left;
 }
0
 
nettromCommented:
hmm... why are all those three DIVs floating?  I'm not sure if DIV.middle should be, but maybe that's the only way to make it work. :)

the content DIVs, .header and .body, should not be floating, which is probably what creates the problem with them being side-by-side.  I'd try removing 'float: left;' from DIV.header and DIV.body.
0
 
mgfranzCommented:
Yeah your just asking for trouble with the combination of float & div...  especially if used with images, actually I though float was for image use primarily...
0
 
Psyc01Author Commented:
Thank you, I need the float's for the three major columns, otherwise it doesn't wrap right, but the float in the header and body CSS definitions was the problems, now my only complaints are how wide of a spacing the columns have between them, and why does Netscape add this thin little border between the header and the footer?
Thank you very much for all your help, I promise I'll accept your comment as an answer nettrom!
0
 
mgfranzCommented:
You have an error in your page;

<SCRIPT TYPE="text/javascript"  LANGUAGE="Jav

Should be

<SCRIPT TYPE="text/javascript"  LANGUAGE="Java">

But the reason you have gaps is because you are using div tags instead of layers for Netscape.


                 
0
 
nettromCommented:
Psyc01, I believe the large margins between the three columns comes from Netscape not computing the width of the DIVs correctly.  it gives 14% to the left hand DIV, 14% to the right hand DIV, and then it gives 70% of what's left to the middle DIV.   instead of giving the lest one 70% of the window width.

re the space between header & footer: I fiddled around with a local copy here trying to remove it, but I was unable to. It probably takes some negative margins to get it to work, and since it looks nice in Opera and IE it would break those.
0
 
Psyc01Author Commented:
Adjusted points to 250
0
 
Psyc01Author Commented:
So there is nothing I can do at this point, really, to make Netscape a happy camper. As an side, what would be a good tag to replace my <q> with, because it obviously isn't the best solution for making my headers big! <P> doesn't work because it likes to add the whitespace beneath itself!

Thank you,
0
 
nettromCommented:
since they are heading, they should use h1-h6, probably h2 since they're not the main heading in the document.

problem with h1-h6 is of course that it's a block level element, meaning it gets a blank line before and after, just like P.

if you wanted a semantically correct page you'd use h1-h6 and not give a d*** about the blank space, which wouldn't show up in IE/Opera if you collapse the bottom margin of the header to 0, and the top margin of the paragraph underneath it to 0.  it would still show up in Netscape.

I'd probably use the DIV to control the font size, keep the good class name (header/heading) and then simply leave it at that.  wouldn't use any more elements besides it, so it would simply contain the text and nothing more.
0
 
ozoCommented:
Does this explain why some people are gettting invisible white on white text when viewing experts-exchange pages? or suggest a way to make ee's text visible by all browsers?
0
 
nettromCommented:
I think the problem with white on white text comes from the fact that E-E relies on support for two things:

1: background color in tables/table-cells
2: font color

they also use the usual body attributes for defining color in a document, in this case white background, black text.

they use font color to set some of the text to white ("Here are your options,..." for instance).  they use background color in tables/table-cells to set the background to a green tone.

if the browser doesn't support table background colors, but supports font color, you'll get white on white (the background of the document is set to white).

this is one of the well-known problems with presentational attributes (coloring, font faces etc) used in HTML.  if the browser doesn't support all the presentational attributes some or all of the content may be unreachable.

I know that E-E uses some CSS to define coloring of some of the content, and I'd hoped they actually take a step in the right direction and use _only_ CSS to define the colors.
0
 
mgfranzCommented:
You know you can always call the class anything you want to, i.e.

p.class {text-decoration: none;
      font-family:arial, helvetica;
      font-size:10pt
        }

And the tag;

<p class=class>My heading goes here.

Of course this still inputs the space as netrom stated, a <div> or <layer> would probably be better suited in this situation.

You may want to look into setting browser types as a function, then using either <div> or <layer> in the pages style properties.  Like this;

function initializeDocument()
{
  if (doc.all)
    browserVersion = 1 //IE4  
  else
    if (doc.layers)
      browserVersion = 2 //NS4
    else
      browserVersion = 0 //other
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 8
  • 8
  • 5
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now