Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 703
  • Last Modified:

Problem with Chrome,FireFox border

Hi,

I have the attached code that creates very nice horizontal bars graph in IE.
See attached picture IE-bars.
When I try it in Chrome or in FireFox,
It is messed up (see arrached picture Chrone-bars).
 Chrom-bars IE-Bars
function showTotoBarGraph(id,j,percent,n)
{
 var obj = document.getElementById(id);
 var colors=new Array("#52FF7A","#FF4D9A","#6EE7FF");
 
 obj.style.width ="100px";
 obj.style.height="10px";
 obj.style.border="1px solid black";
 obj.style.margin="2px"; 
 obj.style.backgroundColor = "white";

 obj.innerHTML='<div>'+percent+'%</div>';
 obj=obj.getElementsByTagName("div")[0];
 obj.style.fontSize="10px"; 
 
 obj.style.border="1px none black";
 obj.style.height="100%";

 obj.style.backgroundColor = colors[j];
 obj.style.width = percent + "px";
 obj.style.textAlign = "center";
 if (j == 1)
 obj.style.color="#FFFFFF";
}

Open in new window

0
VapiSoft
Asked:
VapiSoft
  • 2
  • 2
1 Solution
 
R-ByterCommented:
It seems that you're missing float: left.
0
 
VapiSoftAuthor Commented:
What is it?
Where do I put it?
0
 
Dave BaldwinFixer of ProblemsCommented:
This works in Firefox and Chrome as well as IE8.  Since I don't have your complete code, I don't know what the difference is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>JS Bar Graph</title>
<script type="text/javascript">
<!--
function showTotoBarGraph(id,j,percent,n)
{
 var obj = document.getElementById(id);
 var colors=new Array("#52FF7A","#FF4D9A","#6EE7FF");
 
 obj.style.width ="150px";
 obj.style.height="20px";
 obj.style.border="1px solid black";
 obj.style.margin="2px"; 
 obj.style.backgroundColor = "white";

 obj.innerHTML='<div>'+percent+'%</div>';
 obj=obj.getElementsByTagName("div")[0];
 obj.style.fontSize="13px"; 
 
 obj.style.border="1px none black";
 obj.style.height="100%";

 obj.style.backgroundColor = colors[j];
 obj.style.width = (percent*1.5) + "px";
 obj.style.textAlign = "center";
 if (j == 1)
 obj.style.color="#FFFFFF";
}
// -->
</script>
</head>
<body>
<h1>JS Bar Graph</h1>
<div id="g1">
<script type="text/javascript">
<!--
showTotoBarGraph("g1",'2','50','1')
// -->
</script>
</div>
<div id="g2">
<script type="text/javascript">
<!--
showTotoBarGraph("g2",'0','50','2')
// -->
</script>
</div>
<div id="g3">
<script type="text/javascript">
<!--
showTotoBarGraph("g3",'1','50','3')
// -->
</script>
</div>
</body>
</html>

Open in new window

0
 
VapiSoftAuthor Commented:
What I found is that I has the graph inside <span>
When I saw your code, I realized that this is the difference.
Thanks.
0
 
Dave BaldwinFixer of ProblemsCommented:
Cool, thanks for the points.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now