IE6 CSS Issue

THT

THT

Associate
Joined
10 Mar 2004
Posts
998
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>
 
Soldato
Joined
2 Dec 2005
Posts
5,515
Location
Herts
Code:
<style type="text/css">
.Button
{	
    position:absolute;
    BORDER: #000000 1px solid;
    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>
First made the borders visible. When you hover over it the box moved up instead of the text moving down. You have to fix the container in place somehow. I don't know about the layout of the site, but something like position:absolute or floating it should work. Also, a lot of the code can be condensed/is repeated.
 

THT

THT

Associate
OP
Joined
10 Mar 2004
Posts
998
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>
 

Sic

Sic

Soldato
Joined
9 Nov 2004
Posts
15,365
Location
SO16
don't use tables. don't use javascript.

Beansprout posted this the other day, and you'll be able to adapt it to do what you want. it has the advantage of being totally awesome :)
 
Back
Top Bottom