Hi everyone, I have a problem with the mouse over when I go on the email link I create an email div (a DIV with a link to an email ‘mailto’) My problem is that in IE6 the mouse over its not work, once you move over it change the colour but the pointer won’t change and when you remove the pointer the link remain active Below you can find the: webpage - test.amaze.com.mt HTML/XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>My Company</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="Description" /> <meta name="keywords" content="Keywords" /> <meta name="author" content="My Company" /> <!-- ALL NORMAL BROWSERS: --> <link href="style.css" rel="stylesheet" type="text/css" /> <!-- IE6/5/4 --> <!--[if lte IE 6]> <link href="oldstyle_ie.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> <body> <div id="container"> <div id="qlinks"> <a href="mailto:info@my_company.com"><div id="email">Contact Us</div> </a> </div> <div id="header"> </div> </div> </body> </html> Code (markup): and CSS /* CSS Document */ html, body { margin: 0; padding: 0; height: 100%; } body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 11px; color: #666666; text-align: left; background: #FFFFFF; } #container { width: 100%; height: 100%; background-image: url("images/bottom_left_image.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: 100% 100%; } #email { margin: 2em 4em; padding: 0; width: 90px; height: 15px; background-image: url("images/contactus.jpg"); background-repeat: no-repeat; float: right; } #header { width: 400px; height: 150px; background-image: url("images/logo.jpg"); background-repeat: no-repeat; position: absolute; top: 35%; left: 0%; } a { color: #000000; text-decoration: none; } a:hover { color: #999999; } Code (markup): Any help please Thank you in advance Ziffa27
Hi people This is what I did <a id="email" href="mailto:info@my_company.com" title="Click to write us an email">Contact Us</a> Code (markup): #email { margin: 2em 4em; padding-right: 35px; height: 15px; background: url("images/contactus.png") no-repeat right center; float: right; position: relative; } Code (markup): and it worked perfectly
Lawlz, but let's explain what was going on for folks here. (I didn't read the thread on SP but what the heck is the height doing in there??) <a href="mailto:info@my_company.com"><div id="email">Contact Us</div></a> Code (markup): This is invalid. Anchors are inline, divs are blocks. Blocks are like buckets and inlines are like water. Water can't hold a bucket, and inlines may NOT hold blocks. The mouse cursor changes when it sits over something which is clickable. Div's aren't clickable. Anchors are. With the illegal code above, every browser got to choose what it would do because the rules were thrown out the window. When browsers are confused, they are as dumb as stomme poezen and they just go wild and do whatever. Rampaging browsers! Only YOU can prevent wild browsers! Do the right thing. Validate. Let's give ziffa27 the benefit of a doubt-- it is considered good nettiquette to fill everyone in on a solved problem wherever you had posted the question. So even though ziffa didn't say someone else coded it, the solution is still here for others to see. Which is a good thing.
You can wrap a link around an image-- images are inlines, so this is ok. <a href="blah"><img src="blah" width="" height="" alt=""></a> every image should have alt text and a height and width set on them. The above code would make a clickable image.