CodingForums.com - style sheets not being read properly by mozilla?

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - style sheets not being read properly by mozilla? (http://www.codingforums.com/showthread.php?t=19881)

style sheets not being read properly by mozilla?

I rely heavily on an external .css. the whole positioning of my site depends on it as I dont use tables or divs or anything. Maybe it wasnt such a good idea since I downloaded mozilla this evening and fine that all the images are positioned fine but the text is just as if I forgot to label it with a class.

All my classes begin in the .css with a dot:

.logo
.bodytext
.imagemain
etc.

is it possible that I should label them with the appropriate lettrer first, like for text p.bodytext?

Or if some browsers dont read .css properly, is my page going to rener properly if I use tables as well? I have been trying to use /css only cos I will have over three thousand pages when I'm finished.

thanks.

Are you using external stylesheets? If so, do you have a doctype which triggers strict mode? If so, is your CSS document being served as text/css?

Upload an example... that might help.

heres the script for the page which I have cut images and imagemap script from to fit here I'll send the .css if you need it: -

<!DOCTYPE HTML PUBLIC "-//SoftQuad//DTD HoTMetaL PRO 5.0::19981022::extensions to HTML 4.0//EN">

<HTML>

<HEAD>
<TITLE>title of page</TITLE>
<META NAME="DESCRIPTION" CONTENT="">
<META NAME="KEYWORDS" CONTENT="">
<META NAME="rating" CONTENT="General">
<META NAME="revisit-after" CONTENT="14 days">
<LINK REL="STYLESHEET" HREF="style_mainmenu.css">

<SCRIPT LANGUAGE="JavaScript" src="scripts/clock.js"></SCRIPT>
</HEAD>

<BODY>

<p class="whitepage"></p>
<p class="mapbkgrnd"><IMG SRC="images/mapbackground.jpg"></p>
<img class="sitelogo" src="images/wslogovsm.gif">
<p class="flagstrip"><img src="images/flagstrip.jpg"></p>


<p class="basemenustandard"><br><marquee><b>Welcome</b></marquee><br><br>
main body text of page<br>        _________________________</p>


<FORM NAME="doublecombo">
<P><SELECT NAME="example" CLASS="mainselect1" SIZE="1" ONCHANGE="redirect(this.options.selectedIndex)">
<OPTION>Choose a Category</OPTION>
<OPTION>Accommodation</OPTION>
<OPTION>Activities</OPTION>
<OPTION>Attractions</OPTION>
<OPTION>Restaurants</OPTION>
<OPTION>Cities in general</OPTION>
<OPTION>Taxis</OPTION>
<OPTION>Counties</OPTION>
</SELECT>
<SELECT NAME="stage2" CLASS="mainselect2" SIZE="1"> <OPTION VALUE="#">Choose a Town/City</OPTION> </SELECT>
<input class="mainselect3" type="submit" name="btn1" value="Go"></P>
<script type="text/javascript" language="javascript" src="scripts/mainmenu.js">
</script>

</FORM>



<p class="sitelinks">|<a class="sitelinks" href="index.htm" onFocus="if(this.blur)this.blur()">Main Menu</a>| |<a class="sitelinks" href="about us.htm" onFocus="if(this.blur)this.blur()">About Us</a>| |<a class="sitelinks" href="enquiries.htm" onFocus="if(this.blur)this.blur()">Contact Us</a>| |<a class="sitelinks" href="navigation.htm" onFocus="if(this.blur)this.blur()">Navigation Tips</a>| |<a class="sitelinks" href="legal.htm" onFocus="if(this.blur)this.blur()">Legal Stuff</a>|</p>


</BODY>
</HTML>

but then again, you probably need this more. Apart from the text not sitting properly, the flagstrip has a problem. In IE6 it hugs the top of the window. In Mozilla, it drops away from it and then covers part of the logo. Is there a snipet I need to put in to make sure all browsers make it hug the top of the window?

thanks

BODY { font-family: "Arial", verdana, helvetica, sans-serif; font-size: 10pt; color: #336633; background-color: #004040; background-image : url("images/bckgrnd.gif"); overflow: hidden;
scrollbar-face-color:#D2F3DA;
scrollbar-base-color: #336633;
scrollbar-arrow-color: #336633;
scrollbar-3d-light-color: #336633;
scrollbar-dark-shadow-color: #336633;
scrollbar-highlight-color: #336633;
scrollbar-shadow-color: #336633;
background-attachment: scroll;
}

.flagstrip {position: absolute; top: 0px; left: 0px;
}
p.standard {
position: absolute; font: 10pt; font-family: "arial", verdana,
helevicta, sans-serif; color: #FFFF80; text-decoration: none; top: 75px; width: 300px; left: 175px; margin-top: 25px; height: 260px; overflow: auto; background-color: none;
}
p.basemenustandard {
position: absolute; z-index:2; font: 10pt; font-family: "arial", verdana,
helevicta, sans-serif; color: #004040; text-decoration: none; top: 102px; width: 300px; left: 348px; margin-top: 25px; height: 316px; overflow-y: scroll; background-color: none;
}
p.backbutton {
position: absolute; z-index: 1; font: 10pt; font-family: "arial", verdana,
helevicta, sans-serif; font-weight: bold; color: #FFFF80; text-decoration: none; top: 120px; width: 80px; left: 300px; height: 40px; overflow: hidden; background-color: none;
}
p.sitelinks {
position: absolute; z-index: 5; font: 8pt; font-family: "arial", verdana,
helevicta, sans-serif; color: #D2F3DA; text-decoration: none; top: 25px; width: 400px; left: 275px; height: 20px; overflow:hidden; background-color: none;
}
.title {
position: absolute; z-index: 1; font: 10pt; font-family: "arial", verdana,
helevicta, sans-serif; color: #FFFF80; font-weight: bold; text-decoration: none; top: 50px; width: 300px; left: 400px; height: 25px; overflow: hidden; background-color: none;
}
.scroller {
position: absolute; z-index: 1; font: 10pt; font-family: "arial", verdana,
helevicta, sans-serif; color: #004040; font-weight: bold; text-decoration: none; top: 150px; width: 300px; left: 300px; height: 25px; overflow: hidden; background-color: none;
}
.selectpanel {
position: absolute; z-index: 1; font: 10pt; font-family: "arial", verdana,
helevicta, sans-serif; color: #000040; text-decoration: none; top: 356px; width: 185px; left: 486px; height: 33px; overflow: hidden; background-color: #7477E2;
}
.imgscroller {
position: absolute; z-index: 1; font: 10pt; font-family: "arial", verdana,
helevicta, sans-serif; color: #FFFF80; text-decoration: none; top: 130px; width: 310px; left: 50px; margin-top: 25px; height: 100px; overflow: scroll; background-color: none;
}
.mapbkgrnd {
position: absolute; z-index: 1; top: 150px; width: 205px; left: 60px; height: 275px; overflow: hidden;
}
.imagemap {
position: absolute; z-index: 1; top: 153px; width: 200px; left: 63px; height: 270px; overflow: hidden; background-color: #D2F3DA;
}
.searchmenu {
position: absolute; z-index: 1; top: 250px; width: 500px; left: 200px; height: 60px; overflow: hidden; background-color: #ffff80;
}
p.textlinks {
position: absolute; z-index: 1; font: 10pt; font-family: "arial", verdana,
helevicta, sans-serif; color: #FFFF80; text-decoration: none; top: 410px; width: 300px; left: 365px; height: 40px; overflow: hidden; background-color: none;
}
.mainselect1 { position:absolute; background: #004040; color: #ffff80; font-family: Arial,Helvetica,Verdana;
font-size: 10pt; font-weight: bold; top: 75px; left: 300px;
}
.mainselect2 { position:absolute; background: #004040; color: #ffff80; font-family: Arial,Helvetica,Verdana;
font-size: 10pt; font-weight: bold; top: 75px; left: 450px;
}
.mainselect3 { position:absolute; background: #004040; color: #ffff80; font-family: Arial,Helvetica,Verdana;
font-size: 10pt; font-weight: bold; top: 75px; left: 615px;
}
.selectbtn { position:absolute; background: #FFFF80; color: #004040; font-family: Arial,Helvetica,Verdana;
font-size: 10pt; font-weight: bold; top: 10px; left: 525px;
}
img.logo { position:absolute; top: 25px; left: 25px;
}
img.main { position:absolute; top: 140px; left: 470px;
}
.img.sitelogo { position:absolute; z-index: 3; top: 25px; left: 25px; background-color: #ffff80;
}
img.frame { position:absolute; top: 200px; left: 480px;
}

.whitepage {
position: absolute; z-index: 1; top: 125px; width: 625px; left: 25px; height: 320px; overflow: hidden; border: 2px solid #888888; background: #D2F3DA;
}
img.index-frame { position:absolute; top: 217px; left: 25px;
}
.locationmap {position: absolute; top: 25; left: 700; background-color: #ffff80;
}
a.standardlink { font-family: "Arial", Verdana;
Helevicta; sans-serif; font-size: 10pt; font-weight: bold; text-decoration: none; color: #336633; background-color: none;
}
a.standardlink:link { font: 10pt "arial", verdana,
helevicta, sans-serif; font-weight: bold; text-decoration: none; color: #336633; background-color: none;
}
a.standardlink:visited {font: 10pt "arial", verdana,
helevicta, sans-serif; font-weight: bold; text-decoration: none; color: #336633; background-color: none;
}
a.standardlink:active {font: 10pt "arial", verdana,
helevicta, sans-serif; font-weight: bold; text-decoration: none; color: #336633; background-color: none;
}
a.standardlink:hover {font: 10pt "arial", verdana,
helevicta, sans-serif; font-weight: bold; text-decoration: none; color: #D2F3DA; background-color: #336633;
}
.emaillink { font-family: "Arial", Verdana;
Helevicta; sans-serif; font-size: 10pt; text-decoration: blink; font-weight: bold; color: #ff0000; background-color: none;
}
.emaillink:link { font: 10pt "arial", verdana,
helevicta, sans-serif; font-weight: bold; text-decoration: blink; color:#ffff80; background-color: none;
}
.emaillink:visited {font: 10pt "arial", verdana,
helevicta, sans-serif; font-weight: bold; text-decoration: blink; color:#ffff80; background-color: none;
}
.emaillink:active {font: 10pt "arial", verdana,
helevicta, sans-serif; font-weight: bold; text-decoration: blink; color:#ffff80; background-color: #ff0000;
}
.emaillink:hover {font: 10pt "arial", verdana,
helevicta, sans-serif; font-weight: bold; text-decoration: blink; color:#336633; background-color: ffff80;
}
a.sitelinks { font-family: "Arial", Verdana;
Helevicta; sans-serif; font-size: 8pt; text-decoration: none; color: #D2F3DA; background-color: none;
}
a.sitelinks:link { font: 8pt "arial", verdana,
helevicta, sans-serif; text-decoration: none; color:#D2F3DA; background-color: none;
}
a.sitelinks:visited {font: 8pt "arial", verdana,
helevicta, sans-serif; text-decoration: none; color:#D2F3DA; background-color: none;
}
a.sitelinks:active {font: 8pt "arial", verdana,
helevicta, sans-serif; text-decoration: none; color:#D2F3DA; background-color: none;
}
a.sitelinks:hover {font: 8pt "arial", verdana,
helevicta, sans-serif; text-decoration: none; color:#336633; background-color: #D2F3DA;
}

Can you upload a sample html and css file to your server and give us the link? If this is a content type problem, which is likely, we can only see for sure that way.

Well I'll give you the actual URL. I didnt want to big up my site before but since you have asked :)

Like I said at the top, I'm new to the desgin of pages and presently pretty crap. Any ideas would be taken on board.

http://www.ireland-info.com

thanks guys

Actually, if you haven't localised the problem so that you can give us only the snippet of it that causes the problem (and it's interactions), it's best to hand us the url - that way we can easily check it. In fact, as long as you're not trying to promote your site, it's often the best choice, since posts that are too long to get an overview of often get ignored or not looked at by people that would be interested in your problem and helping you with it.

Anyway, here's the rundown:

First, your site isn't valid. This is ok by me, but I just wanted you to note the fact. Read <http://diveintomark.org/archives/200..._help_you.html> and especially note point 4, for a reason why you should validate.

Your css is also invalid - but here the validator might come with some pretty good information.

You use font when you should use font-size
You use none as background-color (should be transparent or inherit)
The validator doesn't like "_" in a class or id tag, either (and browsers may have problems with it, too).
You use ";" instead of "," to separate your font-family values from eachother, so the next value gets parsed as a rule (which is invalid)
You use none in font-weight when you should use normal or inherit
You don't always put a unit after your numbers. This is needed except is special cases, e.g. line-height, font-weight, and 0

I can't find a reason why the stylesheet wouldn't work except for the invalid parts, but if you fix the validity, you might find the page doesn't behave that way any longer - it is often invalid code that is the source to mysterious errors. Also, you might want to check the reliability of your server, and finally see to that the page isn't cashed. (Both on client and proxies etc.)

Oops sorry. I thouigh the css was ok since I had got the instructions off a well known site that i thought was good. :o :o

I'll check validation and see what happens.

thanks very much.

Quote:

Originally posted by jkd
Are you using external stylesheets? If so, do you have a doctype which triggers strict mode? If so, is your CSS document being served as text/css?

Upload an example... that might help.

I'm ressurecting this old thread because it's basically what my problem is.

I have a page (well, a lot actually, but they all use the same header/footer PHP) that validates as XHTML 1.0 Strict, and the CSS validates as well.

In Mozilla (and in Opera 7's Full Screen mode, though that may be a bug in the beta), If I take the DOCTYPE out, the external CSS file loads fine, but if I put it back in, it seems like the CSS just isn't included.

Any ideas? Thanks!

-andrew

If you are on an Apache server there is a bug that does not allow Mozilla to upload stylesheets because it changes the mime type to text/plain instead of text/css.

I'll dig up the link for the info and get back to you on it.

MNS

Might this be a simple content-type problem? What content type does the css files get served as? It it's not 'text/css', you should try to correct it,

I'm calling the correct mime type:

<link rel="stylesheet" href="/html/global/styles.css.php" type="text/css" media="screen" />

<edit> and I added "AddType text/css css" to my httpd.conf</edit>

No, no, it's not the html file we are interested in. It's the HTTP headers sent by the server. If those doesn't serve it as 'text/css', moz doesn't even try to interpret it. (And it shouldn't, either, according to W3C.)

Go to <http://webtools.mozilla.org/web-sniffer/> and enter the addy of your css file there, and check the Content-Type header.

Even though you call the correct mime type the Apache server "serves" the wrong mime type. Mozilla being standards comliant will not load a style shett served as text/plain which is what the server bug does. Read the link I posted.

MNS