Saturday, May 30, 2009

[jQuery] a jQuery solution for an MSIE problem?

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">
&nbsp;
</div>
<div class="row">
&nbsp;
</div>
<div class="row">
&nbsp;
</div>
<div class="row">
&nbsp;
</div>
<div class="row">
&nbsp;
</div>
<div class="row">
&nbsp;
</div>
<div class="row">
&nbsp;
</div>
<div class="row">
&nbsp;
</div>
<div class="row">
&nbsp;
</div>
<div class="row">
&nbsp;
</div>
<div class="row">
&nbsp;
</div>
</div>
</body>


</html>

[/code]

No comments: