CODEWITHSUNDEEP
cssinternet-explorerheight
Peach
Peach

Reputation: 2787

Problem setting div height in Internet Explorer 7

I have a div with a pretty curve background image so it does rounded corners on all browsers.

The problem is that in Internet explorer, the background image is followed by a background-coloured line. If I set the div's height, Firefox and Chrome will both shrink the height of the div, however IE will not adjust anything.

Here's my CSS. Note that the rest of the CSS is applied in IE (and FF/Chrome) fine.

#MSBottomSlot .topCurve {
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat;
    height:10px; /* Changing this value does nothing in IE */
    width:100%;
}

Is there some IE 'gotcha' regarding height that I'm missing?

Here are some additional details:

Upvotes: 3

Views: 7135

Answers (3)

kuyabiye
kuyabiye

Reputation: 709

if i could understand right, the height is not effected becasue of the line-height and font-size. so you must add

line-height: 0;
font-size: 0;

Upvotes: 8

Martin Jespersen
Martin Jespersen

Reputation: 26183

Remember to set the doctype so the browser doesn't go into quirksmode

First line of your html document should be 

<!DOCTYPE html>

You could also use a more traditional xhtml doctype like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But i will recommend the first type which is html5 compliant and works fine in IE as well even tho they don't do html5, and it looks so much better than that awful xhtml doctype ;)

Also remember that you cannot apply height to inline elements, only block level elements, so your element needs to be display: block or display: inline-block or similar ;)

Upvotes: 2

Damon Skelhorn
Damon Skelhorn

Reputation: 1511

Try applying overflow:hidden to your CSS 

#MSBottomSlot .topCurve {
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat;
    height:10px; /* Changing this value does nothing in IE */
    width:100%;
    overflow:hidden; 
}

Upvotes: 0

Related Questions