All geek questions in one place

Set pointer height in Internet Explorer 7

I have a div with a pretty curved background, so it has rounded corners in all browsers.

The problem is that in Internet Explorer, the background image is accompanied by a background color. If I set the height of the div, Firefox and Chrome will both reduce the height of the div, however IE will not adjust anything.

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

#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 kind of IE 'gotcha' regarding the height that I am missing?

Here are some additional details:

  • The string is not displayed in FF or Chrome.
  • There's a little javascript on the page, nothing that would affect the way it does.
  • Other changes to css will be applied to the div.
+3
source share
3

, - .

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

doctype, quirksmode

html-

<!DOCTYPE html>

xhtml doctype, :

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

, html5, IE, html5, , xhtml doctype;)

, inline, , display: block display: inline-block ;)

+2

Try applying overflow: hidden in 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; 
}
0
source

Source: https://habr.com/ru/post/1786970/

More articles:


All Articles