CODEWITHSUNDEEP
htmlcssinternet-explorer-9
Ricbermo
Ricbermo

Reputation: 805

IE9 is not rendering the borders of an element

I'm having an strange issue with some css and IE9. I'm not sure but I can bet you is the first time you see it.

Example Image

All the three images are in a div with a class. This is the CSS for the class:

.imagen_pro{
    border: 1px solid #CCC;
    width: 180px; height:160px;
    text-align:center;
    background-color:#FFFFFF;
}

.imagen_pro img{
    max-width: 160px;
    max-height: 160px;
}

This is happening is some cases, i mean, not in every IE9 this is happening. I don't know what's going on. If someone could help me i'd really appreciate it.

Thanks.

Hi all and thanks for answering. I've found what was going on. it happens that each one of this image are inside of an anchor tag and with that css the img was overflowing the so i had to apply some css to the and make the div container a little taller. thank you anyway

Upvotes: 0

Views: 95

Answers (2)

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13292

I'm not able to reproduce your issue in my version of IE9. However, I would be willing to bet that the issue is that your images are popping out of the top or bottom of their container and are being drawn over the border.

Try adding overflow:hidden to the .imagen_pro class.

OR

If that doesn't work, either expand the height of the .imagen_pro to be, say 162px.

OR

Change the max-height on the images to be 1 or 2 pixels smaller. For example:

.imagen_pro img{
    max-width: 160px;
    max-height: 158px;
}

Upvotes: 1

CAP
CAP

Reputation: 317

I'm betting that the pics are improperly positioned/sized. They're bigger than the max-size of you element (max-height: 160px;). Use firebug, select the pics and fiddle with their height and position.

Also I see an error in you code. You have both :

width: 180px;

and

max-width: 160px;

These are contradictory statements.

Upvotes: 2

Related Questions