CSS - Different Hover Colour For Table Row

I was wondering on this table I have I want it to have black background colour but I want to change the opacity to where you could see the background image too

Hi there,

I have a table which I want to have a background color on hover.

I have tried this:

PHP Code:
<table style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #888888" width="100%"  border="0" cellspacing="0" cellpadding="8">
  <tr style="color: #FF7D13;" bgcolor="#f1f1f1">
    <td width="25%"><strong>Header 1</strong></td>
    <td width="25%"><strong>Header 2</strong></td>
    <td width="25%"><strong>Header 3</strong></td>
    <td width="25%"><strong>Header 4</strong></td>
  </tr>
 <div class="spec" onclick="location.href='#';">
 <tr bgcolor="#f1f1f1">
    <td width="25%"><strong>Designers</strong></td>
    <td width="25%">1</td>
    <td width="25%">2</td>
    <td width="25%">3</td>
  </tr>
  </div>
</table> 





I have given a class to "spec" with a background color, but it doesn't work.

Any ideas what is wrong?

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?

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 the following css:
Code:

.table1 {
	border-collapse: collapse;
	width: 50%;
	margin: 24px;
	font-size: 1.1em;
}

.table1 th {
	background: #3e83c9;
	color: #fff;
	font-weight: bold;
	padding: 2px 11px;
	text-align: left;
	border-right: 1px solid #fff;
	line-height: 1.2;
}

.table1 td {
	padding: 6px 11px;
	border-bottom: 1px solid #95bce2;
	vertical-align: top;
}

.table1 td * {
	padding: 6px 11px;
}

.table1 tr.alt td {
	background: #ecf6fc;
}

.table1 tr.over td, tr:hover td {
	background: #bcd4ec;
}

However all tr and td's now getting a hover effect.
i tried several methods but I'm to unpracticed with css.

Grtzz whitehat

I have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so

<span style="background-color:#336699; width:100px"></span>

Now why wouldnt that work and is there a better way to do what im trying to achieve?

In CSS, is it possible to define certain colours for a certain piece of text?

For example, in the site I'm doing at the moment, the paragraph font-colour is black, but when the text ''CrudeSep'' comes up, I would like The 'sep' piece of the text to be in orange. This would save me having to make an image to do this!

Any help appreciated.

Hi.

Is there any way to:

a) Change background color of the title box that appears when you hover over an image AND

b) Reduce the delay it takes to appear?

Thanks.

I'm having trouble with my list on a site im working on.

When you hover over the link, I want it to display a background colour the full width of the box, not just the length of the text.

You can see the menu, on the left hand side - HERE.

Here's the CSS of the list.

Code:

div #leftcontent {
	padding-left: 0px;
	padding-top: 0px;
	display: block;
	font-size:90%;
	font-family:Arial, Helvetica, sans-serif;
}

#leftcontent a {
	text-decoration:none;
	padding:0px;
	color:#000066;
}

#leftcontent a:hover {
	text-decoration:none;
	background-color:#66CCFF;
	background-color-width:30px;
}


#leftcontent ul{
	margin: -10px 10px 2px 5px;
	padding: 0;
	list-style: none;
}


#leftcontent li a{
	margin: 0 0 .5em 0;
	padding: 2px 5px 5px 0px;
	line-height: 1.4em;
	font-size:100%;
	color:#FFFFFF;
}

Any help is appreciated.

Cheers.

__________________
ULTRASUK

Is it possible to set the colour of the padding in a table cell?

Hi all,
the page i am talking about is...

http://sydneynightowl.com.au/home.php

The problem is the the div 3column seems to start too early in the work flow and also the background colour on the header bleeds.

The div and header should be starting after the first 3 divs (which are set to float)

I hope i have explain this correctly, any help is apriciated.

The css code is

Code:

@charset "utf-8";
/* CSS Document */


body {background-color:#000000;
	background-image: url(../images/background.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	color:#FFFFFF;
	font-family:"Lucida Sans Unicode", sans-serif;
	font-weight:100;
	font-size:12px;}


#container {
	position:absolute;
	width: 700px;
	left:50%;
	margin-left:-358px;
}
	
	#header {
	margin-top:0px;
	height: 115px;}
	
		#toolbar {height: 30px;
		line-height:10px;
		padding: 0px 10px;
		font-variant:small-caps;
		}

	#cornerlogo {
	position:fixed;
	top:5px;
	left:5px;
}

	
	#topnavigation {height: 35px;
	line-height:35px;
	text-align:center;}
	
	#content { border-bottom:1px;}

		.3column {width:695px;
		padding-right:5px;
		padding-left:5px;
		margin-top:5px;}
	
	
		#leftcolumngl {float:left;
		width:223px;
		height:370px;
		padding-right:5px;
		padding-left:5px;
		padding-top:5px;
		margin-top:15px;
		margin-right:5px;
		border:#FFFF00 solid thin;}
	
		#middlecolumngl {float:left;
		height:370px;
		width:225px;}
	
		#rightcolumngl {float:left;
		height:370px;
		width:230px;
		padding-left:5px;}
	
		#leftcolumn { float:left;
		width:230px;
		padding-right:5px;}
	
		#middlecolumn {float:left;
		width:230px;}
	
		#rightcolumn {float:left;
		width:230px;
		padding-left:5px;}
		
		#imagecolumn {float:left;
		width:340px;
		padding-left:5px;}
		
		#infocolumn {float:left;
		width:340px;
		padding-left:5px;}
		
	
	#footer {height: 30px;
	border:thin solid #FFFFFF;
	clear:both;
	text-align:center;
	margin-bottom:30px;
	margin-top: 30px;
	line-height:25px;}

#bgfirst {
	position:absolute;
	top:190px;
	left:0px;
	width:90%;
	height:200px;
	margin-bottom:20px;
	background-color:#00CC00;
}

#bgsecond {position:absolute;
	top: 400px;
	right:0px;
	width:90%;
	height:200px;
	background-color:#660066;
}



a:link {color: #fffc00; font-weight: normal;}
a:active {color: #fffc00; font-weight: normal;}
a:visited {color: #fffc00; font-weight: normal;}
a:hover {color: #fffc00; font-weight: bold;}

a.event:link {color: #fffc00; font-weight: normal;}
a.event:active {color: #fffc00; font-weight: normal;}
a.event:visited {color: #fffc00; font-weight: normal;}
a.event:hover {color: #fffc00; font-weight: bold;}

a.club:link {color: #fffc00; font-weight: normal;}
a.club:active {color: #fffc00; font-weight: normal;}
a.club:visited {color: #fffc00; font-weight: normal;}
a.club:hover {color: #fffc00; font-weight: bold;}

h1 { text-align:center;
	color:#000000;
	background-color:#fffc00;
	margin-left:3px;
	margin-right:3px;
	font-variant:small-caps;
	font-size:22px;}

h2 {text-align:center;
	color:#fffc00;
	background-color:#333333;
	margin-left:3px;
	margin-right:3px;
	font-variant:small-caps;
	font-size:18px;}

.ourprice {
	display:inline;
	color:#FF0000;
	line-height:20px;
	font-variant:small-caps;
	font-size:14px;}


img {
	border-color:#fffc00;
	border-style:solid;
	border-width:thin;
}

img.noborder { border:none;}

img.venues {float:left;	
	margin:10px;}

	.mainnavimages {
	border-color:#979700;
	border-style:solid;
	border-width:thin;
}

p {line-height:15px;}

strong { color:#fffc00;}

Hey Guys,

I have validated both my html and css. The only errors that come back for my css is that I have the same colour background and whatnot. BUT that's what I want. So there aren't really errors.

Here is my page:
jacenta.com/whichsbc

What I have been attempting to achieve and been utterly failing is:

If you goto the menu on the side and hover over you will see a light grey background show up. Basically I want that to extend to ethier ends of the box. Is there anyway for this to be done??? I've tried everything and I just can't seem to figure this one out. A good example of what I am looking for is in my drop down menu at the top when you select a heading and a dropdown comes down, hover over an item and a light blue background will show up.

It's probally something simple... I know. But ahh. It's just so frusterating!

If someone could help me out I would apperciate it so much!
You all are such a great help.
- Jacenta

A background image is being applied to an image, but I cant find anywhere in the CSS where this color is being applied. Ive also been fiddling with the position of the arrows using margins and padding, but these dont seem to have an effect either.

Here is a link to my page:
http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14

Here are the two images in question:
http://www.zombiemod.com/rm/nina2/t...ntrols-left.png
http://www.zombiemod.com/rm/nina2/t...trols-right.png

You can see there is a background color to the images of #f0f0f0 and the positioning isnt correct, im trying to remove the background colour and find out how to reposition the horizontal position of these images.

Here is my HTML:
Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controls">
        <ul id="control-buttons">
    <li><button id="controls-left">
      <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
      </button></li>
    <li><button id="controls-play">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
      </button></li>
    <li><button id="controls-right">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
      </button></li>
        </ul>
      </div>

Here is my CSS:

Code:

#slideshow-controlsx {
    position: relative;
    height: 14px;
    margin: 0px 0 -58px;
    overflow: hidden;
    z-index: 100;
    text-align: left;
	top:200px;
}

#main-image-container > #slideshow-controlsx {
    margin-bottom: -50px;
	margin:0 auto;
}

#slideshow-controlsx ul {
    position: relative;
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none inside;
	width:690px;
   /* background-color: #000;*/
 /*   opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=40);   Lower opacity for IE since the controls don't hide */
}

#slideshow-controlsx ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#slideshow-controlsx button {
    width: 8px;
    height: 14px;
    /*margin: 0;
    padding: 0;*/
  /*  background-color: #000;*/
  	padding:0px;
    border: none;
    text-align: center;
    cursor: pointer;
}

Can anyone please tell me where the background colour #f0f0f0 is being applied, and how I should be modifying the code to move the images closer in towards the centre of the image.

James

Hi,
I have some text which has a line through it, i.e.

.sale_originalprice {
color:#666666 ;
font-family: Verdana, Arial ;
font-size:10pt ;
font-weight:normal;
text-decoration: line-through;
}

What I want to do is change the line-through colour to red. But the text should remain grey (i.e. #666666)

Is this possible?
I tried
text-line-through-colour: red;
already

but that didnt work

Thanks!