Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    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.

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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>


    <!--START OF MAIN PARAGRAPH-->
    <p class="basemenustandard"><br><marquee><b>Welcome</b></marquee><br><br>
    main body text of page<br> &nbsp; &nbsp; &nbsp; &nbsp;_________________________</p>

    <!-- START OF DOUBLE COMBO -->
    <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>
    <!-- END OF DOUBLE COMBO-->



    <!--START OF SITE LINKS-->
    <p class="sitelinks">|<a class="sitelinks" href="index.htm" onFocus="if(this.blur)this.blur()">Main Menu</a>|&nbsp;|<a class="sitelinks" href="about us.htm" onFocus="if(this.blur)this.blur()">About Us</a>|&nbsp;|<a class="sitelinks" href="enquiries.htm" onFocus="if(this.blur)this.blur()">Contact Us</a>|&nbsp;|<a class="sitelinks" href="navigation.htm" onFocus="if(this.blur)this.blur()">Navigation Tips</a>|&nbsp;|<a class="sitelinks" href="legal.htm" onFocus="if(this.blur)this.blur()">Legal Stuff</a>|</p>
    <!--END OF SITE LINKS-->


    </BODY>
    </HTML>

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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;
    }
    Last edited by bazz; 05-13-2003 at 12:04 PM.

  • #5
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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

  • #7
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.)
    Last edited by liorean; 05-13-2003 at 06:14 PM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Oops sorry. I thouigh the css was ok since I had got the instructions off a well known site that i thought was good.

    I'll check validation and see what happens.

    thanks very much.

  • #9
    Regular Coder
    Join Date
    May 2003
    Location
    Manassas, VA, USA
    Posts
    220
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #10
    Senior Coder
    Join Date
    Mar 2003
    Location
    OHIO
    Posts
    1,438
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    [size=1]"If you want to be "in the biz" you are going to have to roll with the changes or get out, basically."

  • #11
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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,
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #12
    Senior Coder
    Join Date
    Mar 2003
    Location
    OHIO
    Posts
    1,438
    Thanks
    1
    Thanked 0 Times in 0 Posts
    [size=1]"If you want to be "in the biz" you are going to have to roll with the changes or get out, basically."

  • #13
    Regular Coder
    Join Date
    May 2003
    Location
    Manassas, VA, USA
    Posts
    220
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by STDestiny; 09-04-2003 at 11:35 PM.

  • #14
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #15
    Senior Coder
    Join Date
    Mar 2003
    Location
    OHIO
    Posts
    1,438
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    [size=1]"If you want to be "in the biz" you are going to have to roll with the changes or get out, basically."


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •