Log in

View Full Version : Browser compatibility Issue


jcdesigns
11-21-2011, 09:17 PM
I cannot get the background to appear in IE 8 for the following pages below, however my other pages other than these 3 show fine. You can see what the background looks like on the other pages which are a blue/black header, black menu strip and blue gradient. The 3 pages below however do show up in Safari, Firefox and older IE versions. Please let me know how to correct this. I also included the css file for reference. Thank you.

http://www.jenkinscreativedesigns.com/graphicdesign.html
http://www.jenkinscreativedesigns.com/webdesign.html
http://www.jenkinscreativedesigns.com/marketing.html

http://www.jenkinscreativedesigns.com/default2au.css
jscheuer1
11-22-2011, 12:38 AM
This is almost certainly some quirk of IE 8. However, it's also clear that the background image for the body is not set in the stylesheet you linked to. It's set in an on page stylesheet:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JCD Graphic Design</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default2au.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="SpryAccordion.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylex.css" type="text/css" media="screen" />
<style type="text/css">


<!--
body {
background-repeat: repeat;
background-color: #FFFFFF;
background-image: url(Images/imggraphicdesign2.jpg);
}
.style1 {color: #FFFFFF}
.style2 {color: #000000}
.style3 {
font-family: "Arial Black";
font-size: 17px;
color: #000000;
}
-->
</style>


If I copy this on page stylesheet from a working page (index.html) to the non-working page, it doesn't help. That's what makes me think it's some quirk of IE 8. That and the fact that the pages work in IE 9 and IE 7, and all those other browsers.

In any event, there's a fix that won't hurt any of those others, just add the !important keyword:


<style type="text/css">


<!--
body {
background-repeat: repeat;
background-color: #FFFFFF;
background-image: url(Images/imggraphicdesign2.jpg) !important;
}
.style1 {color: #FFFFFF}
.style2 {color: #000000}
.style3 {
font-family: "Arial Black";
font-size: 17px;
color: #000000;
}
-->
</style>
jcdesigns
11-22-2011, 12:48 AM
Thanks John. So are you indicating that IE 8 will recognize the word
!important and make the background visible?
jscheuer1
11-22-2011, 12:50 AM
Try it, you'll like it. (Yes)

The browser cache may need to be cleared and/or the page refreshed to see changes.
jcdesigns
11-22-2011, 02:25 AM
John, I entered "!important" and it worked great in IE8. A big thanks and have a nice holiday.