Wednesday, March 16, 2011

IE does not render <A> tag properly

SOLVED: Nevermind, the links were visited, and the border definition was missing for visited links (as someone pointed out, thanks). As for the color being first place in the border definition, the snippet comes from the IE Developper Toolbar, this is not directly my code. Anyway, thank you guys !

Why does the link in the following snippet does not render underlined with a dashed line, just as expected and as ff would do ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><STYLE>

/* Rule 1 of css/style.css */
* {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    FONT-FAMILY: "trebuchet ms", Arial, Helvetica, sans-serif
}

/* Rule 26 of css/style.css */ 
#main {
    PADDING-RIGHT: 15px;
    PADDING-LEFT: 15px;
    PADDING-BOTTOM: 15px;
    PADDING-TOP: 15px
}

/* Rule 12 of css/style.css */ 
#page {
    BORDER-RIGHT: #555 1px solid;
    PADDING-RIGHT: 0px;
    BORDER-TOP: #555 1px solid;
    PADDING-LEFT: 0px;
    BACKGROUND: #fff;
    PADDING-BOTTOM: 0px;
    MARGIN: 50px auto;
    BORDER-LEFT: #555 1px solid;
    WIDTH: 752px;
    PADDING-TOP: 0px;
    BORDER-BOTTOM: #555 1px solid
}

/* Rule 2 of css/style.css */ 
BODY {
    BACKGROUND: url(bg.gif) #ebeeff repeat-y center 50%
}

/* Rule 35 of css/style.css */ 
#main A:link {
    COLOR: #437fda;
    BORDER-BOTTOM: #437fda 1px dashed;
    TEXT-DECORATION: none
}

</STYLE></HEAD>
<BODY><DIV id="page"><DIV id="main"><TABLE><TBODY><TR><TD>
<A href="http://www.immo-brasseurs.com/coords.php?num=37">Test link </A>
</TD></TR></TBODY></TABLE></DIV></DIV></BODY></HTML>
From stackoverflow
  • You might want to set up the style for Visited link too.

    And, I do not think you should use *{...}

    It works fine in FF3.

    Change to that :

    #main A:link, A:Visited {
    
    COLOR: #437fda;
    
    BORDER-BOTTOM: #437fda 1px dashed;
    
    TEXT-DECORATION: none
    
    }
    

    And change :

    * {
    
    PADDING-RIGHT: 0px;
    
    PADDING-LEFT: 0px;
    
    PADDING-BOTTOM: 0px;
    
    MARGIN: 0px;
    
    PADDING-TOP: 0px;
    
    FONT-FAMILY: "trebuchet ms", Arial, Helvetica, sans-serif
    
    }
    

    for

    body {
    
    PADDING-RIGHT: 0px;
    
    PADDING-LEFT: 0px;
    
    PADDING-BOTTOM: 0px;
    
    MARGIN: 0px;
    
    PADDING-TOP: 0px;
    
    FONT-FAMILY: "trebuchet ms", Arial, Helvetica, sans-serif
    
    }
    
    Jim Burger : The title of the question would appear to indicate the OP is testing a version of IE. Which version is anybodies guess.
    Shog9 : It's the * rule causing problems. Good catch!
  • I suspect this is because the link is an inline element. Can you use display:block?

    #main A:link {
        ...
        display:block
    }
    
  • Try using just #main a, and add separate a:visited and a:hover selectors if you want to style those differently.

  • umm .. shouldn't it be:

    BORDER-BOTTOM: 1px dashed #437fda;

    as far as i know css border definition is always width-style-color, in that order.

  • You should validate it first.
    You have a mixture of html and xhtml, meta tags outside of the html tag, style tag without the required type attribute, to name a few, which is just gonna give you a world of pain.

  • it is

    #main a {
    color:#437fda; 
    border-bottom: 1px solid #437fda;
    text-decoration:none;
    }
    
    #main a:visited {
    color:#437fda; 
    border-bottom: 1px solid #437fda;
    text-decoration:none;
    }
    

0 comments:

Post a Comment