Forum Moderators: not2easy
#tip {
z-index: 100;
position:absolute;
border: 0;
padding: 0 6px 5px 0;
background: transparent url(../images/shadow.png) no-repeat bottom right;
display:none;
}
Is there a way to use the #tip * {...}
in IE?
cEM
For all modern browsers but IE
#tip * {background: url(../images/bgs.png) top left no-repeat}
#tip {
z-index: 100;
position:absolute;
border: 0;
padding: 0 6px 5px 0;
background: transparent url(../images/bg.png) no-repeat bottom right;
display:none;
}
In a seperate css called iewin.css
<!--[if IE]>
<style type="text/css">
@import url(/css/iewin.css);
</style>
<![endif]-->
I use comments so IE WInimports the css only
But I need to use IE specific filter to make the bg.png which is png-24 transparency work note that bgs.png is png-8 so that should not be problem for IE
* html #tip {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/bg.png');
background-image: none;
background-repeat: repeat;
this is for IE and all the rest -basic styling
#tip div {
position:relative;
top: -5px;
left: -5px;
border: none;
padding: 5px;
}
I can use html>body to seperate the normal png-24 background rules form IE
* html #tip * {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/bg.png');
background-image: none;
background-repeat: repeat;
}
actually you have to take in account png support in IE
Is there a way to use the #tip * {...}
...to mean that you were having trouble getting the universal selector to work in IE.
* html #tip * {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/bg.png');
background-image: none;
background-repeat: repeat;
}
You're on the right track. The problem with the above is the second universal selector (*). The universal selector essentially means "everything".
The first one in your code is part of the Star Hack, which exploits an IE quirk where the browser believes there is an extra wrapper between the viewport and the <html>. Only IE believes this mysterious elements to be there, so using the universal selector before the <html> element tells the browser to apply the styles to any <html> elements inside of anything. Since only IE believes the <html> tag to be inside of something, only IE applies the styles.
But when you put #tip * that tells the browser to apply that rule to every element inside of the #tip element. This will wreak havok on your page if it isn't your intention, and could wreak havok on your downlaod times if is your intention as the page attempts to apply the ie filter to every single tag nested inside of #tip.
But otherwise, the star hack (* html) should work fine to get IE to use it's filter.
cEM
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
Take a look at the css
#tip {
z-index:100;
position:absolute;
border:0;
padding:0 6px 5px 0;
background:transparent url(bgs.png) no-repeat bottom right;
color:#000;
font:70%/1.4 Verdana,Helvetica,sans-serif;
display:none;
}
#tip * {
background:transparent url(bg.png) repeat;
}
#tip div {
position:relative;
top:-5px;
left:-5px;
border:1px solid #999;
padding:5px;
}
[edited by: SuzyUK at 6:18 pm (utc) on Mar. 13, 2005]
but when using the IE filters to correct more or less the transparency channel of png-24 in IE5 and above
The css conconction for the #tip * is done to put a shadow underneath the transparent png background and there is only the tip div actually no div descendants
