I finally have a URL that you all can look at: www.williamtobrien.com. I'm
having the same problem on multiple pages, so you can probably restrict your
attention to the intro page (the code I'll be posting below is for this
page).
Aside from the fact that I need to do some optimization on the images
(because the page is loading reallllly slowly...or could just be my
connection), the background images aren't showing up in IE7. The site works
(except for a few minor tweaks) in both Safari and Firefox.
I have performed a minimal usage test but just cannot seem to get these
images to work. I have validated both the CSS and the HTML. The only errors
I'm getting from CSS are in regards to the opacity, but this feature seems
to still work in IE, and even when I removed the opacity code the images
weren't showing up. Also, I was strangely able to use other images and get
them to show up (not many, but a few). Could there be an issue with the
image itself?
Here is the relevant CSS:
@charset "UTF-8";
/* BACKGROUND */
body {
background-color:#413a19;
}
#jacket {
background: url(images/jacketbkgd.jpg);
width:990px;
height:726px;
margin:auto;
margin-top:40px;
z-index:1;
position:relative;
}
#bigredbar {
background-color:#660000;
width:990px;
height:250px;
filter:alpha(opacity=50); /* for IE */
opacity:0.5;
z-index:2;
position:relative;
top:306px;
left:20px;
}
#smallredbar {
background-color:#660000;
width:990px;
height:47px;
filter:alpha(opacity=50); /* for IE */
opacity:0.5;
z-index:2;
position:absolute;
top:575px;
left:20px;
}
/* INDEX */
#indexjacket {
background: url(images/indexbkgd.jpg);
width:990px;
height:727px;
margin:0 auto;
margin-top:40px;
z-index:1;
position:relative;
}
#textstrip {
background: url(images/textstrip.jpg);
width:1014px;
height:156px;
position:absolute;
top:445px;
left:-10px;
z-index:2;
}
#transbox {
background-color:#660000;
width:493px;
height:379px;
filter:alpha(opacity=50); /* for IE */
opacity:0.5;
z-index:3;
position:absolute;
top:255px;
left:39px;
}
#indextext {
background: url(images/indextext.png);
width:465px;
height:357px;
position:absolute;
top:265px;
left:49px;
z-index:4;
}
#open {
font-family: "orator std", courier;
font-size:3em;
position:absolute;
right:25px;
bottom:0px;
padding:0;
margin:0;
}
#open a:link {text-decoration:none; color:#fffde8;}
#open a:visited {text-decoration:none; color:#fffde8;}
#open a:hover {color:#cccc32;}
And the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>- Welcome -</title>
<link href="wto.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="indexjacket">
<div id="textstrip">
<p id="open"><a href="toc.html">Open</a></p>
</div>
<div id="transbox"></div>
<div id="indextext"></div>
</div>
</body>
</html>
I would greatly appreciate any comments or advice. I really want to get this
thing done and out the door! Thanks!
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
