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!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Problems with Netscape

Status
Not open for further replies.
JScannell

JScannell

Programmer
Jan 9, 2001
306
0
0
US
I am sure that everyone has had problems with this. However, it's my first time and I don't know where to go. I only know what doesn't work!

Compatibiliity issues between IE and Netscape on two fronts: Windows and MAC. The solutions may be the same for both.

1. First problem is including external .css files. Do I use <link...> or <style>@import</style>?? What is the correct format for referencing the file name? What if all .css files are found in a separate folder on the web site? In order to get the file to even load I had to move the .css to the home directory and use this syntax inside the <head></head>:
<style type=&quot;text/css&quot; media=&quot;all&quot;>
@import url(utility.css);
</style>

I actually want the .css files in a folder named StyleSheets so this code would work:
<style type=&quot;text/css&quot; media=&quot;all&quot;>
@import url(StyleSheets\utility.css);
</style>
but it doesn't. I even tried a / with no luck.

2. Once loaded, why can't I reference a class=&quot;classname&quot; syntax with any table tags? (e.g. table, td) The following code should produce a very nice bordered set of tables with text inside but it doesn't. Each of the classes are defined in utility.css:
<center>
<table><tr><td class=&quot;Image_table1&quot;>
<table><tr><td class=&quot;Image_table2&quot;>
<table><tr><td class=&quot;Image_table3&quot;>
<TABLE BGCOLOR=White WIDTH=&quot;500&quot;>
<tr>
<td>Some nice text</TD>
</tr>
</table
</td></tr></table>
</td></tr></table>
</td></tr></table>
</CENTER>

Classes found in utility.css:
.Image_table1
{
border-width: 20;
border-style: ridge ridge ridge ridge;
border-color: white
}

.Image_table2
{
border-width: 5;
border-style: solid;
border-color: yellow
}

.Image_table3
{
border-width: 2;
border-style: solid;
border-color: green
}

Any help would be greatly appreciated.

Thanks,
Jerry Scannell

Jerry Scannell
JerryScannell@cox.net or
JScannell@citystatecomputer.com
 
Sort by date Sort by votes
Well, for question #1, you can use either of the methods you listed to reference the external stylesheet. The advantage of using the @import is that it will hide those style rules from older browsers. They will see the unstyled version of your site. Web paths always use forward slashes, so you definately need to change that in your example.

Here's the link syntax that should work:
<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; href=&quot;StyleSheets/utility.css&quot; />

And here's the @import syntax that should work:
<style type=&quot;text/css&quot; media=&quot;all&quot;>@import &quot;StyleSheets.utility.css&quot;;</style>

Question #2: Surely you can use the box model to creat a <div> box and fully replace the nested table thing you have going there. BrainJar has a great box positioning article/tutorial here -
Hope that helps.

Cheers, Faded
 
Upvote 0 Downvote
Oops! Typo.

Here is the @import syntax that should work:
<style type=&quot;text/css&quot; media=&quot;all&quot;>@import &quot;StyleSheets/utility.css&quot;;</style>

Sorry,

Faded
 
Upvote 0 Downvote
Faded,

Thanks for the fast response. I notice in your examples that you don't use the url() designation in the @import command. Is that an oversight or doesn't it matter?

Jerry

Jerry Scannell
JerryScannell@cox.net or
JScannell@citystatecomputer.com
 
Upvote 0 Downvote
Not an oversight. It's not needed.

Did you get your stylesheet to load using either of the methods?

Cheers, Faded
 
Upvote 0 Downvote
It seems to but I still have a problem setting the class for a tag. I went to the site where the box model is described and wasn't sure if that could help me.

A basic question is shouldn't I be able to assign a &quot;class=xxx&quot; to any HTML tag like I can with IE??

Jerry


Jerry Scannell
JerryScannell@cox.net or
JScannell@citystatecomputer.com
 
Upvote 0 Downvote
It seems to work when I open it in Netscape 7.0 and Opera 7 To assign a class attribute to a tag is exactly the same cross browser, so everything should be fine. What do you see when you open it in Netscape?

The link I gave CAN help you, but only if you're willing to scrap the table and do it all in CSS using the box model instead of tables. If you want to continue with the table, the link will not help.
 
Upvote 0 Downvote
Did you see the same table style with IE as well? When I run it against netscape, I get the rectangle but no border style and colors.

Jerry


Jerry Scannell
JerryScannell@cox.net or
JScannell@citystatecomputer.com
 
Upvote 0 Downvote
All the same. The color of the ridge varies slightly, but it is there and all borders are the same on NN7, Opera 7.2, IE6,IE5.5, and IE5.01 Running on Win2K.

Faded
 
Upvote 0 Downvote
I'd be inclined to address the stylesheet like this:
[tt]
<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/StyleSheets/utility.css&quot; />
[/tt]
So it always looks for the StyleSheets directory relative to the site's root directory, rather than the current page's directory. You can use the same approach in the @import statement if you prefer it.

As to your disappearing borders, what do you mean by &quot;Netscape&quot;? What version?

Incidentally, you can almost always swap a single-cell table for a <div>. Try this for a slightly less cluttered look:
[tt]
<center>
<div class=&quot;Image_table1&quot;>
<div class=&quot;Image_table2&quot;>
<div class=&quot;Image_table3&quot;>
<div style=&quot;background: white; width=500px;&quot;>
Some nice text
</div>
</div>
</div>
</div>
</center>
[/tt]
Though you'll have to play around with some padding and width attributes of the three classes to get it looking the same.

-- Chris Hunt
 
Upvote 0 Downvote
Chris,

I don't appear to have a problem loading the .css file. The only problem I see is relative to colors and border widths on table and td elements.

I also had to change my body style's background color from black to white because it seemed to carry over to the other styles regardless of what color attribute I put there!

I am using Netscape 7.1 the newest one, I guess. 'Faded' says it works with version 7.0 Could there be such a difference from 7.0 to 7.1??

Thanks for the heads up on using div's instead of the tables. I'll try it in a minute.

jerry



Jerry Scannell
JerryScannell@cox.net or
JScannell@citystatecomputer.com
 
Upvote 0 Downvote
OK, here's what I came up with using the box model instead of the nasty nested tables...

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;<html xmlns=&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>
<head>
<title>Nested DIV Boxes</title>
<style>
html,body {text-align:center;}
#outsidebox {
border:10px ridge #fff;
padding:2px;
width:500px;
}
#middlebox {
border:5px solid yellow;
padding:2px;
}
#insidebox {
border:2px solid green;
}
</style>
</head>
<body>
<div id=&quot;outsidebox&quot;>
<div id=&quot;middlebox&quot;>
<div id=&quot;insidebox&quot;>
Some nice text here...
</div>
</div>
</div>
</body>
</html>

Should work.

Faded
 
Upvote 0 Downvote
I did it using divs, too. I, however, used class=&quot;classname&quot; instead of id=&quot;classname&quot; with classname prefaced with a #. I never knew what the # designation meant in a style sheet before now. It's tied to a particular tag's id, huh? Why should you tie a style to a particular element with a unique id instead of a class that can be used over and over?? What if you want to reuse the style?

Why is there two ways to do the same thing?


Jerry Scannell
JerryScannell@cox.net or
JScannell@citystatecomputer.com
 
Upvote 0 Downvote
Jerry, it usually goes down to personal preference and established techniques. Most of the people define the general page layout containers using the ids (since the containers will never be reused) and classes for specific elements within these containers. But there are no display wise differences between the two techniques.
 
Upvote 0 Downvote
The id is also used by javascript/dhtml to reference a specific object.

The class is not used by javascript/dhtml in the same way.

That is probably why there are two methods of achieving a similar end result.

document.getElementById('uniqueid').style.color='red';

As you see, it referenced one specific object and added a style attribute. You could do that will shared classnames.

Althought, you can do this:

document.getElementById('uniqueid').className='sharedclass';

Does that answer any questions?

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Edit: ...you could not do that... :p

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
317
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
156
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
119
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
144
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
62
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top