Solved

Problem with Chrome,FireFox border

Posted on 2011-02-27
5
694 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 14

Expert Comment

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

Author Comment

by:VapiSoft
ID: 34992134
What is it?
Where do I put it?
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 34992492
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
ID: 34993986
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 83

Expert Comment

by:Dave Baldwin
ID: 34994110
Cool, thanks for the points.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

707 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