0

I'm developing a website in asp.net, and I use the msDropdown-master jQuery to modify an turn a dropdownlist "more beautiful", placing images in the options and so on.

But using this control, I have a real problem because it doesn't work fine in IE9 and lowers...

From Firefox the control appear like this:

Control msDropdown... Working fine in Firefox

From IE 9, seen in IETester appear like this:

Control msDropdown... Not Working in IE9 using IETester

This is how the control should appear in all browsers, I pretend to made my site crossbrowing for all versions of IE7 to the most recent, and all other browsers.

As code I can show you the code that I use, for the msDropdown css I use the default, dd.css provided, in the official website (https://github.com/marghoobsuleman/ms-Dropdown).

For the dropdown the ASP code is:

<asp:DropDownList runat="server" ID="ddLanguageSelector" CssClass="LanguageSelector" AutoPostBack="True" onchange="javascript:if(this.options[this.selectedIndex].value == 'More'){ showMoreLanguages(); return false; }" OnSelectedIndexChanged="ddLanguageSelector_SelectedIndexChanged" meta:resourcekey="ddLanguageSelectorResource" />

The jQuery / Javascript code is:

// Language Selector
$(document).ready(function (e) {
    try {
        $("header div.Wrapper div.HeaderUserAccess select.LanguageSelector").msDropDown();
    } catch (e) {
        alert(e.message);
     }
});

As requested in comments, I will put here the regitration of the jquery as I use in the site:

<!--[if lt IE 8]><!-->
<script type="text/javascript" src="Content/Scripts/jQuery/jquery-1.11.0/jquery-1.11.0.min.js"></script>
<!--<![endif]-->
<!--[if gt IE 8]|!(IE)><!-->
<script type="text/javascript" src="Content/Scripts/jQuery/jquery-2.1.0/jquery-2.1.0.min.js"></script>
<!--<![endif]-->

Ok, so what I do really need is to found a whay where the msDropdown does not apear unformated in IE 9, 8 and 7.

Does anyone of you know the reason for this behavior of the control in the IE9?

Ok... For now I just have confirmed the following:

  1. I have a structure where I have a div, with css "position: relative;"
  2. Inside that div, i have several divs with css "position: absolute;"
  3. The dropdownlist is inside one of those divs containing css "position: absolute;"

For now I just believe that this is the problem, because i remove the dropdown list outside the div structure and it works perfect in all IE9, IE8, IE7 and even in IE6.

So now the question is... how to handle the dropdownlist inside the div structure? Knowing that it misbehaves in IE9 and lower in that structure?

And a good solution for this issue... Please....

Thanks in advance for the given attention.

IsaacFCosta
  • 9
  • 7

2 Answers2

0

I think that is jquery version problem. Use this code:

<!--[if lt IE 9]>
    <script src="Content/Scripts/jQuery/jquery-1.11.0/jquery-1.11.0.min.js"></script>
<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
    <script src="Content/Scripts/jQuery/jquery-2.1.0/jquery-2.1.0.min.js"></script>
<!--<![endif]-->

Hope it works. Tested in: http://jsfiddle.net/3BzGP/9/show/ with all IE versions.

Check too the IE jquery versions that works (compatible) http://jquery.com/browser-support/

Jaime García Pérez
  • 953
  • 1
  • 10
  • 16
  • Ok thank you for finding my bug, in the reference of the jQuery... But the problem persists :(... I think that the problem cames from the structure... I have a div with the position:relative, then inside I have several divs with the position absolute, and my control is inside of one of this divs... so I think that the problem is there... Can anybody give me a help... – IsaacFCosta May 07 '14 at 20:15
  • Post all your HTML code or make a jsFiddle, it will help you. – Jaime García Pérez May 07 '14 at 20:19
  • Ok, now you can see the updated question where I put images, for you understand my problem... Tomorrow I will try to use the tool JS Fidle as you sugested me. Thank you. But I think that the real problem resides on the structure of the divs surrounding.... – IsaacFCosta May 07 '14 at 20:25
0

I found the problem, it appends only in IE9 and lower versions, because the ms-Dorpdown generates several divs, and the first div I created was with the property possition: absolute;, this makes IE9 not work. The solution I found for this was create a old structure of tables instead of divs...

For old browsers compatibility old structures...

IsaacFCosta
  • 9
  • 7