Page 1 of 1

CSS :HOVER properties.

Posted: Sat Oct 25, 2003 4:36 pm
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

Posted: Sat Oct 25, 2003 9:43 pm
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

Posted: Mon Oct 27, 2003 2:35 am
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

Posted: Mon Oct 27, 2003 5:11 am
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)

Posted: Mon Oct 27, 2003 10:14 pm
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;
}

Posted: Tue Oct 28, 2003 4:41 am
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.

Posted: Tue Oct 28, 2003 12:17 pm
by microthick
Currently only Mozilla supports HOVER for TDs. Not even new Netscape 7 supports it yet.

Posted: Tue Oct 28, 2003 10:27 pm
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

Posted: Wed Oct 29, 2003 2:21 pm
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.

Posted: Wed Oct 29, 2003 5:23 pm
by gavinbsocom
what would it allow you to do? what would be the purpose gen-ik on doing it ?

Posted: Wed Oct 29, 2003 5:57 pm
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"...)

Posted: Wed Oct 29, 2003 6:07 pm
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.

Posted: Fri Oct 31, 2003 6:58 pm
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