Forum Moderators: not2easy
Firefox simply ignores some parts of the stylesheets I'm using. It displays the h3-element in the header-div-container in black (as opposed to dark blue..which IE does).
And the bigger problem: The navigation on the left side of my website doesn't respect its limit (its supposed to only take up a bit of the left side)..it goes from the left to the right of the page (which is shown by the background color...as if those were full-length rows).
It also doesn't seem to understand I used other containers..It kind of displays everything as if I had never used a single div-container to position the elements on this website :-(.
P.S.: I first used pixels and it looked like this. Then I used em's for everything and it's still not right :-(.
actually I noticed early on that it didn't display correctly in fire fox, but was hoping I could get that to go during the next steps (converting px's into em's..).
However..even if I was to code it from scratch in order for it to display correctly in firefox...I would not know how to do this :-(.
I used a book on CSS (printed in 2007) to learn CSS and try it out on my first site. However if firefox ignores most of the CSS-code..even code such as
#header {
color:#000080;
(...there was more c ode for the header of course)
}
and doesn't display the header in dark blue, but in gray...what the heck could I do?
Use hacks so firefox displays dark blue color?;-(
Does anybody else have an idea?
Some things to look at:
1. Valid doctype that includes the URL? Right-click the page in FireFox, somewhere where it's just background, and select View Page Info. It will show the render mode as one of the properties, this sohuld be Standards Mode (not Quirks mode.)
2. Page validates? See [validator.w3.org...]
You can also find a CSS validator that that will check your CSS
3. IF nothing else, create a test version and remove all other CSS and test each selector one by one.
Maybe you already detected the mistake:
This is the doctype I'm using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Do I have to include the URL name of my own website, too? or did you mean the www w3 org/.../strict.dtd URL?
thanks a lot! hopefully I'll find the mistake soon.
I tried to validate it and there was one mistake. It is this one:
"No Character Encoding Found! Falling back to UTF-8.
None of the standards sources gave any information on the character encoding labeling for this document. Without encoding information it is impossible to reliably validate the document. As a fallback solution, the "UTF-8" encoding was used to read the content and attempt to perform the validation, but this is likely to fail for all non-trivial documents.
Read the FAQ entry on character encoding for more details and pointers on how to fix this problem with your document."
I'll make sure to read the FAQ entry on character encoding as soon as I can to make sure the page validates, but could this be the reason for firefox not displaying my site properly (whereas IE does)?
thanks!
I tried to use a CSS validator, but it keeps saying the document is not found. In my hosting account it says /folder1/folder2/file.css and I tried to validate it by typing in www domainname com/folder1/folder2/file.css
Strangely it keeps saying the document is not found? Any idea what I could do about this?:-(
The problem with designing with IE as a reference is that IE is a very buggy browser, and does not have full standards support. This results in any other browser to render differently than the page made for IE, which is not good. Designing for the web standards, and other compliant browsers, THEN adding in conditional comments for internet explorer is quite a good idea, since you won't run into any mysterious problems if you have some good knowledge.
My current guess for your header color example would be that it's a specifity issue. In CSS, the selector which is most specific gets priority. This means that if you have a div #header and you have it set to color:grey, but inside of that div you have an h1, and your h1 is set to color:blue, it will still be grey, because ID's are more specific than elements.
Some examples:
#id >.class
#id >.class element.class
#id.class >#id
.class > element element
