...

View Full Version : CSS interfering with my donation box.



CowMilk
05-09-2006, 10:55 PM
So this is the script for the donation box.

<script src="http://donatemeter.com/showbutton.php?i=281&item=27&width=170&direction=vertical&showtop5=yes&background=0072BC&graph1=red&graph2=maroon&text=white">

See background color is 0072BC (Blue), text is white etc.

But this part of my css:


table {background-color: #363636;}
th {background-color: #E1E1E1; font-size: 11pt;}
td {background-color: #FFF; font-size: 10pt;}

Is changing the design. How do I keep it blue background and white text.

This is what happens when the above css is there: http://openlite.5gigs.com/indextest.html
See how it changes the color to white and black.

Then when the above css is removed:
http://openlite.5gigs.com/indexnumber2.html

So, how do I make it look like that blue donation box with white text without removing the code above. I've tried adding a div and style for the donation box, but that doesn't seem to override the above css.

CSS: http://pastebin.com/703726

Arbitrator
05-10-2006, 12:01 AM
I'm going to skip the part about how poor your website's code is...

In order to fix the problem you need to target a specific table instead of every table. For example:

table#TABLEIDHERE {} or
table.TABLECLASSHERE {}

If you have a table named news, you would do something like this:

For <table id="news">:
table#news {}
table#news th {}
table#news td {}
They target the table with the ID (id) of news and all table headers (th) and table data (td) only inside the table with the ID of news.

For <table class="news">:
table.news {}
table.news th {}
table.news td {}
They target the table of the news class (class) and all table headers (th) and table data (td) only inside the table of the news class.

Alternatively, you could use the CSS you already have and just change the code in the donate box back but only if you knew the HTML for the donate box. For example:

span.donate table,th,td { background-color: #0072bc !important; }

However, that won't restore the reds in the thermometer if it's a made from background colors, like I suspect, which is why you need to know the HTML.

CowMilk
05-10-2006, 03:00 AM
your right Arbitrator, got it working except thermometer is the same color as the table background. damn, dont think the host will let me see there html. :(

CowMilk
05-10-2006, 03:14 AM
after some investigation i found this code, just part of it. i can see the thero color red and maroon, how do i implement this to css.

<tr><td height=13 background=http://donatemeter.com/images/therm4-31x13.gif bgcolor=maroon></td></tr><tr><td height=169 bgcolor=maroon background=http://donatemeter.com/images/therm5-31x57.gif></td></tr><tr><td height=1 bgcolor=red background=http://donatemeter.com/images/therm5-31x57.gif></td></tr><tr><td height=26 background=http://donatemeter.com/images/therm6-31x26.gif bgcolor=red></td></tr></table>');

CowMilk
05-10-2006, 03:31 AM
YES!! I got it thermometer working, after couple of trial and error. I came up with this code.

td[bgcolor=red] {background-color: red !important;}
td[bgcolor=maroon] {background-color: maroon !important;}

thanks Arbitrator, i'm so happy now, i felt like a genius for a minute there. :)

Arbitrator
05-10-2006, 03:37 AM
Well, done. :p I wouldn't have thought of using that selector either since I just learned it recently, heh.

shanstafari
05-10-2006, 06:19 AM
td[bgcolor=red] {background-color: red !important;}
td[bgcolor=maroon] {background-color: maroon !important;}


Attribute selectors won't work in IE, though, as I understand it. Am I wrong here?

CowMilk
05-10-2006, 06:52 AM
Just tested in IE guess your right, o well 2 out 3 isn't so bad. hopefully its fixed on ie7.


Attribute selectors won't work in IE, though, as I understand it. Am I wrong here?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum