CSS :HOVER properties.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
toms100
Forum Contributor
Posts: 119
Joined: Wed Feb 26, 2003 10:29 am
Location: Bristol,UK

CSS :HOVER properties.

Post by toms100 »

in a site i am designing, i have come accross some problems.
basically, im trying to keep all the style elements in a stylesheet.
i have a table, which holds my menu like this:

Code: Select all

<td class="menu" align="center" width="20%">News</td>
then in my css file,:

Code: Select all

td.menu &#123;
	border: thin dotted #DCDCDC;
&#125;
td.menu:HOVER &#123;
	background-color: #DCDCDC;
	color: #191970;
&#125;
now this displays perfectly in Mozilla firebird, but not in ie?!?
here is the site where it is used:
http://uksutton.extreme-servers.net
what other ways could i use that are cross browser compatable to get a similar effect?

hope someone can help

Tom
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post by Nay »

Maybe with Javascript:

Code: Select all

<script language="JavaScript" type="Text/JavaScript">
<!--
function color(color, area) &#123;
document.getElementById(area).style.background = color;
&#125;
//-->
</script>

<div id="blue" onMouseOver="color('red', 'blue');" onMouseOut="color('blue', 'blue');">
Blue DIV
</div>
-Nay
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

because ie is broken. m$ thinks they're better than w3c.

my suggestion is to play to find what works in M$IE and then see what happens when you combine the two
User avatar
Fredix
Forum Contributor
Posts: 101
Joined: Fri Jul 18, 2003 2:16 pm
Location: Wehr (Eifel) Germany
Contact:

Post by Fredix »

yeah, IE is the biggest headache for a webdeveloper just because its CSS support is bad.

As far as I see the words inside those <td> are going to be links, so you could use a:hover (which is supported by IE) and in addition what you already have.
or JavaScript.

I also would like to note that we all should adopt the W3C standards and validate using validator.w3.org regularly.


using XHTML:

@toms100
no such attrib. align, use text-align instead! (and better put it to your style sheet for better HTML-code reading)

@Nay
no such attrib. language (just leave it, type is enough)
gavinbsocom
Forum Commoner
Posts: 71
Joined: Tue Sep 30, 2003 9:51 pm

Post by gavinbsocom »

Code: Select all

td.menu &#123; 
   border: thin dotted #DCDCDC; 
&#125; 
td.menu:HOVER &#123; 
   background-color: #DCDCDC; 
   color: #191970; 
&#125;
why dont you use all the a: ?



td.menu {
border: thin dotted #DCDCDC;
}

td.menu a:link {
background-color: red;
color: blue;
}

td.menu a:active {
background-color: red;
color: blue;
}


td.menu a:visited {
background-color: red;
color: blue;
}


td.menu a:hover {
background-color: #DCDCDC;
color: #191970;
}
User avatar
Fredix
Forum Contributor
Posts: 101
Joined: Fri Jul 18, 2003 2:16 pm
Location: Wehr (Eifel) Germany
Contact:

Post by Fredix »

yes that is similar to what I've said
but note that though the whole td will change its color only clicking the link itself will forward you to another page. Some users may not expect this as there are sites where it does not matter if you click the link itself or the td.
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

Currently only Mozilla supports HOVER for TDs. Not even new Netscape 7 supports it yet.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

that's because mozilla is the original open-source it's often the first browser to implement new standards from the w3c as a result. it's been that way for a while
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

microthick wrote:Currently only Mozilla supports HOVER for TDs. Not even new Netscape 7 supports it yet.
As mentioned use JavaScript to do :hover effects on anything other than <a> objects.

Code: Select all

<td class="myStyle" onmouseover="this.className='newStyle'" onmouseout="this.className='myStyle'">Some Text</td>
To make the entire TD look like a link include cursor:pointer in it's style.
gavinbsocom
Forum Commoner
Posts: 71
Joined: Tue Sep 30, 2003 9:51 pm

Post by gavinbsocom »

what would it allow you to do? what would be the purpose gen-ik on doing it ?
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

don't ask, try ;)

Code: Select all

<html>
	<head>
		<style type="text/css">
			.myStyle &#123; background-color: red; &#125;
			.newStyle &#123; background-color: green; cursor: pointer; &#125;
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td class="myStyle" onmouseover="this.className='newStyle'" onmouseout="this.className='myStyle'">Some Text</td> 
			</tr>
		</table>
	</body>
</html>
(just kidding about "don't ask"...)
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

gavinbsocom wrote:what would it allow you to do? what would be the purpose gen-ik on doing it ?
Well that's done to how creative you want to get with your website.

Let's put it this way..... almost every object in your webpage can be turned into a link using ONMOUSEOVER and ONMOUSEOUT to flip the CSS style (if you want to) and ONCLICK to change pages.

The ONCLICK at it's most basic would link to another page using ONCLICK="window.location='some_page'".

It's all down to imagination and experimentation.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

the problem is that some ppl will browse with javascript turn off for fear of viruses.


that's why i try to have all links accesable in a way you can get there without javascript...but someplaces it's not possible, so i claim it's necessary on my site
Post Reply