PDA

View Full Version : Rounded corners in tooltips in Internet Explorer?



glafrance
5 Nov 2012, 4:23 PM
Using this CSS I can style my tooltips, but my corners are still square in Internet Explorer 8 and 9.

Please help.

Thanks very much.

39841


.x-tipcustom {
background: none;
border: none;
}

.x-tipcustom-body {
background-color: #ffff99;
border: none;
color: #333333;
font-size: 11px;
@include border-radius(0.2em);
padding: 4px 5px 4px 6px;
}

glafrance
6 Nov 2012, 9:39 AM
Can anyone offer insight for IE 9? I heard IE 8 does not support rounded corners,and this link was suggested for IE8 to use the slicer tool to generate the images IE needs (scroll to the bottom of the document):

http://docs.sencha.com/ext-js/4-1/#!/guide/theming


sencha slice theme -d extjs -c resources/css/my-ext-theme.css -o resources/images -v

scott.jackson
6 Nov 2012, 11:09 AM
You'll need to make sure IE9 is rendering in standards mode. While your page is loaded, press F12 and check the document mode is "Internet Explorer 9 Standards". For example:
<!DOCTYPE html>for HTML5 or for XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

You may also need the following meta tag in your header, to kick IE9 into its most modern rendering mode:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Ref: http://stackoverflow.com/questions/5381446/ie9-border-radius