CSS - Change Css Border-color Of A Table With Onmouseover?

Hey all,

I am having a little trouble with some stylesheet/javascript. I am trying to change the style on mouse over of another element.

I have a DL with one DT & and one DD.

I would like to be able to change the style of the DD on mouse over the entire DL. I'd like to change the class 'background' to 'backgroundOver'.

The code:

Code:

<dl>
  <dt>
    <p>Text</p>
  </dt>
  <dd class="background">
    <p>Text</p>
  </dd>					
</dl>

Any help with this would be much appreciated.

Cheers in advance.

I am trying to find a script so that when you mouseover any element in a standard table the entire column background color will change. Doing this with individual cells and even row bg changes is easy, though I am having problems with entire column changes. Any help?

I'm building a site (still sort of a novice) using CSS and I can't seem to get the border colors to display correctly.

I would like the top-border to be the same color as right and left. When viewed in Dreamweaver, the border appears orange but when viewed in browser, the border is black.

How do I get the top border to be orange?

Here is my CSS:
Code:

#right_body {
	width: 708px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	display: inline;
	border-top: 3px;
	border-top-style: solid;
	border-top-color: FF6A00;
	border-left: 2px;
	border-left-style: solid;
	border-left-color: #FF6A00;
	border-right: 2px;
	border-right-style: solid;
	border-right-color: #FF6A00;
}

And my HTML:
Code:

<div id="left_side">left</div>
  <div id="right_body"> middle  </div>
    <div id="right_side">right</div>

i am trying to get rid of the border in IE9 or have the border color to match with the background color so that it doesn't look like there is one. This code works on google chrome but doesn't work on IE9.

on the css i have:
div.menu ul li a, div.menu ul li a:visited
{
background-color:#3a4f63;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
border-color:#3a4f63;
}
on the asp page I have:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="About Us">
</asp:MenuItem>

<asp:MenuItem Text="Freight Services" Value="Freight Services"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Text="Customers" Value="Customers"></asp:MenuItem>
<asp:MenuItem Selectable="False" Text="Carrier Corner" Value="Carrier Corner">
<asp:MenuItem Text="Carrier Setup" Value="Carrier Setup"
NavigateUrl="~/Account/Register.aspx?ReturnUrl=~/Carrier.aspx&TypeOfUser=Carrier"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Contact Us" Value="Contact Us"></asp:MenuItem>
</Items>
</asp:Menu>

Like many programmers I use a combination of a bunch of different things to provide me the website I want. I use php, css, sql . . . more than one thing.

I have a utility written in '04 by Patrick Fitzgerald (http://www.barelyfitz.com/projects/csscolor/) I use on almost every site I code. I don't put it in the page, I put it in the css file like this:

Code:

<?php
	header("Content-type: text/css");
	include_once("../inc/csscolor.php");
	include('inc/settings.inc');
	$basea = new CSS_Color($darka);
	$baseb = new CSS_Color($darkb);
?>

Then in the css I use something like

Code:

.cart_button {
	border:1px solid #<?= $baseb->bg['+2']; ?>;
	padding:2 4;
	background-color:<?= $baseb->bg['+3']; ?>;
	color:black;
	margin-bottom:-6;
}
#basket {
	float:right; 
	width:140px;
	border:1px solid <?= $baseb->bg['+3']; ?>;
	padding:10px;
}
td.cart, th.cart {
	border:1px solid <?= $baseb->bg['+3']; ?>;
	padding:6px;
}

to display the color of elements.

So here's my conundrum. I have elements with borders that aren't displaying. I'm pretty sure it's a compatibility issue. It renders in IE but not in FF.

Thoughts?

HeadElf

How can I use CSS to specify the color I want for the image borders on the page?

Hi,

This used to be my solution:
Code:

<table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'>

But this only works well on IE - not Mozilla

Now I want to use CSS:
Code:

	.results {
	  	border: 1px solid #CCCCCC ;
	}

Code:

<table class='results'>

---------------

The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't.

If I specify
Code:

<td class='results'>

for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping).

Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration?

Thanks a lot!

I would like to set up a table with a different border than the cells inside it. Here's my code:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
	TD {border: 1px solid #ccc}
</style>


</head>

<body>
<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different?

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> 

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 have the following sample html. In here moving mouse over in any <li> changes backgroung color. Also I want to have the following as is due to the currently functionality
Code:

<li><a onMouseover="this.style.cursor='crosshair'; cssdropdown.dropit(this,event,'dropdownmenu2')">News</a></li>

here I still want to have <a without href but only wants to change the cursortype and the background color, but also I want the background color to
show like others i.e. background color changes too. How can I achieve this functionality.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
#sample ul li a{
float: left;
color: #7F7F7F;
font-weight: bold;
padding: 6px 12px 6px 7px;
text-decoration: none;
background-color: #9C2B01;
}

#sample ul li a:hover{
background-color: cyan;
}
</style>
</HEAD>

<BODY>
<table><tr><td>
<div id="sample">
<ul>
<li><a href="http://www.test.com">Home</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropdownmenu1')">Education Services</a></li>
<li><a onMouseover="this.style.cursor='crosshair'; cssdropdown.dropit(this,event,'dropdownmenu2')">News</a></li>
<li><a href="http://cnn.com" onMouseover="cssdropdown.dropit(this,event,'dropdownmenu3')">Search</a></li>	
</ul>
</div>
</td></tr></table>
</BODY>
</HTML>

Any help is appreciated. Thanks

I know how to make the background of a link change but how do you do it if it isnt a link? in css...

Ok so I've got a dropdown menu (what you use to select size/font/color when posting a thread) for a search form i'm doing, but the thing is nothing i seem to do in css seems to be able to get rid of the ugly grey outline and grey dropdown button, but as i'm seeing here on the forums the same ugly grey outline appears, is this a problem that is only resolved with like the latest version of i.e., is it possible or not?

Thank you,
Robert Velasquez
UpBeetMusic.com

Hello, and thanks in advance for anyone who helps me with this.

I want to know if it's possible to choose one color on a page and change it to another.

This is the page I want to change: http://www.neopets.com/randomfriend.phtml?user=bubbapyque

The menu on the left is uneditable by me because it's on Neopet's server. But I'd like to change the yellow color of the menu to something else.

Possible?

Thanks.
Crystal

I am using a Wordpress template called Arthemia Premium. I want to change the background color in the headline section, but nothing "sticks" when I change the hex color codes in the style.css.

Tell me what to post here and I will.

Thanks

BTW I have very basic knowledge of CSS