#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    3
    Rep Power
    0

    Red face CSS Not Working in Firefox?


    Hi, everyone!!

    I am going crazy with my external stylesheet. I have 3 of them...the 2 "minor" stylesheets are functioning as expected.

    However, my "main" stylesheet is not working (unfortunately, I cannot post the site...it is hosted locally).

    The problem with the stylesheet: my dd classes are not working (indenting) in firefox. They do indent in IE. In firefox, I get a standard bullet all the way down, no indentions. I'm sure it's something silly, but my eyes are blurry by now...lol...

    Could someone please take a look at this code? Suggestions?



    body {
    overflow-x:hidden
    }
    a {
    text-decoration:none
    }
    img {
    border: none;
    }
    p {
    font-family: arial;
    font-style: normal;
    font-variant: normal;
    font-weight: lighter;
    font-size: x-small;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    text-indent: 0ex;
    }
    dd {
    font-family: arial;
    font-style: normal;
    font-variant: normal;
    font-weight: lighter;
    font-size: x-small;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    text-indent: 0ex;
    display: list-item;
    list-style-type: square;
    }
    d1 {
    font-family: arial;
    font-style: normal;
    font-variant: normal;
    font-weight: lighter;
    font-size: x-small;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    text-indent: 2ex;
    display: list-item;
    list-style-type: none;
    }
    dd.2 {
    font-family: arial;
    font-style: normal;
    font-variant: normal;
    font-weight: lighter;
    font-size: x-small;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    text-indent: 5ex;
    display: list-item;
    list-style-type: none;
    }
    dd.3 {
    font-family: arial;
    font-style: normal;
    font-variant: normal;
    font-weight: lighter;
    font-size: x-small;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    text-indent: 7ex;
    display: list-item;
    list-style-type: square;
    }
    dd.4 {
    font-family: arial;
    font-style: normal;
    font-variant: normal;
    font-weight: lighter;
    font-size: x-small;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    text-indent: 9ex;
    display: list-item;
    list-style-type: none;
    }
    dt {
    font-family: arial;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    font-size: x-small;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    text-indent: 0ex;
    }


    thanks in advance!


    ~Erin
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Location
    Maryland, USA
    Posts
    14
    Rep Power
    0
    Can you post the HTML you are using as well? It looks like your dd.1 class is mistyped as "d1" but I'm not sure if that is what would be causing your issue.

    Just off the bat I can see some ways that your stylesheet can be condensed and cleaned up -- if you have to write the same style more than once, generally you're not doing it in the most efficient manner. For instance:
    Code:
    body {
    overflow-x:hidden
    }
    a {
    text-decoration:none
    }
    img {
    border: none;
    }
    p, dd, dt {
    font-family: arial;
    font-style: normal;
    font-variant: normal;
    font-size: x-small;
    word-spacing: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    text-indent: 0ex;
    }
    
    p, dd {
    font-weight: lighter;
    }
    dd {
    display: list-item;
    list-style-type: square;
    }
    dd.1 {
    text-indent: 2ex;
    list-style-type: none;
    }
    dd.2 {
    text-indent: 5ex;
    list-style-type: none;
    }
    dd.3 {
    text-indent: 7ex;
    }
    dd.4 {
    text-indent: 9ex;
    list-style-type: none;
    }
    dt {
    font-weight: bold;
    }
    should produce the same result that you currently have. However, it won't change anything and therefore won't fix the problem you're having (unless the mistyped "dd.1" was the problem), so please post the HTML markup so I can see how you have this structured?
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    You are using invalid data types. Class and id tokens may begin with a letter only. See 6.2 SGML basic types, specifically this:
    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    3
    Rep Power
    0
    solaera, thanks for the tips...the "d1" class is a typo, but not the issue...it was something i was messing around with to see if i could fix this, and forgot to change it back. i cleaned up my code as you suggested, and, like you said, it didn't fix anything, didn't change anything...but it is a lot cleaner now!

    i am calling the stylesheet with this code:

    Code:
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> (in the head, of course..)
    i am calling the actual style like this:

    Code:
    <dt>xxxxxxxxxxxxxxxx</dt>
    	<dd><i>xxxxxxxxxxxxxxxx</i></dd>
    	<dd>xxxxxxxxxxxxxxxx</dd>
    	<dd class="1">xxxxxxxxxxxxxxxx</dd>
    	<dd class="2"><i>xxxxxxxxxxxxxxxx</dd>
    	<dd class="3">xxxxxxxxxxxxxxxx</b></i></dd>
    	<dd>xxxxxxxxxxxxxxxx</dd>
    	<dd class="1">xxxxxxxxxxxxxxxx</dd>
    	<dd>xxxxxxxxxxxxxxxx</dd>
    	<dd class="1">xxxxxxxxxxxxxxxx</dd>
    	<dd>xxxxxxxxxxxxxxxx</dd>

    like i said, this is working both in IE and Firefox with my other 2 stylesheets, just not this one...



    Gary, thanks for the documentation, really...but honestly, i don't understand what it's saying I am using letters, and numbers, and a period, which should be valid according to that statement? unless, am i really missing something here (more than possible...too early for my brain to fully function!!)

    Thank you both for your help!

    ~Erin
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    must begin with a letter ([A-Za-z])
    class="3" is not valid. You may have numbers in the token, but not as the first character.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    3
    Rep Power
    0
    Gary,

    Thank you so much for putting up with my idiocy this morning...lol!!

    I changed the classes from 1, 2, etc to a, b, etc and now everything works perfectly!

    Thank you so much for your help!!

    Have a fantastic Thanksgiving!!

    ~Erin

IMN logo majestic logo threadwatch logo seochat tools logo