CSS not working in IE8, while working fine in IE9

Question

basically a majority of the CSS styles defined for my website are not displayed when opening the page in IE8. This is not only happening for my custom styles (which I load separately through a custom css file), but also for the built-in features of Rockettheme IONOSPHERE template, for example the box1/2/3/4/5/6 module styles. Also, the rounded style is not rendered, and all modules are shown with sharp corners instead.

I am also using a custom css file (called ralph_golfanatics.css), which I load inside the index.php as follows:

$gantry->addStyles(array('template.css','joomla.css', 'ralph_golfanatics.css'));

All custom styles of this file are displayed fine in IE9, but the most important styles are not shown in IE8. Simply adding these css-styles manually in the file template_ie8.css (that file comes with the Ionosphere template package) did not change anything.

Looking forward to receive any help in this matter. The webpage is http://www.golfanatics.de

Thank you all in advance for your hints.

Ralph

Answer 1

Unfortunately, the link you've included isn't working so it's difficult to pin down exactly what the problem is.

If you're referring to rounded borders displaying with sharp corners this is because border-radius is a CSS3 property which is not supported in IE8.

See this link for border-radius browser support.

There are many CSS3 properties which don't work in older browsers; this is expected behavior and most web developers work around this by using either 'progressive enhancement' or 'graceful degradation'. See this link for more information.

Most websites using CSS3 techniques will never look the same in every browser.