CODEWITHSUNDEEP
htmlcssinternet-explorerbordercross-browser
German Latorre
German Latorre

Reputation: 11128

DIV transparent border not showing underlying background in IE7

I have a div with background solid color and transparent border.

In IE8+ and Chrome, transparent border shows the underlying background color. However, in IE7 border is transparent: no background is shown behind the border.

How can I make IE7 display the border like IE8+, Chrome, and "modern" browsers do?

Here's my HTML and CSS (See it working on http://jsfiddle.net/hG82h/1/):

HTML:

<html>
<body>
    <div id="div1"></div>
    <div id="div2"></div>    
</body>
</html>​

CSS:

div {
    width: 200px;
    height: 20px;
    background-color: #AAA;
}
#div1 {
    border: 10px solid transparent;
}
#div2 {
    border: 10px solid #666;
}​

Upvotes: 0

Views: 1357

Answers (1)

Michael Seibt
Michael Seibt

Reputation: 1346

Try using the padding property instead, like in this example.

But mention the difference between box models in IE, Chrome and Mozilla. I suggest to read and use this, otherwise the result depends on the browser.

Upvotes: 1

Related Questions