Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Maddening inconsistency in background color setting.


  • Please log in to reply
5 replies to this topic

#1 Ray Parrish

Ray Parrish

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:01:01 PM

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>


BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:01 PM

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.

#3 Ray Parrish

Ray Parrish
  • Topic Starter

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:01:01 PM

Posted 07 March 2010 - 11:07 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.


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

#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:01 PM

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.

#5 Ray Parrish

Ray Parrish
  • Topic Starter

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:01:01 PM

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

Edited by Ray Parrish, 07 March 2010 - 01:14 PM.


#6 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:01 PM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users