Printable Version of Topic

Posted by: sansugoi Jun 5 2012, 05:27 AM

Hi all,

I am creating a dropdown by select tag, but when I style the dropdown box, and add the webfont (3rd party font) it is not working in IE, working fine in mozilla and chrome.

This is very urgent..

arial, verdana..etc.. are working..
But my client want to use the third party font,
How it will work in IE also , please guide.. I am hereby pasting the stylesheet and html code for select


Style:

<style type="text/css">

.styled_select_outer {width:172px; height:22px;}

.styled_select {
width: 195px;
cursor: pointer;
margin-top:1px;
position:relative;
z-index:10;
opacity:0;

}

span.styled_selected_text {
background:url(images/homedrop.png) no-repeat scroll 0 0;
padding-left:7px;
width:265px;
color:#4A3E31;
font-family:arial,sans-serif;
line-height:21px;
font-size:12px;
height:32px;
font-weight:normal;
position:absolute;
z-index:5;
}
</style>
<!--[if IE]-->
<style type="text/css">

.styled_select{filter:alpha(opacity=0); font-family:'MyriadProCondensed'!important; margin-left:-1px; margin-top:6px; }
</style>
<!--[endif]-->

<!--if IE 7-->
<style type="text/css" media="all">

.styled_select{width: 100%; font-family:'MyriadProCondensed'!important; margin-left:0px; margin-top:6px; }
</style>
<!--endif]-->


HTML


<div class="styled_select_outer">
<span id="styled_selected_text" class="styled_selected_text">-- Choose Insurance Type --</span>
<select class="styled_select" id="styled_select" name="test" onchange="gotourl(this.value)"> <option value="1">Motor Insurance</option> <option value="2">HomeOwner&rsquo;s Insurance</option></select>
</div>