CSS - Howto Change Background Color Table Row With Css

Hi,
I have 5 input textbox in my page.
I want to change the background color of one input textbox to red.
How to change the color of the input box to red?

Thank you

I have these two areas.

Code:

.MenuItem {
	color:#FFFFFF;
	font-size:12px;
	background-color:#CC0000;
	font-weight:bold;
	height:18px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:0px solid #FF0000;
	border-left:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	border-right:2px solid #FF0000;
}

.MenuItemTop {
	color:#FFFFFF;
	font-size:12px;
	background-color:#CC0000;
	font-weight:bold;
	height:18px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:2px solid #FF0000;
	border-left:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	border-right:2px solid #FF0000;
}

which refer to the left nav.

My code only changes the color behind the text, not the entire area (box) behind the text.

Code:

.MenuItemTop a:hover, .MenuItem a:hover {
	color:#FFFFFF;
	text-decoration:underline;
	font-size:12px;
	background-color:#000000;
}

Any ideas why?

example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm

Brad

Nevermind, fixed. Changed Pixels into Percentages.

Delete thread.

Hello all,

Working on this page:
http://gatehouse.graffetto.com/rollover.html

When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div.

Any ideas how to rig this up for IE? Here's the simple version of the code:

Code:

<div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';">
	<div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div>
	<div class="storyByline">1/7/07 - By Max Bowen</div>
	<div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div>
</div>

any help would be great, thanks!

like you see in pic table rows are different color.



but i wanna block this for popup.

this is popup html
Code:

			  <tr>
				<td class="td_popup"><div class="f1">First Name :</div></td>
				<td class="td_popup"><input name="firstname" id="firstname" type="text" /></td>
			  </tr>

js for css

Code:

$(document).ready(function() {
	zebraRows('tr:odd td', 'odd');
	
	$('tbody tr').hover(function(){
	  $(this).find('td').addClass('hovered');
	}, function(){
	  $(this).find('td').removeClass('hovered');
	});
	
	//default each row to visible
	$('tbody tr').addClass('visible');

css

Code:

	th:hover {
		cursor:pointer; 
	}	

	.td1
	{
		background:#666666;
		height:25px;
		text-align:left;
		font-weight:bold;
		font:arial;
		font-size:12px;
		line-height:10px;
		color:#FFFFFF;
		padding:2px;
		margin-left:auto; 
		margin-right:auto;
		text-indent:3px;
	}

	td.odd {
		background-color:#F0F0F0;
	}

	.td_popup{
		background-color:#DDD;
	}

hi all.

is there a way to change the css border-color attribute of a table with onmouseover? so the table, where the mouse is on, is highlighted in a new color?

thanks.

j0sh

Can this be done?
My table is 4 columns with about 400 rows.

I want to style the background color across each row but in fixed blocks/rows.
i.e
rows 1-55 red
rows 55-60 green
rows 61-100 red
rows 121-158 green
etc
just using two colors.

Any pointer in how it could be done?

Hey
i got some cells in a table which hold links.
How can i make only the links inside these cells a different color?

This is the class i use on the table cells:
css Code:
Original - css Code .selectedContactRow{ background-color: white; color: black; }

  

  


 .selectedContactRow{


     background-color: white;


     color: black;


 } 

I only know how to change the link colors in general.
css Code:
Original - css Code a:link{color: red;} a:hover{color: red;} etc.

  

  


 a:link{color: red;}


 a:hover{color: red;}


 etc. 

thanks in advance.

I am creating a table of a school's schedule, Mon-Friday across the top and 8:30-3:00 along the side, one row for every 15 min increment.

I am using a td with rowspan=3 (or 2, or 4) to represent an activity that lasts for more than 15 minutes, which most do. I have a border around each td so it shows how long each activity lasts. I have had no problem creating this table.

However, what I'm having trouble with is having each 15 minute row alternate different background colors (e.g. gray/white) within the td. So if the activity td spans three rows, I'd like the row background colors to show white/gray/white within the td. The effect should be like the old alternating color computer paper -- different color for each line, yet each activity has a black border around it that spans more than one line.

I've tried setting each 15 min tr to alternating classes, <tr class="white"> then <tr class="shaded"> etc. but this only has the effect of changing the color of a td that begins in this row. Any td defined above that's spanning this row retains the color from the original row it was created in.

I know I could achieve this by doing away with the rowspans, but then things get a bit more complicated -- manually having to set top and bottom borders for each activity and also losing the vertical-align properties within the td. Would like to avoid this if there is a better way.

I am working on modifying a drupal theme style sheet. I am having trouble over riding a table row hover background color.

The style sheet has the background color defined as
Code:

.block .menu a:hover { background-color:#ecf4f8; }

I am working in the footer block trying to over ride the background color as transparent. Everything I try is not working. The theme has a bunch of these classes defined as "Power" Hover Classes.

So, back to my footer block modification. Here are the inherited classes when I inspect the element, pinpointing the background-color for hover that is not being overridden for transparent.
Code:

 div.node .field .field-label-inline, div.node .field .field-label-inline-first, .node-links ul.links:hover, .comment-links ul.links:hover, .view .grouped-admin:hover, .multistep li.active-step, .form-text:focus, .form-textarea:focus, .form-select:focus, .prose a:hover, table tr:hover td, table td.active, .block table tr.active, .block .menu a:hover { background-color: #ECF4F8; }

Can anyone help me write a css over-ride in my footer block for this?

So I know that tables are a no-no now-a-days, but I am trying to help troubleshoot this problem without having to rebuild the site.

So this problem only occurs in IE, of course!

When you go to this page: http://dysonracing .com/company/news/archive.php?archive_year=2010

The grey box on the left that displays the news/events nav get a bit out of wack. What I mean by that is that the grey background on the table does not totally flow anymore. The left and right edges of the table dislay white at the top, then the grey about 1/2 way down and then black at the bottom, when the whole thing should be grey. It has a repeating background image. Even if I remove the image and just us the #333333 for the background color, issue is not solve.

It is strange because this problem only happens if you are viewing one of the archive links at the bottom of the page. If you just click News+Events from the main nav, it looks fine. But go to an archive link and it get funky.

Any ideas why this is displaying this way...and only in IE?!

I have a table that contains a links in each cell. However, when I set a style to change the background with 'a:hover' it only changes the area around the link text. What I want is to change the background of the entire cell containing the link. TIA.

I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help!

the code here works fine, except that the displayed text changes from white to black. It would be nice if each new text would start as FFFFCC and then fade to 3E3D11. Here is the script that I'm manipulating from Java Script Source:

<!-- Paste this code into the CSS section of your HTML document -->

#tic {
/* enter any styles for the ticker below */
border: .05em #CEC3AD solid;
font-size:0.85em;
padding:10px;
width:400px;
line-height:20px;
}
#tic * {
/* this will hide all children tags */
font-size: 1em;
margin:0px;
padding:0px;
display:none;
}
#tic a {
/* add more tags to this list if you wish to display them inside the children */
display:inline;
}




<!-- Paste this code into an external JavaScript file -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: James Crooke :: http://www.cj-design.com */

var list; // global list variable cache
var tickerObj; // global tickerObj cache
var hex = 255;

function fadeText(divId) {
if(tickerObj)
{
if(hex>0) {
hex-=5; // increase color darkness
tickerObj.style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadeText('" + divId + "')", fadeSpeed);
} else
hex=255; //reset hex value
}
}

function initialiseList(divId) {
tickerObj = document.getElementById(divId);
if(!tickerObj)
reportError("Could not find a div element with id \"" + divId + "\"");
list = tickerObj.childNodes;
if(list.length <= 0)
reportError("The div element \"" + divId + "\" does not have any children");
for (var i=0; i<list.length; i++) {
var node = list[i];
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
tickerObj.removeChild(node);
}
run(divId, 0);
}

function run(divId, count) {
fadeText(divId);
list[count].style.display = "block";
if(count > 0)
list[count-1].style.display = "none";
else
list[list.length-1].style.display = "none";
count++;
if(count == list.length)
count = 0;
window.setTimeout("run('" + divId + "', " + count+ ")", interval*1000);
}
function reportError(error) {
alert("The script could not run because you have errors:\n\n" + error);
return false;
}

var interval = 7; // interval in seconds
var fadeSpeed = 40; // fade speed, the lower the speed the faster the fade. 40 is normal.





<!-- Paste this code into the HEAD section of your HTML document
Change the file name and path to match the one you created -->

<script type="text/javascript" src="yourFileName.js"></script>




<!-- Paste this code into the BODY section of your HTML document -->

<div id="tic">
<h1>Welcome to The JavaScript Source ...</h1>
<p>
The JavaScript Source is a part of Jupitermedia, in the Web Developer channel of the internet.com network.</p>
<p>
All the scripts on this site are free for personal or business use.</p>
<p>
The only requirement is that you leave the credit information inside the script.</p>

<h2>JavaScripts</h2>
<p>
JavaScript programs are contained within the HTML code of the Web page and are interpreted by the browser as it's read.</p>
<p>
JavaScript provides greater flexibility through such luxuries as being able to create windows, display moving text, sound or other multimedia elements with relative ease.</p>

<h2>Some Basics</h2>
<p>
JavaScript is not Java; it is an object-based scripting language; and it is cross-platform.
</p>
</div>

<script type="text/javascript">
<!--
initialiseList("tic");
//-->
</script>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div>

Hi,

I'm just learning css and need some help. I am attaching an html page that has a navigation bar that changes the background color of the table cell when you mouse over the text link. It works OK but I would like to have the bg color change when you mouse over the td cell. I am currently making it look like it changes the td background by adding Code:

display: block;
line-height: 32px;

to the "td.navbar a:hover" class.
Is it possible to change the td background when mousing over it using only css?

Here's the code that I have now:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
}
td.navbar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
td.navbar a:link{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
td.navbar a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
td.navbar a:hover{
	background-color: #000000;
	height: 33px;
	width: 88px;
	display: block;
	line-height: 32px;
}
td.navbar a:active{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	
	}
-->
</style></head>

<body>
<table width="780" height="35" border="0" cellpadding="0" cellspacing="0" bgcolor="#000099">
  <tr>
    <td width="41">&nbsp;</td>
    <td width="2"></td>
    <td width="88" height="33" class="navbar"><div align="center"><font><a href="http://www.mysite.com/">Home</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><a href="#about">About</a></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/support.php">Support</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/contact.php">Contact</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/services.php">Services</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/shop.php">Products</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/links.php">Links</a></font></div></td>
    <td width="2">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>


</body>
</html>