El enlace causa un problema de interlineado en IE

I have a paragraph of text. If the text is longer than the set length a link "read more" is added on the end. The problem I have in IE is that it forces the line that the link is on to separate from the line above making it look odd. IT only happens in IE.

Here is the link to where it is happening: http://www.melfordschoolofmotoring.co.uk/test.php

What am i missing to stop the extra margin at the top of the line with the link in it?

if(mysql_num_rows($query)>0){
        //There are testimonials to retrieve from Database
        while($row = mysql_fetch_assoc($query)){
            $test = htmlentities($row['test']);
            $firstname = htmlentities($row['fn']);
            $surname = htmlentities($row['sn']);
            $date = date('d/m/Y',strtotime($row['date']));
            $form_test = '';

            if(strlen($test) > 180){
                $form_test .= substr($test,0,181);
                $form_test .= '<a href="test_more.php">...read more</a>';
            }else if(strlen($test)<180){
                $form_test .= $test;
            }
            echo '<div class="text_module_test"><!-- wraps each part of text in to a nice module -->';
            echo '<p>'.$form_test.'</p>';
            echo '<div class="test"><p>by '. $firstname .' '. $surname .' '. $date .'</p></div>';
            echo '</div>';
        }
    }else{
        //There aren't any testimonials in Database
        echo '<p>There are currently no testimonials to display.</p>';
    }

    .text_module_test{
border:1px solid #6a77fa;
background-color:#e1e4fe;
padding:10px;
margin:20px 0 0 0;
width:350px;
min-height:90px;
text-align:justify;
overflow:hidden;
}
.text_module_test p{
margin:0;
}
.text_module_test a:link, .text_module_test a:visited{
font-size:12px;
padding:0;
margin:0;
text-decoration:none;
color:#777caa;
}
.text_module_test a:hover{
color:#000;
font-size:12px;
padding:0;
margin:0;
}
.test{
padding:5px;
margin:0 20px 0 0;
width:340px;
height:10px;
text-align:right;
}
.test p{
font-size:10px;
margin: 0;
}

preguntado el 09 de marzo de 12 a las 16:03

IE what? It looks good to me in IE7/8. -

In all versions of IE? All IE7/8/9 look ok on my computer -

Hi, IE8. You don't see that the last line is separated from the lrest of the paragraph? -

It looks good in IE8 for me, but the line separation does appear in Chrome. Hope that helps... -

That's odd for me it looks fine in chrome. o.0 .. the mystery deepens! -

1 Respuestas

Looks like this is due to line-height: 34px; para .menu_item a:link, a:visited in menú.css. Añadir line-height: 100%; para .text_module_test a:link, .text_module_test a:visited in style.css to override this rule.

respondido 09 mar '12, 17:03

Thanks I had .menu_item a:link, a:visited en lugar de .menu_item a:link, .menu_item a:visited. - Crmepham

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.