div with background color not rendering in Firefox, but renders in IE.

kaczmar2 · Jun 11, 2007

Hello,

I am trying to make a simple bar chart for a web page. For this, I
need to calculate the widths of divs in pixels, and then display
them. They have no text content; I just need them to show up and
colored bars. The code is like this:

<div style="background-color:#000000; width: 50px;" />
....
<div style="background-color:#000000; width: 75px;" />

This shows up no problem in IE6+, but not in Firefox 2.

If I put text content in the div, it displays, but it sizes to just
fit the content. (This follows from the CSS documentation of
"display:inline"

but I need to show the absolute size in pixels

Any clues as to how to get the div to show up with the background
color?

Thanks.

David Dorward · Jun 11, 2007

I am trying to make a simple bar chart for a web page. For this, I
need to calculate the widths of divs in pixels, and then display
them.

Oh boy. HTML isn't designed for drawing diagrams with. For this sort
of thing I'd look to images (or maybe Flash).

They have no text content; I just need them to show up and
colored bars. The code is like this:

<div style="background-color:#000000; width: 50px;" />

That looks like XHTML which doesn't conform to Appendix C. If you're
serving it as text/html then anything can happen and you really should
stop. If you're serving it as XHTML, then IE should be prompting you
to download it.

So I'm guessing you're doing the former. Write HTML instead, or at
least follow the HTML compatibility guidelines.

Also, as always, a real URL is better then tiny fragments of a
document. So much depends on context, that document fragments are all
but worthless for debugging code.

Jonathan N. Little · Jun 11, 2007

Hello,

I am trying to make a simple bar chart for a web page. For this, I
need to calculate the widths of divs in pixels, and then display
them. They have no text content; I just need them to show up and
colored bars. The code is like this:

<div style="background-color:#000000; width: 50px;" />
...
<div style="background-color:#000000; width: 75px;" />

This shows up no problem in IE6+, but not in Firefox 2.

If I put text content in the div, it displays, but it sizes to just
fit the content. (This follows from the CSS documentation of
"display:inline" but I need to show the absolute size in pixels

Any clues as to how to get the div to show up with the background
color?

Simple! What's the height? You did not specify and Firefox wasn't about
to guess. Here it is in HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Bar Chart</title>

<style type="text/css">
DIV { height: 10px; background-color:#000000; }
</style>

</head>
<body>

<div style="width: 50px;"></div>

<div style="width: 75px;"></div>

</body>
</html>

kaczmar2 · Jun 11, 2007

Thank you all for your suggestions...

adding the "height" attribute to the style of the div did work and
allowed the div to display in both IE and FF.

I can understand the suggestion of not using HTML for charting. I can
create a 1 pixel wide image of a specific height and any desired with,
and render it out that was as well.

Thanks again.

My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019
<Button ...> display is fine, except for two things	1	Oct 23, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Script working in Firefox but not Chrome and Safari	3	Apr 6, 2021
Help with Visual Lightbox: Scripts	2	May 3, 2023
How to make a div select work?	5	Jan 13, 2022
Dropdown menu in a fixed navbar	1	Apr 1, 2024
Why is the e.target not working here?	1	Dec 29, 2022

div with background color not rendering in Firefox, but renders in IE.

kaczmar2

David Dorward

Jonathan N. Little

kaczmar2

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads