IE6 CSS Issue

THT · 9 Jun 2006 at 15:08

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!

Code:

<!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" />&nbsp;Add User</a>
</body>
</html>

THT · 9 Jun 2006 at 16:07

thanks, however the full page looks like this and doesnt look right as the absolute declaration screws it up:

Code:

<!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
{	
    position:absolute;
    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;
}

</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" />&nbsp;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" />&nbsp;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>

IE6 CSS Issue

THT

THT

THT

THT