1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Strange Firefox style sheet problem

Discussion in 'CSS' started by Bosse, Jun 7, 2005.

  1. #1
    Hi,

    I am trying ro learn CSS and designing without using frames or tables. My testpage works fine in IE6 and Opera 8 but in firefox 1.0.4 the background images and colors do not show. I did however solve it but this is where it gets strange. Firefox does not see the first lines in the CSS (I checked it with the "view formatted source". Here is an excerpt from my css:

    This is not working:
    <style type="text/css">

    <!--
    body {font-size: 100.01%;
    text-align: center;
    background:#D0AA7D url(bgtile.gif) repeat;
    margin: 0px;
    padding: 0px;
    min-width: 776px;
    }

    a:link.huvud {color:#80ff00;}
    a:visited.huvud {color:#FF0000;}
    a:active.huvud {color:#808080;}
    a:link.menylink {color:#D0AA7D;}
    a:visited.menylink {color:#FF0000;}
    a:active.menylink {color:#808080;}

    .wrapper {margin: 0px auto;text-align: left;
    width: 776px;
    background-color:#D0AA7D;
    }
    -----
    But this is working!
    <style type="text/css">

    body {font-size: 100.01%;
    text-align: center;
    background:#D0AA7D url(bgtile.gif) repeat;
    margin: 0px;
    padding: 0px;
    min-width: 776px;
    }

    <!--
    body {font-size: 100.01%;
    text-align: center;
    background:#D0AA7D url(bgtile.gif) repeat;
    margin: 0px;
    padding: 0px;
    min-width: 776px;
    }

    a:link.huvud {color:#80ff00;}
    a:visited.huvud {color:#FF0000;}
    a:active.huvud {color:#808080;}
    a:link.menylink {color:#D0AA7D;}
    a:visited.menylink {color:#FF0000;}
    a:active.menylink {color:#808080;}

    .wrapper {margin: 0px auto;text-align: left;
    width: 776px;
    background-color:#D0AA7D;
    }

    So when I place the bodytag OUTSIDE (and inside) it works in Firefox (and in IE6, Opera 8 and Netscape 8).

    Any ideas why?
    SEMrush
    Bosse
     
    Bosse, Jun 7, 2005 IP
    SEMrush
  2. TwisterMc

    TwisterMc Mac Guru

    Messages:
    972
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    TwisterMc, Jun 7, 2005 IP
  3. nevetS

    nevetS Evolving Dragon

    Messages:
    2,544
    Likes Received:
    211
    Best Answers:
    0
    Trophy Points:
    135
    #3
    can you point us to a sample page?

    It looks like you have a comment tag "<!-- " but no closing comment tag "-->" - but I'm not sure what it looks like in your actual stylesheet. That's the only thing that looks funky right off the bat to me.
     
    nevetS, Jun 7, 2005 IP
  4. Bosse

    Bosse Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I just posted the first part of the css. There is a closing tag in my css so that is not the problem. The strange thing is why does it only work in Firefox/netscape when I put the Body-section OUTSIDE the comment tag? And in order to get it to work in Opera and IE I have to include the Body-section once more but this time INSIDE the comment tag (as it should...?). So the same part is repeated twice. It is working right now but it does not feel good an I really would like to know why this works. And why it did not work with only one body-section in Firefox. The validation turned out fine btw.
     
    Bosse, Jun 7, 2005 IP
  5. nevetS

    nevetS Evolving Dragon

    Messages:
    2,544
    Likes Received:
    211
    Best Answers:
    0
    Trophy Points:
    135
    #5
    The comment tag doesn't need to be in there at all. <style type="text/css"> designates what follows until </style> to be a stylesheet. If you are linking to an external stylesheet, you don't need the <style type="text/css> tag, as the declaration is covered by the link rel="stylesheet" tag.

    More than likely what is happening is firefox is reading the comment tag and ignoring the text, although the standard comment designator for stylesheets is /* */ - which is probably what IE and Opera are looking for.

    Try moving it to an external stylesheet and seeing if the differences are still occurring.

    To do that, put your style definitions in a text file - say stylesheet.css (without the commment tags or <style> declaration), and replace the text in your html file with <link rel="stylesheet" href="/path/to/stylesheet.css" type="text/css"> (closing tag - /> required for xhtml)
     
    nevetS, Jun 7, 2005 IP
  6. nevetS

    nevetS Evolving Dragon

    Messages:
    2,544
    Likes Received:
    211
    Best Answers:
    0
    Trophy Points:
    135
    #6
    One other thing - there is a plugin/extension for firefox called Web Developers Toolbar or something like that. It has a css editor in it so you can change things in the css in realtime and see how they affect the layout.
     
    nevetS, Jun 7, 2005 IP
  7. Bosse

    Bosse Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I already have the web developers bar, that´s where I saw that the body-section did not load. I have it setup just the way you wrote but I removed the comment tags and the external style declaration and now it works without "double bodies". Thank you for that. One intresting thing though is why firefox did read the rest of the entries in the external style sheet?
     
    Bosse, Jun 8, 2005 IP