drowpdown Issue between firefox and IE Browser

Question

phpbeginners 1 Posting Whiz in Training

14 Years Ago

I am very new in website developing.

Anybody help me how to make this dropdown listing in Internet Explorer Browser the same listing in Firefox.

I want the word extended in the size of the dropdown button.

see attached images.

Thank you.

php

3 Contributors
6 Replies
92 Views
3 Days Discussion Span
Latest Post 14 Years Ago Latest Post by phpbeginners

almostbob 866 Retired: passive income ROCKS

14 Years Ago

gues you all have the same homework assignment
http://www.daniweb.com/forums/thread257925.html

saiprem 4 Posting Whiz in Training

14 Years Ago

Hope this helps you

<div class='outDiv' onMouseOver='this.className="onDiv"' onMouseOut='this.className="outDiv"'>

<img src='somepath.gif'></div>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

phpbeginners 1 Posting Whiz in Training · Answer 1 · 2010-02-09T12:19:51+00:00

Thanks I am reading the link but they use JQuery http://css-tricks.com/select-cuts-off-options-in-ie-fix/

any javascript code to add on focus or mouseover event to make it auto when focus or mouseover and return to original width on mouseout?

phpbeginners 1 Posting Whiz in Training · Answer 2 · 2010-02-09T13:55:27+00:00

i have tried it works but the whole dropdown change in size i just want only the list change in size like in the firefox.

i want the dropdown fixed in size when you click I want the list is the one flexible in size ( see my attached image in firefox format)

thanks

phpbeginners 1 Posting Whiz in Training · Answer 3 · 2010-02-10T13:10:08+00:00

Anyone?
I did the suggestions of our friends.
But everytime I focus my dropdown automatically change in size the whole dropdown what I want is fixed the size of dropdown only the listed item follows the length of the text.

thanks

phpbeginners 1 Posting Whiz in Training · Answer 4 · 2010-02-12T08:39:21+00:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
.ctrDropDown{
    width:145px;
    font-size:11px;
}
.ctrDropDownClick{
    font-size:11px;
    width:auto;
}
.plainDropDown{
    width:145px;
    font-size:11px;
}
</style>

</head>

<body>


<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the problem select list:<br><br>
<select name="someDropDown" id="someDropDown" class="plainDropDown">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>
<br>
<hr width="150px;" align="left">
<br>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the better select list:<br><br>
<select  name="someDropDown" id="someDropDown" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>

</body>
</html>