Website not displaying properly in IE8

[lancer123]

I've built a website in dreamweaver which displays perfect in Firefox but in IE8 it only displays the background image. I think the problem is being caused by my CSS. I've tried turning on Compatability View but still no joy. Has anyone any idea on how to fix this?

[lancer123]

Ran it through W3 CSS validator and got the following errors if this makes any sense:

31 #content Property opacity doesn't exist in CSS level 2.1 but exists in : 0.1 0.1
32 #content Parse Error opacity=10)
59 #imageContainer img Property opacity doesn't exist in CSS level 2.1 but exists in : -0.01 -0.01
77 #nav a:link, #nav a:visited Value Error : background Parse Error url(../images/nav-bgd.png
83 #nav a:link, #nav a:visited Value Error : font Good is not a font-size value : Good Times Good Times
85 #nav a:link, #nav a:visited Property text-shadow doesn't exist in CSS level 2.1 but exists in : 2px 2px 2px #555 2px 2px 2px #555

[Kor]

I've built a website in dreamweaver which displays perfect in Firefox but in IE8 it only displays the background image. I think the problem is being caused by my CSS. I've tried turning on Compatability View but still no joy. Has anyone any idea on how to fix this?
It has no relevance in which editor you have created a website. Editors are nothing but tools, and don't rely on tools whenever it is a matter of crossbrowser compatibility. You have to learn and code with your own hand the CSS and javascript codes. Learn the standards and learn the differences.

[lancer123]

I actually went through the w3 tutorial to learn how to put CSS together. Currently trying to edit each page and have got my homepage to display somewhat OK. DOCTYPE etc are confusing me so they may be causing a problem as I didn't declare any of them originally.

[Kor]

OK. Now, it is not enough to code standard. Unfortunatly, browsers do not follow entirely the standards. There are differences, bugs, incomplete implementations ...

Here's a good comparative compatibility table:
http://www.quirksmode.org/compatibility.html
Here probably you will need to check CSS 2, DOM HTML and DOM CSS

To bypass those differences you should come here again and ask for a workaround (if any)

[blondie_69]

It seem your problem comes out of the fact that Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x). Maybe that's why it does not display in IE.

Here's a link with more info:
http://w3schools.com/css/css_image_transparency.asp

[Robbe]

Make two or three different css stylesheets and make them load according to which browser the user uses.

[criterion9]

Make two or three different css stylesheets and make them load according to which browser the user uses.

You shouldn't need more than a single CSS stylesheet. You can use a couple of browser specific targeting tricks to "correct" the minor inconsistencies between browsers. The days of having completely different pages for each browser are long gone (last time I did that was circa 1999).

[Robbe]

You shouldn't need more than a single CSS stylesheet. You can use a couple of browser specific targeting tricks to "correct" the minor inconsistencies between browsers. The days of having completely different pages for each browser are long gone (last time I did that was circa 1999).

I didn't mean completely different pages for each browsers, but to target different css files according to the users browser, but the days of the huge differences are gone (as you mentioned), so you probably just have to add some minor correctional styles.