SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    South Korea
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Problems w/ Mozilla and Netscape

    i have a stylesheet which looks something like this:
    Code:
    <style type="text/css">
    body { 
    scrollbar-3dlight-color: #D3D3D3;
    scrollbar-arrow-color: #35393D;
    scrollbar-base-color: #E5E5E5;
    scrollbar-darkshadow-color: #D3D3D3;
    scrollbar-face-color: #E5E5E5;
    scrollbar-highlight-color: ;
    scrollbar-shadow-color: #D3D3D3; 
    scrollbar-track-color: #E5E5E5;
    }
    
    a:link { text-decoration: none; font-family: Verdana; font-size: 10px; color: #3F586F };
    a:active { text-decoration: none; font-family: Verdana; font-size: 10px; color: #3F586F };
    a:visited { text-decoration: none; font-family: Verdana; font-size: 10px; color: #3F586F };
    a:hover { text-decoration: none; font-family: Verdana; font-size: 10px; color: #35393d };
    
    .secondary { text-decoration: none; font-family: Verdana; font-size: 10px; color: #FEFEFE };
    .secondary a:link { text-decoration: none; font-family: Verdana; font-size: 10px; color: #FEFEFE };
    .secondary a:active { text-decoration: none; font-family: Verdana; font-size: 10px; color: #FEFEFE };
    .secondary a:visited { text-decoration: none; font-family: Verdana; font-size: 10px; color: #FEFEFE };
    .secondary a:hover { text-decoration: underline; font-family: Verdana; font-size: 10px; color: #FEFEFE };
    
    .main { text-decoration: none; font-family: Verdana; font-size: 10px; color: #35393d };
    .textbox { background-color: #E5E5E5; font-family: Verdana; font-size: 10px; color: #35393d; border: 1 solid #4A4D4F };
    .submit_button { background-color: #E5E5E5; font-family: Verdana; font-size: 10px; color: #35393D; border: 1 solid #35393D };
    </style>
    I call these styles wherever i need them using the class="something" coding. This works perfectly fine in IE, but in Mozilla and Netscape, they just appear as default font: Times New Roman, thus making the site look completely awkward. Im not really good at css stylesheets so if anyone can tell me why its doing this, and how to fix it, it would be appreciated. Thank you.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post an example of where you have used the class="something" code too.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    South Korea
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well lets say i have a table and display text.
    Code:
    <table width="100%" cellpadding="0" cellspacing="0" class="main"><tr><td>Text should appear here with the main stylesheet</td></tr></table>

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should be doing this instead:
    Code:
    <table width="100%" cellpadding="0" cellspacing="0"><tr><td><p class="main">Text should appear here with the main stylesheet</p></td></tr></table>
    i.e. Use HTML tags semantically, so text goes inside a paragraph tag (or a li, label, or whatever).

    Not sure why you're having problems (Paul O'B will be along in a while to explain it in detail ), but I do know that some browsers don't like text styles to be applied to containing blocks like tables.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    South Korea
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    errr, the problem is, the whole site was coded like that, so it'd be a BIG hassle to change everything. Is there another way?

  6. #6
    SitePoint Zealot teboose's Avatar
    Join Date
    Aug 2004
    Location
    Kansas City, Kansas
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some browsers choke if you don't provide a generic font (or at least more than one font) ... try making your font-family: Verdana, sans serif;

    Hope this helps.

  7. #7
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a:link { text-decoration: none; font-family: Verdana; font-size: 10px; color: #3F586F };
    See that trailing semicolon? You've got one on virtually every line in the stylesheet. It should't be there, and it's going to cause any standards-weenie browser to have small furry offspring. Delete the semicolons outside the curly brackets, and things should work much better.

  8. #8
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And while I'm here...
    Code:
    .submit_button { [...] border: 1 solid #35393D }
    1 what? point? pixel? mile? aardvark? Specify a unit, or the standards-weenie browsers will freak at that, too.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by blufive
    1 what? point? pixel? mile? aardvark?
    Is this:
    Code:
    border:1aardvark solid #35393D
    smaller than this.
    Code:
    border:1elephant solid #35393D
    I think you're on to something there


    Blufives right good browsers hate invalid code - so always run your css and html through the validator if somethings not right and chances are there be a few typos floating around.

    Paul

  10. #10
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    South Korea
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thanks guys for the help.. it works perfect now... However, there is another question i'd like to ask. I have this for scrollbars:
    Code:
    body { 
    scrollbar-3dlight-color: #D3D3D3;
    scrollbar-arrow-color: #35393D;
    scrollbar-base-color: #E5E5E5;
    scrollbar-darkshadow-color: #D3D3D3;
    scrollbar-face-color: #E5E5E5;
    scrollbar-highlight-color: ;
    scrollbar-shadow-color: #D3D3D3; 
    scrollbar-track-color: #E5E5E5;
    }
    This works for IE, but doesn't once again for other browswers. what's wrong with this part?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    This works for IE, but doesn't once again for other browswers. what's wrong with this part?
    The thing thats wrong with it is that it isn't part of the css specs

    Its IE's proprietary code so it only works in IE. The code won't validate but it won't do any harm either.

    Paul

  12. #12
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works for IE, but doesn't once again for other browswers. what's wrong with this part?
    Those CSS attributes are MS-proprietary and only work in IE. There's no way to do anything similar in other browsers, AFAIK.
    Is this:
    border:1aardvark solid #35393D


    smaller than this?
    border:1elephant solid #35393D
    Prob'ly, but the browser support is TERRIBLE.


Bookmarks

Posting Permissions

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