CODEWITHSUNDEEP
c#asp.nettwitter-bootstraptwitter-bootstrap-3
duck
duck

Reputation: 867

Bootstrap 3 and IE compatibility issues

I've been working on a webforms project using Bootstrap 3. While using visual studio, I made the layout and everything looked great until I published it. When I run the site inside of Visual Studio and tell it to open in IE, it looks like this: enter image description here

Then when I publish the site, and go to it, it turns into this: it turns into this.

Any idea why? Chrome and Firefox are not having this issue. If it's needed, heres the top of the page, in case the issue it with the code:

<%@ Page Title="New Sheet" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="NewSheet.aspx.cs" Inherits="ShootSheetsBoot.NewSheet" Async="true" EnableEventValidation="false" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<script>
    $(function () {
        $('.multiselect').multiselect(
        {
            maxHeight: '200',
            buttonWidth: '100%',
        });
    });
</script>

<script type="text/javascript" src="../Scripts/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="../Scripts/bootstrap-multiselect.css" type="text/css" />

<div class="container">
    <h2>New Shoot Sheet</h2>
....

And the master page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ShootSheetsBoot.SiteMaster" %>

<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Shoot Sheets</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <form runat="server">
        <ajaxToolkit:ToolkitScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </ajaxToolkit:ToolkitScriptManager>

        <div class="navbar navbar-default navbar-fixed-top">
        ....

Upvotes: 1

Views: 900

Answers (2)

Fals
Fals

Reputation: 6839

There's a issue with IE after publishing. You just have to specify the compatibility directive:

<head runat="server">
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> //This line solve the issue
 <title><%: Page.Title %> - Shoot Sheets</title>

Upvotes: 3

wazz
wazz

Reputation: 5068

adding to fals' answer, here's a reminder of the bootstrap template:

http://getbootstrap.com/getting-started/#template

Upvotes: 1

Related Questions