Problem with translucent background in IE (surprise surprise)

I have a small site that I'd like to use to promote me as a fisherman (Not sure why as all skippers don't seem to be too tech savy LOL. But since I started it [and it's on my cards] I'd like to complete it).

It is best viewed in Chrome for the border radius effect but otherwise works fine in Firefox. What is basically happening is that I'm using 'float: left' on two elements in a DIV. In IE I need to use javascript to resize the alpha background. I think I have the problem whether or not it's resized... which is the floating elements now appear behind the background.

I fixed it in my "root" site. But I the way I approach the problem there is completely different and more complicated. (Also done a while ago and I wanted to find a simpler solution.) Basically, if I remember right I loop through all DIV's looking for IDs like '[a-z0-9]+_cbox' and '[a-z0-9]+_cboxc'. When a match is found the 'cbox' is expanded to fit the 'cboxc' DIV and the 'cboxc' is repositioned to be contained "within" the 'cbox'.

What I was doing on the fishing site was something like:

<div class="cbox>
<div class="alpha"></div>
<div class="cboxc"></div>
</div>

IE has problems with this arrangement. Is it possible to use CSS to fix this w/o changing the HTML? The link is ... [edited out. srry just read tthe sticky. here's the code:]


<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <meta http-equiv="Content-Script-Type" content="text/javascript"> 
 <meta http-equiv="Content-Style-Type" content="text/css"> 
 <meta name="robots" content="index,follow"> 
 
 <title>My Fishing Experiences</title> 
 
 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 
 
 <script type="text/javascript" src="fish.js"></script> 
 
 <style type="text/css"> 
BODY {background: url(water-1.jpg) repeat fixed;}
DIV.abg {background-color: rgb(255,255,255);}
 </style> 
</head> 
<body onload="reposbg();"> 
<div id="page"> 
<div class="cbox" id="cb"> 
<div class="abg" id="cbbg"></div> 
<div class="cboxc"> 
<img src="me-2.jpg" height="298px" width="400px" style="border: 3px outset rgb(196,196,196); float:left; z-index: 3000;"/> 
<div class="header"> 
<h1>My Name</h1> 
<span class="subtext"> 
Deckhand
<p>Cod &#149; Halibut &#149; Salmon<br/> 
Crab &#149; Herring
</p> 
</span> 
<blockquote>Picture: I caught this bad boy jigging with a piece of twine, a big hook, and a chunk of salmon. The goal was halibut but the skate was still fun.</blockquote><br style="line-height:30px;"/> 
<div class="links"><a href="index.php">Home</a></div> 
<div class="links"><a href="experience.php">Experience</a></div> 
<div class="links"><a href="faq.php">Questions &amp; Answers</a></div> 
</div> 
<div class="content"><p>Hi. Thank you for taking the time to check out my site.</p> 
<p>...</p> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html>

And the CSS:

DIV.cbox {
border: rgb(207,227,255) 3px groove;
border-radius: 10px;
position: relative;
}

DIV.abg {
background-color: rgb(186,216,255);
opacity: 0.82;
filter: alpha(opacity=82);
width: 100%;
height: 100%;
position: absolute;
top: 0px; left: 0px;
z-index: -1;
}

DIV.cboxc, DIV.cboxc A {
color: rgb(0,0,45);
padding: 2px;
}

DIV.links {
display: block-inline;
width: 18%;
float: left;
border: rgb(207,227,255) 3px groove;
height: 25px;
vertical-align: center;
background-color: rgb(0,0,97);
z-index: 3000;
}

DIV.links A {
color: rgb(255,255,0);
display: block;
}

The "z-index: 3000" is my attempt to fix it w/o success.

Problem with translucent background in IE (surprise surprise)

nrobidoux

milosevic

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week