Strange Firefox style sheet problem

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?

Bosse

 

Checkout the CSS validator and see if that helps. Also, live links help troubleshot.

http://jigsaw.w3.org/css-validator/#validate-by-input

 

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.

 

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.

 

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)

 

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.

 

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?