Forum Moderators: not2easy
I need some help to get the following code to render the same way in as many browsers as possible. So far I have achieved this with Firefox, Safari, Chrome, and Opera... but microsoft internet explore version 6 and 7 both refuse to cooperate ...
here is the code:
<div class="horizontal_rule">
<span class="a">0</span>
<span style="height: 1468px; width: 32px;" class="vertical_bar">
<span>
<img src="icon.png">
</span>
</span>
</div>
<div class="horizontal_rule">
</div>
<div class="horizontal_rule">
</div>
Basically, I have a bunch of horizontal rules created by the div class "horizontal_rule" which simply has a border on the bottom.
Inside this I have a vertical_bar with an icon at it's center. This vertical bar needs to be on top of the rules (sort of like in a bar graph) ...
I got it to work fine in all browsers except MSIE where it simply stretches the "horizontal_rule" block... and actually scrolls down with the page when I scroll (it is contained inside an overflow: scroll enabled div)
You help with be greatly appreciated!
Thank you for your time!
Sorry for the slow reply, but ...
Not having the relevant bits of CSS makes understanding what you're doing very hard.
I still haven't solved this, but I thought the following code might help me get this figured out:
CSS:
.row
{
border-bottom: 1px solid #000;
height: 34px;
}.name
{
}
.bar
{
background: red;
}
#bar1
{
display: block;
height: 136px;
width: 32px;
border: 1px solid blue;
}
HTML
<!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 class="row">
<span class="bar" id="bar1">
<span>
<img src="32px.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>
</body>
</html>
This is all the code (in its very basic form, but complete.)
So it works great in Firefox, but MSIE just expands it (the rule where the bar is), instead of overlapping the other bars. Basically, I am trying to draw a bar over what looks like a ruled page. The image is a 32x32 icon.
I hope someone can help me! I'd really really appreciate it.
The logical solution to do graphs would be SVG, but well unfortunately Microsoft isn't a big enough believer in standards to support it.
The next best thing might not be trying to do it all with individual divs and spans.
Another solution might be to have a repeating background on an element that serves as your background, give it position (position:relative is enough), and then use absolute positioning to position your labels and bars on top of it.
It's not going to be clean like SVG could be, but it's one way.
position: absolute;
Ok, the problem is if you put all the code in a <div> (lets call it <div id="cintainer">
If the container for the whole chart is given a height of lets say 100px and property, overflow: scroll, since the bar is absolute positioned... it will stay in one place when I scroll through the div.
CSS
#container
{
height: 100px;
overflow: scroll;
}
HTML
<div id="container">
<div class="row">
....etc....
</div>
</div>
any idea how I can solve this? and your response is really appreciated! thank you so much!
Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.row1
{
position: absolute;
width: 32px;
background: red;
margin: 0;
padding: 0;
}
.row
{
border-bottom: 1px solid #000;
height: 34px;
}
.name
{
}
.bar
{
width: 32px;
margin: 0;
padding: 0;
}
#container
{
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<div class="row1">
<span id="bar1">
<span><img src="32px.gif"></span>
</span>
<span class="name">NAME</span>
</div>
<div id="container">
<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>
All this is application dependent however so if I wanted to setup some statistics and bar/plot graphs I usually check the sourceforge.net. For php you have the gd library that has been utilized by a lot of packages (eg: jpgraph). You don't have to rewrite everything from scratch, again depends what's available.
So about your solution, moving them out of the container....
but if I move them outside the container, how will I position them to begin/proceed from a specific horizontal "rule" The
<div class="row"> </div> are all horizontal lines and the bar must be able to begin from any one of them. This is calculated on the server-side.
As for the GD library, I can't use that as it will be too CPU intensive and the server we have won't be able to handle it! The actual graph that I am developing is quite large and will have a lot of these vertical bars.
Do you think I could fix it using JavaScript? I am pulling my hair out at this point.... lol
But it means learning those two formats.
so you are saying there is absolutely no CSS based solution? There is no way to get this render in IE as it does in FF? :( that totally sucks :(
thanks again for the help, it is much appreciated!
