1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

IE6 CSS Issue

Discussion in 'HTML, Graphics & Programming' started by THT, 9 Jun 2006.

  1. THT

    Hitman

    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>
    
    
    
     
  2. joeyjojo

    Soldato

    Joined: 2 Dec 2005

    Posts: 5,519

    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.
     
  3. THT

    Hitman

    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>
     
  4. Sic

    Capodecina

    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 :)