Compatibility issue with IE 7 browser (asp.net website)

Question

I am having a slider in my webpage and it displays perfectly in chrome and IE8 but when I change to IE7 standards in my IE then the slider is displayed as a small item. I tried to include the below code in my page, but still having the same issue. how should I make it display in all browsers.

   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

this is my Slider

<script type="text/javascript">
        function pageLoad(sender, args) {
            $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
            $(function () {
                $("#slider-range").slider({
                    range: true,
                    min: 0,
                    max: 100,
                    values: [25, 75],
                    slide: function (event, ui) {
                        $("#minval").val("" + ui.values[0] + " - " + ui.values[1]);
                    }
                });
                $("#minval").val("" + $("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1));
            });
        }
    </script>

Answer 1

When you say that the slider appears as a small item is this a formatting issue? Does the slider still work?

If the slider still works then the problem is not so much with the script but the CSS being used to format the look of the slider. IE7 differs quite a bit from IE8 in terms of how it utilises CSS.

What I have done on some of my sites is to have some browser specific CSS, one typically for each major browser. When the user enters the site I will detect the browser in use and then select the correct CSS to use in my site master.

Something similar to this:

Private Function BrowserStylesheet() As String
        Dim message As String = Nothing

        Select Case Request.Browser.Browser
            Case "IE"
                Select Case Request.Browser.MajorVersion
                    Case 8
                        message = "<link href=""../../Content/CSS/IE8.css"" rel=""stylesheet"" type=""text/css"" />"
                    Case 7
                        message = "<link href=""../../Content/CSS/IE7.css"" rel=""stylesheet"" type=""text/css"" />"
                    Case 6
                        message = "<link href=""../../Content/CSS/IE6.css"" rel=""stylesheet"" type=""text/css"" />"
                    Case Else
                        message = "<link href=""../../Content/CSS/Unknown.css"" rel=""stylesheet"" type=""text/css"" />"
                End Select
            Case "Firefox"
                message = "<link href=""../../Content/CSS/Mozilla.css"" rel=""stylesheet"" type=""text/css"" />"
            Case "AppleMAC-Safari"
                'This case will detect Chrome and Safari as the same so we need to distinguish it further.
                If Request.UserAgent.Contains("Chrome") Then
                    message = "<link href=""../../Content/CSS/Chrome.css"" rel=""stylesheet"" type=""text/css"" />"
                Else
                    message = "<link href=""../../Content/CSS/Unknown.css"" rel=""stylesheet"" type=""text/css"" />"
                End If
            Case Else
                message = "<link href=""../../Content/CSS/Unknown.css"" rel=""stylesheet"" type=""text/css"" />"
        End Select

        Return message
    End Function