Solved

Problem with Chrome,FireFox border

Posted on 2011-02-27
5
685 Views
Last Modified: 2012-08-13
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
Comment
Question by:VapiSoft
  • 2
  • 2
5 Comments
 
LVL 14

Expert Comment

by:R-Byter
Comment Utility
It seems that you're missing float: left.
0
 

Author Comment

by:VapiSoft
Comment Utility
What is it?
Where do I put it?
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:VapiSoft
Comment Utility
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
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Cool, thanks for the points.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now