I have a problem with the page below, when mousing over the link it should move down and right 2px Copy and paste the code and view in IE to see that it doesnt! It only moves right Now, Remove the Doctype declaration and it works perfectly!!! HELP! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>TEST PAGE</title> <style type="text/css"> .Button { BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; BORDER-LEFT: #000000 1px; BORDER-BOTTOM: #000000 1px; PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-SIZE: 10px; CURSOR: hand; COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 18px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none } .Button:hover { BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; BORDER-LEFT: #000000 1px; BORDER-BOTTOM: #000000 1px; PADDING-RIGHT: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 4px; PADDING-TOP: 4px; FONT-SIZE: 10px; CURSOR: hand; COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 18px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none } .ButtonImg{ vertical-align:middle; } </style> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <a class="Button" title="Add User" href="Javascript:DoAdd()" ><img alt="Add User" class="ButtonImg" src="http://10.0.0.50//partner/images/Add.gif" border="0" /> Add User</a> </body> </html> Code (markup):
Just another IE bug. I did this: a.Button { position: relative; border: 1px solid #000; padding: 2px; FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 18px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none } a.Button:hover { top: 2px; left: 2px; background-color: white; /*this seems to be key*/ } Code (markup): cheers, gary
Well, I've opened many threads so far in this regard (i.e. IE6 and its problems with CSS); for instance check out the: Few things that are different in FF compare to IE and Margins and padding; again IE's display compare to Firefox's one threads (of course, if you want to) that I opened here on DP forums back then. tayiper
Thanks for the reply: Still doesnt work: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .Button { PADDING: 2px; FONT-SIZE: 10px; CURSOR: hand; COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 18px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none; } .Button:hover { PADDING:4px 0 0 4px; background-color: white; /*this seems to be key*/ } </style> <title>TITLE</title> </head> <body> <div class="ToolbarSpan"> <a class="Button" title="Add User" href="Javascript:DoAdd()"><img alt="Add User" class="ButtonImg" src="http://10.0.0.50//partner/images/Add.gif" border="0" /> Add User</a> <img alt="Seperator" height="16" src="http://10.0.0.50//partner/images/vertbar.gif" width="10" /><a class="Button" title="Refresh List" href="Javascript:DoRefresh()" ><img alt="Refresh List" class="ButtonImg" src="http://10.0.0.50//partner/images/Refresh.gif" border="0" /> Refresh List</a> </div> <div> <table cellspacing="1" cellpadding="1" border="0"> <tr> <td class="tableheadings" >Name</td> <td class="tableheadings" >Email Address</td> <td class="tableheadings" >Contact Number</td> <td class="tableheadings" >Last online</td> <td class="tableheadings" ></td></tr> </table> </body> </html> Code (markup):