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 IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Styles not applying in other browsers?

Status
Not open for further replies.
J741

J741

Technical User
Jul 3, 2001
528
CA
I have 3 files which contain CSS declarations and html code. I use server-side includes to combine them into one final web page. The result looks good in IE but not in Firefox or Netscape. Here is a basic sample of the code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<link rel="stylesheet" type="text/css" href="/MySytle.css">
</HEAD><BODY>
<!--#include file="/PagePart2.shtm" -->
<!--#include file="/PagePart3.shtm" -->
</BODY>

The files 'PagePart2.shtm' and 'PagePart3.shtm' are structured as follows:
Code: 
<link rel="stylesheet" type="text/css" href="/MySytle2.css">
<!--My HTML code goes here -->

Now when the page is structured like this, it's a lot easier for me to manage things at the server, and it works great with IE, but when I try to use Firefox or Netscape, the style sheets referenced by 'PagePart2.shtm' and 'PagePart3.shtm' do not take effect, and my layout gets screwed up.

If I change from this code:
Code: 
<link rel="stylesheet" type="text/css" href="/MySytle2.css">
to this code:
Code: 
<!--#include file="/MyStyle2.css" -->
then things work fine in IE, Firefox, and Netscape, but I don't want to have all my style sheets visible when the end-user selects 'View - Source' in the web browser.

So, can anyone tell me why Firefox and Netscape do not process all three of the <LINK> directives?

- James.

My memory is not as good as it should be, and neither is my memory.

I have forgotten more than I can remember
 
Sort by date Sort by votes
Your end styles will need to be available to the end users (and the browser) in order for your css to work. If you think your css is so amazingly written that nobody should see it, stay away from publishing it on the net.
 
Upvote 0 Downvote
but I don't want to have all my style sheets visible when the end-user selects 'View - Source' in the web browser.
Click to expand...
That's the way the web works. If you want your users to see your page, they have to be able to see the file - after all, their web browser needs the file to be able to use it.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<link rel="stylesheet" type="text/css" href="/MySytle.css">
</HEAD><BODY>
<!--#include file="/PagePart2.shtm" -->
<!--#include file="/PagePart3.shtm" -->
</BODY>

The files 'PagePart2.shtm' and 'PagePart3.shtm' are structured as follows:
Code: 
<link rel="stylesheet" type="text/css" href="/MySytle2.css">
<!--My HTML code goes here -->
Click to expand...
[blue]<link>[/blue] statements belong in the <head>, not the <body>. This may be where you're going wrong. And remember, you're using server-side includes...which means that your end user never sees [blue]<!--#include file="/PagePart2.shtm" -->[/blue], they simply see the contents of PagePart2.shtm.

Try doing View Source on your site, then post the contents here. It'll help diagnose the problem better.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
Your end styles will need to be available to the end users (and the browser) in order for your css to work.
Click to expand...

I am aware of this, but the first style, which is applied with the first <link> is applied in all 3 browsers, and also has the effect that when the user slects 'View - Source' in the web browser, all of the CSS source code is not displayed, only the <link> reference to the style sheet.

But what I am much more interested in is a better understanding of WHY the second and third <link> statements seem to be ignored in Firefox and Netscape, but not IE.

- James.

My memory is not as good as it should be, and neither is my memory.

I have forgotten more than I can remember
 
Upvote 0 Downvote
But what I am much more interested in is a better understanding of WHY the second and third <link> statements seem to be ignored in Firefox and Netscape, but not IE.
Click to expand...

Looking at your code, it seems that the link statement is within the body, not the head:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<link rel="stylesheet" type="text/css" href="/MySytle.css">
</HEAD><BODY>
[i][gray]<!--#include file="/PagePart2.shtm" -->[/gray][/i]
<link rel="stylesheet" type="text/css" href="/MySytle2.css">
<!--My HTML code goes here -->

[i][gray]<!--#include file="/PagePart3.shtm" -->[/gray][/i]
<link rel="stylesheet" type="text/css" href="/MySytle3.css">
<!--My HTML code goes here -->
</BODY>

Why not simply move the <link> statements out of the SSI-included files PagePart2.shtm and PagePart3.shtm, and into the main body?

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
J741 said:
If I change from this code:
Code: 
<link rel="stylesheet" type="text/css" href="/MySytle2.css">
to this code:
Code: 
<!--#include file="/MyStyle2.css" -->
then things work fine
Click to expand...

Perhaps your inconsistency in file naming has something to do with it not working?

In the first example, you're importing "MySytle2.css" (with "style" spelled incorrectly). In the second, you're spelling it correctly.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
<link> statements belong in the <head>, not the <body>. This may be where you're going wrong.
Click to expand...

Ah! I suppose that makes sense. This is something I did not know. (none of the CSS tutorials I found on-line seem to mention this). But then why did it work in IE ? *DAMN YOU MICROSOFT*

Perhaps your inconsistency in file naming has something to do with it not working?
Click to expand...

Uhm, no. That's just my late-night typo in my example posted here. Thanks.

Why not simply move the <link> statements out of the SSI-included files PagePart2.shtm and PagePart3.shtm, and into the main body?
Click to expand...

Well, I am trying to completely isolate different parts of the same page in order to try and simplify back-end manageability. For example, all styles and content associated with a news feed should be completely seperate from the styles and content associated with the page footer. This way, If we choose to remove the news feed at some later date, we can simply delete the folder containing all CSS, JS, and HTML files associated with the news feed, and delete the #include directive in the main web site page, without affecting anything else on the web site, and without leaving behind any code remnants (which could make me wonder what the hell was going on three years from now).


Thanks for the feedback everyone. It's greatly appreciated.

- James.

My memory is not as good as it should be, and neither is my memory.

I have forgotten more than I can remember
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
636
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
579
Mike Lewis
Mike Lewis
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
957
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
592
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top