Maddening inconsistency in background color setting.

#1 Ray Parrish

Member

Group: Members
Posts: 91
Joined: 30-October 08
Gender:Male
Location:Cottage Grove, Oregon

Posted 07 March 2010 - 02:08 AM

Hello,

I am working on a bar graph in HTML, and for some reason, one class in the graph obeys all of it's style settings except for background-color. I've stared at it for so damn long trying to figure out what is wrong that I'm starting to go blind with madness.

The class name is "date", and is applied to the small divs containing the dates at the bottom of the graph's body.

Soooooooo, I thought I'd share the head ache with all of you, and see if anyone can spot an error that I'm damn sure isn't there, even 'though it will not work.

Here's the code of the file -

Thanks, Ray Parrish

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
div.graph {
border: 2px solid red;
position: relative;
left: 30%;
top: 2%;
margin: 0px;
height: 365px;
width: 65%
}
div.numberbar {
background-color: #00FF00;
border: 2px solid red;
position: absolute;
right: 85%;
top: 0%;
text-align: right;
margin: 0px;
height: 100%;
width: 15%
}
div.titlebar {
background-color: #00FF00;
position: absolute;
left: 15%;
top: 0%;
margin: 0px;
border: solid;
height: 8.0%;
width: 84%
}
div.graphbody {
background-color: #FF00FF;
position: absolute;
left:15%;
z-index: 5;
border: solid;
bottom: 8.333333333%;
height: 82.0%;
width: 84%;"
}
div.daterow {
position: absolute;
left: 15%;
bottom:0%;
margin: 0px;
border: solid;
height: 8.0%;
width: 84%;"
}
div.date {
background-color: #00FFFF;
position: absolute;
top: 0%;
width: 3.5714285714285716%;
height: 8.333333333%;
margin: 0px;
}
hr.ruler {
position:absolute;
left:0%;
z-index:1000;
margin: 0px;
width: 100%;
}
h4.increment {
position: absolute;
right:3%;
width: 100%;
margin: 0px;
height: 8.333333333%;
text-align: right; 
}

</style>
<title>Graph Test</title>
</head>
<body>

<div class="graph" id="graph">
 
 <div class="numberbar" id="numberbar">
 <!-- Increments are positioned at (100 /360) * 15) % for the bottom one, and 
 plus (100 /360) * 50) more for each next one up. -->
 <h4 class="increment" id="increment" style="position: absolute; bottom:87.500000000%;">3,600</h5>
<h4 class="increment" id="increment" style="position: absolute; bottom:73.611111111%;">3,000</h5>
<h4 class="increment" id="increment" style="position: absolute; bottom:59.722222222%;">2,400</h5>
<h4 class="increment" id="increment" style="position: absolute; bottom:45.833333333%;">1,800</h5>
<h4 class="increment" id="increment" style="position: absolute; bottom:31.944444444%;">1,200</h5>
<h4 class="increment" id="increment" style="position: absolute; bottom:18.055555556%;">600</h5>
<h4 class="increment" id="increment" style="position: absolute; bottom:4.166666667%;">0</h5>
 
 </div><!-- End of numberbar div -->
 
 <div class="titlebar" id="titlebar" onclick="changecolor('titlebar');"> <center>February Page View Counts</center>
</div><!-- End of titlebar -->

<div class="graphbody" id="graphbody"  onclick="changecolor('graphbody');" >

<hr class="ruler" id="ruler" style="position:absolute; bottom:16.666666667%;">
<hr class="ruler" id="ruler" style="position:absolute; bottom:33.333333333%;">
<hr class="ruler" id="ruler" style="position:absolute; bottom:50%;">
<hr class="ruler" id="ruler" style="position:absolute; bottom:66.666666667%;">
<hr class="ruler" id="ruler" style="position:absolute; bottom:83.333333333%;">

</div><<!-- End of graphbody div -->

<div class="daterow" id="daterow">
<!-- There are one less left positions than there are dates, or bars in this bar graph, so the
width of dates, and bars is (100 / 28) % for February, and their left positions are located 
((100 / 27) * position) % incrementally more for each one.-->

<div class="date" id="date" style="position: absolute; left:0%;"><center>1</center></div>
<div class="date" id="date" style="position: absolute; left:3.703703704%;"><center>2</center></div>
<div class="date" id="date" style="position:absolute; left:7.407407407%;"><center>3</center></div>
<div class="date" id="date" style="position:absolute; left:11.111111111%;"><center>4</center></div>
<div class="date" id="date" style="position:absolute; left:14.814814815%;"><center>5</center></div>
<div class="date" id="date" style="position:absolute; left:18.518518519%;"><center>6</center></div>
<div class="date" id="date" style="position:absolute; left:22.222222222%;"><center>7</center></div>
<div class="date" id="date" style="position:absolute; left:25.925925926%;"><center>8</center></div>
<div class="date" id="date" style="position:absolute; left:29.629629630%;"><center>9</center></div>
<div class="date" id="date" style="position:absolute; left:33.333333333%;"><center>10</center></div>
<div class="date" id="date" style="position:absolute; left:37.037037037%;"><center>11</center></div>
<div class="date" id="date" style="position:absolute; left:40.740740741%;"><center>12</center></div>
<div class="date" id="date" style="position:absolute; left:44.444444444%;"><center>13</center></div>
<div class="date" id="date" style="position:absolute; left:48.148148148%;"><center>14</center></div>
<div class="date" id="date" style="position:absolute; left:51.851851852%;"><center>16</center></div>
<div class="date" id="date" style="position:absolute; left:55.555555556%;"><center>17</center></div>
<div class="date" id="date" style="position:absolute; left:59.259259259%;"><center>18</center></div>
<div class="date" id="date" style="position:absolute; left:62.962962963%;"><center>19</center></div>
<div class="date" id="date" style="position:absolute; left:66.666666667%;"><center>20</center></div>
<div class="date" id="date" style="position:absolute; left:70.370370370%;"><center>21</center></div>
<div class="date" id="date" style="position:absolute; left:74.074074074%;"><center>22</center></div>
<div class="date" id="date" style="position:absolute; left:77.777777778%;"><center>23</center></div>
<div class="date" id="date" style="position:absolute; left:81.481481481%;"><center>24</center></div>
<div class="date" id="date" style="position:absolute; left:85.185185185%;"><center>25</center></div>
<div class="date" id="date" style="position:absolute; left:88.888888889%;"><center>26</center></div>
<div class="date" id="date" style="position:absolute; left:92.857142857%;"><center>27</center></div>
<div class="date" id="date" style="position:absolute; left:96.296296296%;"><center>28</center></div>
</div><!-- End of daterow div -->

</div><!-- End of graph div -->

</body></html>

Later, Ray Parrish

Listen to my brilliant guitar playing !!
The Unknown Lead Player
Linux dpkg Software Report
Ray's Links, Human reviewed link index
Writings of the Schizophrenic

#2 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 07 March 2010 - 09:49 AM

Just a couple things I noticed right off the bat. You have lines inside your CSS that do not end with a semi-colon like they ares supposed to. width: 65% is not correct syntax. You also hae lines in there that have quotation marks. That won't work either. Inside your style tag, you have not declared a 'type' attribute. For the Doctype you are using, this is mandatory.

Continuing on, you have 7 elements that have the same ID. That is not allowed. Ids must be unique for each element. For those same elements, you use an opening <h4> tag, but you are closing them with an <h5> tag. You have 5 elements with an 'id' of ruler, and 25ish elements with an id of 'date'. Again, that is not legal. In general, class names and tags are used for styling. Ids are used for

Those all need to be fixed before we can figure out what is wrong. My guess is that the lack of proper id's is part of the issue though. The W3 HTML validator is pretty handy for helping find syntax errors.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#3 Ray Parrish

Member

Group: Members
Posts: 91
Joined: 30-October 08
Gender:Male
Location:Cottage Grove, Oregon

Posted 07 March 2010 - 11:07 AM

groovicus, on Mar 7 2010, 06:49 AM, said:

Thanks Groovicus, I feel like I was asleep at the wheel when I was doing that file now. I'll get on those errors, and see if they fix the problem. I fixated on the value of the background color, and didn't look hard enough.

Thanks for the tip on the validator, believe it or not I have the Web Developer tool bar, and never thought once to validate my code. I must be slipping worse than I thought I was.

Next time I'll try to remember to do that before I go firing of questions.

Thanks again, Ray Parrish

Later, Ray Parrish

Listen to my brilliant guitar playing !!
The Unknown Lead Player
Linux dpkg Software Report
Ray's Links, Human reviewed link index
Writings of the Schizophrenic

#4 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 07 March 2010 - 11:25 AM

It is pretty easy to fixate on minor annoyances and then miss everything else. Most of your errors come from copying and pasting.

Since you have the web developer's toolbar, you can look up in the upper right corner and see if you have css or javascript errors in your page as you are viewing it. They will show up as red circles, like they should be doing on this page.

EDIT" I just noticed that I didn't finish my thought. IDs are generally used for customization of individual elements. For instance, your graph may have 15 bars on it, but each bar represents something different, and so should have an id that reflects that difference.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#5 Ray Parrish

Member

Group: Members
Posts: 91
Joined: 30-October 08
Gender:Male
Location:Cottage Grove, Oregon

Posted 07 March 2010 - 01:13 PM

Hello again,

I ran the file through the validator until it validated, but the background color of the individual date classes would not take affect. At that point I realized that setting the containing datebar element's background color produced the effect I wanted, and setting it worked fine.

I guess the problem shall remain a mystery, since even 'though the file now validates, it still will not take the background-color setting for the date class divs. Weird.

Later, Ray Parrish

This post has been edited by Ray Parrish: 07 March 2010 - 01:14 PM

Later, Ray Parrish

Listen to my brilliant guitar playing !!
The Unknown Lead Player
Linux dpkg Software Report
Ray's Links, Human reviewed link index
Writings of the Schizophrenic

#6 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 07 March 2010 - 02:27 PM

The problem was probably because if the identical IDs. Usually when one does that, the style gets applied to the first instance of an id and is ignored after that.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens