1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

IE6 CSS Issue

Discussion in 'CSS' started by THT, Jun 9, 2006.

  1. #1
    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" />&nbsp;Add User</a>
    </body>
    </html>
    
    
    
    Code (markup):
     
    THT, Jun 9, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    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
     
    kk5st, Jun 9, 2006 IP
  3. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #3
    tayiper, Jun 10, 2006 IP
  4. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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" />&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>
    
    
    
    Code (markup):
     
    THT, Jun 12, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    But you didn't exactly do it as I showed you.

    cheers,

    gary
     
    kk5st, Jun 12, 2006 IP
  6. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #6
    but that pads from the top of the screen?
    not from is current location....
     
    THT, Jun 13, 2006 IP