CSS - Change Color Of Links Inside A Table Cell

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

I would like to have the background-color of a complete table row changed when I move the mouse over it.

Any ideas how to realize this within a CSS file (not with javascript)

Thanks in advance

Im using this to make an onscroll effect
Code:

table.left {border-collapse:collapse;
                float:left;
		  margin-left:10px;
		  margin-right:10px;
		  background:#8f8f8f;
		  padding:5px;
	          color:#000000;
                 font-family:Verdana;
		  text-decoration:none;
	
     }

td {padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;}

td.bg:hover {
background:url(images/yellow.png);
padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;



}

And the links don't format with the typical css markup
Code:

a:active {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}
a:link {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}
a:hover {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}

Ive tried a couple different things like making td.bg:link, td.bg:active with the specifications->no luck
Note:this is in IE


Nevermind...I just figured it out..used a link class and set the visited attribute

I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well.

Here is a setup of my table
Code:

<div id="Content">
        <p class='instructions'>Click a column header to sort the table.</p>
        <div spry:region="jdmba">
          <div spry:state="loading" class="loading">Please wait while alumni data loads&hellip;</div>
          <table class="spry" cellspacing="0" cellpadding="0">
            <tr>
              <th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
              <th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
              <th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
              <th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
            </tr>
          </table>
          <div class="Overload">
            <table class="spry" cellspacing="0" cellpadding="0">
              <tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
                <td width="108px">{last}</td>
                <td width="106px">{first}</td>
                <td width="269px">{account}</td>
                <td width="66px">{state}</td>
                <td width="82px">{hls_year}</td>
                <td width="82px">{hbs_year}</td>
              </tr>
            </table>
          </div>
        </div>

Here is my CSS file
Code:

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#News a:link {
	color: #00F;
}
#News a:hover {
	color: #00F;
	text-decoration: underline;
}




body {
	background: #000 repeat;
}




#wrap {
	background: #000;
	width: 900px;
	border: thick solid #9C0029;
	float: left;
	height: auto;
	padding: 0px 0px 1em;
	margin-top: 2%;
	margin-left: 10%;
}
#footer {
	font: bold small/50px Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #9C0029;
	text-align: center;
	height: 50px;
	width: 850px;
	margin-left: 25px;
}

#Header {
	background: #8F001C url(../images/banner.jpg) no-repeat center center;
	width: 850px;
	height: 150px;
	margin-top: 20px;
	margin-right: 20px;
	margin-left: 25px;
}
h1 {
	font: normal 18px Arial, Helvetica, sans-serif;
	color: #000;
	text-align: left;
}
h2 {
	font: small Georgia, "Times New Roman", Times, serif;
	color: #333;
	text-align: justify;
}
h3 {
	font: normal medium "Times New Roman", Times, serif;
	color: #FFF;
}
h4 {
	font-size: small;
	color: #333;
	text-align: left;
}
.banners {
	background: #FFF0B2;
	width: auto;
	height: auto;
	font: 18px Arial, Helvetica, sans-serif;
	padding-top: .5em;
	padding-bottom: .5em;
	text-indent: 10px;
}
.Content {
	font: 14px/normal Georgia, "Times New Roman", Times, serif;
	text-align: justify;
	display: block;
	padding: 2em 3em 3em;
}
.Content a:link {
	color: #00F;
}
.Content a:hover {
	color: #00F;
	text-decoration: underline;
}
.Content a:visited {
	color: #00F;
}

#inner_body {
	background: #FFF;
	height: auto;
	width: 800px;
	margin-top: 0px;
	margin-left: 50px;
	padding-top: 0.5em;
	padding-bottom: .5em;
}
#inner_border {
	margin: 0em auto auto;
	border: thin solid #8E887C;
	width: 775px;
	padding: 1em 0em 0em;
}
#nav_bar {
	height: 3em;
	width: 100%;
	margin-left: 0%;
	text-align: center;
}


#Content {
	height: auto;
	width: 95%;
	padding: 0em 0% 5em;
	margin: 2.5% 2.55% 2%;
	text-align: left;
	font-family: Verdana;
}
#nav {
	height: auto;
	width: 20em;
}

#News {
	margin-left: 2px;
	height: 30%;
	background: #FFF0B2;
	padding: 3%;
}
#News a:visited {
	color: #00F;
}

.Overload
{
	height: 208px;
	overflow: auto;
}

.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
	font-family: Verdana;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
}

.instructions {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-bottom:8px;
}

.loading {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-top:0px;
	margin-bottom:8px;
	color:#900;
}

table.spry th {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry td {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px;  }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }

I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black.

Any ideas?

Thanks!

I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong.

Correct look Incorrect look

I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any.

Here is my main CSS:
Code:

	body		{ background-color: #FFFFFF; }
	a		{ text-decoration: none; font-weight: bold; }
	a:link		{ color: #003366; background-color: transparent; }
	a:visited	{ color: #003300; background-color: transparent; }
	a:active	{ color: #339933; background-color: transparent; }
	a:hover		{ text-decoration: underline; }
	table		{ border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
	td, th		{ border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
	tr.one		{ background-color: #FFFFFF; }
	tr.two		{ background-color: #DDDDDD; }
	table.squares	{ border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
	td.square	{ border: 1px solid grey; padding: 4px; }
	td.nopadding	{ padding: 0px; }
	.default	{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
	.h1		{ font-size: 200%; font-weight: bold; text-align: center;}
	.h2		{ font-size: 120%; font-weight: bold; }
	.h3		{ font-weight: bold; }
	.step		{ font-size: 150%; font-weight: bold; color: #999999; }

Here is one of the sets of squares:
Code:

<table class="squares">
    <tr>
        <td class="square" style="background-color: #CCCC66"></td>
        <td class="square" style="background-color: #CC9966"></td>
        <td class="square" style="background-color: #990000; border: black"><td>
        <td class="square" style="background-color: #669966"></td>
        <td class="square" style="background-color: #669999"></td>
    </tr>
</table>

And finally, here is one of my progress bars:
Code:

<table style="color: white; width: 100px">
    <tr>
        <td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
        <td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
    </tr>
</table>

And in case that code is not enough, here is a link to the full HTML.

According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers?

My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work?

Hi there!

This might seem really basic but I don't seem to be able to remove the default border from a cell I created.

The code looks like this:

"<p> </p>
<table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;">
<tbody>
<tr>
<td>
<div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;">
<p align="center">
<img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" />&nbsp;</p>
<p align="center">
</p>
<p> </p>
</div>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;&nbsp;</p>

How shall I do to hide the border?

Thanks in advance!

/Kristoffer

I have the following css Quote:
table.imagetable {
font-family: Times;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}

table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999; }

table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999; }


and I would like to make it so I can choose the background color of a row.
How do I go about doing this?

Writing bgcolor="#cccccc" in <tr> does not work.

Thanks,

Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked.

Is there a way to get this to happen with out changing the size of the cell?

I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table.

Does anyone know if/how I can get a CSS script for link classes that would only change the colour of the underline like the one at the top of Altavista's translate page??
I have tried viewing the source but can't seem to put my finger on it.

Any help would be greatly appreciated.

Cheerz,
sheermonkey.

Hi,

I have a simple table

<table id="sometable">
<tr>
<td>
<a href="link1">link1</a>
<td>
<a href="link2">link2</a>
</table>

with a style sheet
table#sometable {width: 100%;}
table#sometable a:hover{background-color: #A9A9A9;}

What I want is on a hover the whole cell changes color, not just the link. How can I do this? Also should I be using a table in the first place?

Thanks

Colin

Hello, thanks for taking the time to read my post.

I'm having a problem getting my divs to layout where I want them to.

Here is the worst example:here
Obviously, the footer is not in the traditional location. This seems the most logical for the code, the footer is at the bottom of the main div. I thought it would get pushed down by all the other stuff in the main div...

This works ok: this
But if the content for that page is short, it's going to do this: here

This only works for very short content, nesting it in with the menu: here

I am able to position it horizontally depending on which div I nest it in.

It seems to me that I should have the footer div at the end of the 'main' div so that it winds up at the bottom.

thanks for your time,
juglesh

Hi all,

I am having difficulty with the background for an image link. I have the following:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Test page</title>
    <style type="text/css">
      a:hover { color: #FFFFFF; background: #0000ff; text-decoration: none; } 
      a:hover img { background: none; }
      .box { background: #00ff00; padding: 1em; } 
      .box img { border: 0; }
    </style>
  </head>
  <body>
    <div class="box">
      <p><a href="#"><img src="images/a1a8aa6a43.jpg" alt="" /></a></p>
      <p><a href="#">Text link</a></p>
    </div>
  </body>
</html>

I have a global style for links that change the background color and the color of the text. However, this also changes the background color of an image link which makes it look odd. I attempted to fix this with

Code:

a:hover img { background: none; }

But this does not fix the issue. Any thoughts?

I am using XHTML strict because the CMS I am using forces me to an XHTML stylesheet. Also, this is just a snippet of the code of the actual page but the bug is present in this snippet.

I've got two questions of which one is to gather some opinions to help me decide what's best.

1) color notation in CSS:
Any recommendations as to what notation I should use?

examples:
color: rgb(255,234,0)
color: slateblue
color: #FF99CC
color: #F9C

Is there some recommendation here? I'm quite used to the long hex notation e.g. #FF99CC. Is the short notation also very much accepted? And should I be using those at all or should I prepare myself with a new site to switch to rgb().

2) text-decoration yes or no?
I was thinking the following:
A) when it's absolutely clear that some text presents a link, like e.g. in a menu or some newscolumn with a brief description and a bold title, then it's "okay" to set text-decoration: none. Maybe an underline or colorchange when hovering.
B) When it's not absolutely clear what's a link, like some word in a paragraph text, use underline or at least some other colour which is consistent over the website for being a link.

Also, with point B I was thinking of choosing:
A new link: text-decoration with color and text-decoration gone with hover, for a nice effect.

With a visited link:
I) text-decoration but normal paragraph color and again text-decoration gone when hovering OR...
II) no text-decoration, but still with that color and text-decoration when hovering.

It troubles me coz I can't make up my mind. Something keeps telling me that I should try to keep those text-decorations like with B-I and simply remove the colour, instead of relying on colour to indicate a link. So forget about B-II?! Ah, it was this site which works on my conscious not to rely on color for links: http://lists.w3.org/Archives/Public/www-style/2003Mar/att-0002/01-part#colorunits

Anybody got some comments or tips? And yes also some tip on the CSS I want things to be "user-friendly" enough, but this also means that I don't want text to be broken up too much. Some people even suggested that I should take ALL links out of the paragraph and simply mention them below the paragraph. All good points, but which way to go

Hi Guys!

Most of the links in my document are set to #ffffff, because they have a dark background.

I have 'content' section that I want to show blue links. I tried adding the following code into my style sheet:

PHP Code:
 a.content:link {
color: #0000FF; 
text-decoration: underline;
}

a.content:visited {
color: #0000FF; 
text-decoration: underline;
}

a.content:hover {
background-color: #6666FF;
text-decoration: underline;
} 





And nothing!? (apart from the layout crapped up!!!!) Could someone point me in a better direction?

Full CSS below!

Thanks Charlie



PHP Code:
 html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(images/newback.jpg);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: sans-serif; 
font-size: .7em;
}
#wrap {
background-image:url(images/newback150px.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

div#navbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#formbox {
color: #000000;
padding: 2%;
border: #000044 solid 1px;
}

div#userbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

#header {
background-color: #000044;
background-image:url(images/wel.jpg);
width 100%;
background-repeat: repeat;
border-bottom: 2px #000000 solid;
color: #ffffff; 
margin:0; padding:0;
height:100px;
}

}
#left {
float:left;
width:149px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
color: #ffffff; 
text-align:center;
background-color: #000044;
border-right: 1px #000000 solid; 
}
#main {
position:relative;
margin-left:200px;
}

#content {
text-align:center;
padding:4px;
margin-right:200px;
margin-bottom:150px;
text-align:left;
}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000044;
border-top: 2px #000000 solid;
margin:0; padding:0;
background-image:url(images/newback.jpg);
background-repeat: repeat;
margin-top:-0px;
color: #ffffff; 
text-align:center;
}
div#newsbar {padding: 0%; 
text-align: center;
height:140px; 
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff;
margin-left: +150px;
margin-right: +10px; 
margin-top: -180px; 
border: 2px #000000 solid;  
width: auto;} 

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

h1 {font-size: 1.4em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h2 {font-size: 1.3em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h3 {font-size: 1.2em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h4 {font-size: 1.1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h5 {font-size: 1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

a:link {color: #ffffff; 
text-decoration: underline;} 

a:visited { 
    color: #ffffff; 
    text-decoration: underline;}     

a:hover {color: #dedbcb;
background-color: #0000FF;
text-decoration: underline;} 

Is there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text.

So, is there a way to specify a:visited { color: do-not-change; }?