1
Когда я переключить VIEW совместимости в IE9 вкл/выкл, моя Navbar сдвигает позиции:NavBars сдвинуты, когда вид совместимости переключены
При совместимости: ON:
navbar is centred fine. :)
When Compatibility View: OFF:
navbar is shifted to the right slightly. :(
ПРИМЕЧАНИЕ: Я не мог приложить скриншот из-за определенных ограничений на сайт. :(
Очевидно, что я хотел бы, чтобы исправить это, но не может, таким образом, почему я вывешиваю здесь :)
Мой файл CSS выглядит следующим образом:.
/*background image for outside area*/
#outside {
background-image:url('/images/body_bg.gif');
}
/*style for main area*/
#main {
font:16px "Trebuchet MS", arial, verdana, serif, monospace;
margin-left:auto;
margin-right:auto;
width:1020px;
border:5px outset darkgrey;
background-color:white;
}
/*background image*/
#bg {
background-image:url('/images/content_bg.gif');
}
/*horizontal list item widths*/
ul.two li{width:50%;}
ul.four li{width:25%;}
ul.five li{width:20%;}
/*submenu list item widths*/
ul.sfour li a{width:25em;} /*alternate value = 19.1em*/
ul.sfive li a{width:18.5em;} /*alternate value = 15.3em*/
/*top navigation bar*/
#topnav ul {
list-style-type:none;
margin-left:auto;
margin-right:auto;
width:100%;
overflow:hidden;
}
#topnav li {
float:left;
}
#topnav li a {
background-color:#606060;
color:white;
display:block;
font-size:large;
font-weight:bold;
font-variant:small-caps;
padding-top:4px;
padding-bottom:4px;
text-align:center;
text-decoration:none;
}
#topnav li a:active {
color:yellow;
}
#topnav li a:hover {
background-color:#888888;
}
/*topnav submenus*/
#topnav li ul {
display:none;
position:absolute;
}
#topnav li:hover ul {
display:block;
}
#topnav li:hover li {
float:none;
}
#topnav li:hover a {
background-color:#888888;
}
#topnav li:hover li a {
display:block;
font-size:small;
font-weight:normal;
font-variant:normal;
text-align:center;
text-decoration:none;
}
#topnav li:hover li a:hover {
background-color:#B0B0B0
}
/*page title*/
h1 {
border-bottom:3px solid black;
color:gray;
margin-left:auto;
margin-right:auto;
width:90%;
}
/*content*/
#content {
margin-left:auto;
margin-right:auto;
width:90%;
}
Мой файл _Layout.cshtml выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>C4DP - @Page.Title</title>
<link href="@Href("~/Styles/Style.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/functions.js"></script>
<script type="text/javascript" src="/scripts/sorttable.js"></script>
</head>
<body id="outside">
<div id="main">
<img src="/images/title_c4dp.gif" alt="C4DP" width="100%"/>
<div id="bg">
<div id="topnav">@RenderPage("~/navbar_Top.cshtml")</div>
<h1>@Page.Title</h1>
<div id="content">
@RenderBody()
</div>
<div id="bottomnav">@RenderPage("~/navbar_Bottom.cshtml")</div>
</div>
<p id="copyright">© 2012 C4DP. All rights reserved.</p>
</div>
</body>
</html>
навигационной панели файл выглядит следующим образом:
@if (WebSecurity.IsAuthenticated) {
if (!Roles.IsUserInRole("admin")) {
<ul class="four">
<li><a href="@Href("~/Account/News.cshtml")">News</a></li>
<li><a href="#">Stats</a>
<ul class="sfour">
<li><a href="@Href("~/Account/Earnings.cshtml")">Earnings</a></li>
<li><a href="@Href("~/Account/SessionAverage.cshtml")">Session Average</a></li>
<li><a href="@Href("~/Account/Ranking.cshtml")">Ranking</a></li>
</ul>
</li>
<li><a href="#">Profile</a>
<ul class="sfour">
<li><a href="@Href("~/Account/UserProfile.cshtml")">Personal Info.</a></li>
<li><a href="@Href("~/Account/ChangePassword.cshtml")">Change Password</a></li>
</ul>
</li>
<li><a href="@Href("~/Account/Logout.cshtml")">Logout</a></li>
</ul>
} else { //logged in as administrator
<ul class="five">
<li><a href="@Href("~/Account/News.cshtml")">News</a></li>
<li><a href="#">Stats</a>
<ul class="sfive">
<li><a href="@Href("~/Account/Earnings.cshtml")">Earnings</a></li>
<li><a href="@Href("~/Account/SessionAverage.cshtml")">Session Average</a></li>
<li><a href="@Href("~/Account/Ranking.cshtml")">Ranking</a></li>
</ul>
</li>
<li><a href="#">Admin</a>
<ul class="sfive">
<li><a href="@Href("~/Admin/Cardrooms.cshtml")">Cardrooms</a></li>
<li><a href="@Href("~/Account/Events.cshtml")">Events</a></li>
<li><a href="@Href("~/Account/Members.cshtml")">Members</a></li>
</ul>
</li>
<li><a href="#">Profile</a>
<ul class="sfive">
<li><a href="@Href("~/Account/UserProfile.cshtml")">Personal Info.</a></li>
<li><a href="@Href("~/Account/ChangePassword.cshtml")">Change Password</a></li>
</ul>
</li>
<li><a href="@Href("~/Account/Logout.cshtml")">Logout</a></li>
</ul>
}
} else {
// nav bar when NOT logged in
<ul class="four">
<li><a href="@Href("~/Default.cshtml")">Home</a></li>
<li><a href="@Href("~/Rules.cshtml")">Rules</a></li>
<li><a href="@Href("~/Account/Login.cshtml")">Login</a></li>
<li><a href="@Href("~/Account/RequestMembership.cshtml")">Request Membership</a></li>
</ul>
}
Пожалуйста, помогите!
Укажите, поддерживает ли ваш сайт режим совместимости или нет. Не должно быть контекста, в котором вы должны поддерживать те, которые вы описываете. –
Извините, я предполагаю, что я имел в виду IE Compatibility VIEW; когда я переключаю это, мои navbars повсюду. :( –
Я неправильно читаю вашу проблему. Он работает, когда в представлении совместимости, но не при использовании стандартных IE7, IE8 и IE9. Каким режимом рендеринга вы смотрите сейчас? –