[jQuery] IE and overlapping nested divs (not working)
Hi everyone, I have been struggling with a MSIE related problem and I
was wondering if using jQuery will help me find an asnwer. Basically,
the code words wonderfully in all other browsers except MSIE.
Basically, I want to render something like bars on a graph. Vertical
bars. The bars are CSS div blocks with specific lengths (with an icon
inside at the top). They are placed on top of horizontal rules like
rules of a book. These rules are also div, with a border style. Can
the browser issue be solved using jQuery or is there another solution
you guys can think of, I have been really having a hard time with
this.
So here is the code:
[code]
.row
{
border-bottom: 1px solid #000;
height: 34px;
}
.name
{
}
.bar
{
background: red;
}
#bar1
{
display: block;
height: 136px;
width: 32px;
border: 1px solid blue;
position: absolute;
}
#container
{
height: 100px;
overflow: scroll;
}
[/code]
[code]
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Bars</title>
<link rel="stylesheet" type="text/css" href="style.css" type="text/
css" title="default" />
</head>
<body>
<div id="container">
<div class="row">
<span class="bar" id="bar1">
<span>
<img src="i32px.gif">
</span>
</span>
<span class="name">
NAME
</span>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
</body>
</html>
[/code]