Netscape and CSS - AARRGGGHH

calista · Feb 27, 2002

I am trying to make my intranet site Netscape compatible (or it's trying - one or the other). So far, I've figured out Netscape (6.2, BTW) doesn't like position:fixed; or the font attibutes. The position:fixed; attribute isn't too big a deal, because I have only one style sheet that uses it, and it's only in one place. I can work around that, but I welcome any suggestions regarding that. The font is a bigger issue. I use the font attribute rather liberally, so how do I get Netscape to recognize it?

Thanks! Calista :-X
Jedi Knight,
Champion of the Force

starway · Feb 27, 2002

Stylesheets works good in all browsers if done properly.
Post your code here.

calista · Feb 28, 2002

OK, here is a portion of my style sheet:

.Menu {
background : #F0F8FF;
width : 20%;
font : bold larger;
vertical-align : top;
position : fixed;
}

Here's how I use it:
<TITLE>Test Netscape</TITLE>

<LINK REL="STYLESHEET" TYPE="text/css" HREF="CommonFiles/StyleSheets/TableStyle.css">
</HEAD>
<BODY>

<TABLE>
<TR>
<TD>
<TABLE CLASS="Menu">
<TR>
<TD>
<IMG SRC="#Application.ImagePath#MyImage.gif" WIDTH="143" HEIGHT="48" BORDER="0" ALT="">
</TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#HomePage.cfm">HOME</A></TD>

</TR>
<TR>
<TD><A HREF="#Application.RootPath#Administrative/AdminIndex.cfm">ADMINISTRATIVE</A></TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#Directory/DirectoryIndex.cfm">DIRECTORY</A></TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#Discussion/ForumPage.cfm">DISCUSSION</A></TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#Product/ProductHome.cfm">PRODUCTS</A></TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#Proposals/ProposalHome.cfm">PROPOSALS</A></TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#Reference/ReferenceHome.cfm">REFERENCE</A></TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#Search/DocSearchForm.cfm">SEARCH</A></TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#Services/ServiceList.cfm">SERVICES</A></TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#Teams/TeamPage.cfm">TEAMS</A></TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#TimeSheet/TimeIndex.cfm">TIME SHEET</A></TD>
</TR>
<TR>
<TD><A HREF="#Application.RootPath#Tools/ToolIndex.cfm">TOOLS</A></TD>
</TR>
</TABLE>
</TD>
<TD CLASS="MainPage">







</TD>
</TR>
</TABLE>

What happens is this: the menu, which is supposed to be on the left hand side in between a header and a footer is shown all the way at the top, overlaying part of the header. If I remove "position:fixed;", that problem is resolved, although I'm not sure what happens on the rest of the pages. Since this is my basic page template, I want to get that looking OK first. I'm sure I had a reason for adding "position:fixed;". I think it was to keep the menu right under the header, so the menu didn't float down the screen if the number of lines displayed was longer than the table. The fonts don't register at all. Any assistance is welcome.

Thanks! Calista :-X
Jedi Knight,
Champion of the Force

starway · Feb 28, 2002

First of all, when there are errors in CSS definitions browsers interpret them differently. That means that if in some browser you see what you wanted to do, it doesn't mean that your code is OK unless you test it in others.

I tested your code in IE5, Netscape 6.2 and Opera 6.0. Can you tell me what's wrong with Netscape? It does exactly what you told it to do. As IE and Opera did, with few comments.

I would like to recommend you to set the font properties correctly, by setting all attributes. Like this:

font { bold 14pt tahoma,arial,sans-serif; }

This will make it looks exactly the same in all browsers. This also allow you to remove [tt]larger[/tt]. Your definition [tt]font : bold larger;[/tt] seems to work as expected only in IE.

If you only set the background colour I'd change [tt]background : #F0F8FF;[/tt] to [tt]background-color: #F0F8FF;[/tt]

[tt]width : 20%;[/tt] is not recognized by IE5, and the width of table depends on text links in it (Netscape and Opera are OK).

I can't tell anything about [tt]position : fixed[/tt] because I don't have your environment to see what happens there.

I recommend you to check CSS part of GevGuru site:

http://www.devguru.com/Technologies/css/quickref/css_index.html

Also read there what's written about [tt]position : fixed[/tt].

CSS sometimes looks like a game or puzzle, and the best way to learn it by my opinion is to follow cross-browser solutions only and test your code in different environments.
good luck.

calista · Feb 28, 2002

Thanks for the info on fonts! That seems to work, now. You didn't see the other problem because you didn't have my header and footer code. Anyway, I've determined that it is related to the Cold Fusion I am running, so I'm on my way over to that forum to ask there. Just FYI, if I code the page as straight HTML and bypass CF, it works. Calista :-X
Jedi Knight,
Champion of the Force

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Netscape and CSS - AARRGGGHH

calista

Programmer

starway

Programmer

calista

Programmer

starway

Programmer

calista

Programmer

Similar threads

Part and Inventory Search

Sponsor