Я использую последнюю версию Yahoo User Interface 3 (YUI).Я использую reset, fonts, grids and base stylesheets.Я также использую последнюю версию Telerik MVC extensions.Я делаю свой сайт в ASP.NET MVC 3, используя razor view engine.Браузер Internet Explorer 8.
У меня проблема с макетом, и я не уверен, что его вызывает.У меня есть раздел верхнего и нижнего колонтитула, а часть содержимого состоит из правого и левого столбца.
Вот мои стили, которые я использую:
<link type="text/css" href="/Content/2011.3.1115/telerik.common.min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/2011.3.1115/telerik.webblue.min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/cssreset-min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/cssfonts-min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/cssgrids-min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/cssbase-min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/mystylesheet.css" rel="stylesheet"/>
У меня есть только некоторые основныеНа мой взгляд добавлена разметка (цвета указаны только для отображения):
<div id="hd" style="background-color:Aqua;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
<div class="yui3-g">
<div class="yui3-u" id="nav" style="background-color:Yellow;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
<div class="yui3-u" id="main" style="background-color:Lime;">
@(Html.Telerik()
.Grid<GrantApplicationListViewModel>()
.Name("grdGrantApplications")
.Columns(column =>
{
column.Bound(x => x.Id)
.Title("Ref #");
})
.DataBinding(dataBinding => dataBinding.Ajax().Select("AjaxGrantApplicationsBinding", "Home"))
.Pageable(paging => paging.PageSize(20))
)
</div>
</div>
<div id="ft" style="background-color:Aqua;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
@(Html.Telerik()
.ScriptRegistrar()
.jQuery(false)
)
Сетка загружается 10 записями.После загрузки он накладывается на мой нижний колонтитул.Я проверил это в IE9, и это выглядит хорошо, нижний колонтитул находится ниже сетки.Но в IE8 сетка выходит за нижний колонтитул.Как бы я получить это правильно отображать в IE8?Есть ли ошибка в IE8 при отображении разметки?
ОБНОВЛЕНИЕ:
Это все, что у меня есть в моей таблице стилей.Остальное в вышеупомянутых таблицах стилей.Это очень простой макет.Мой оригинальный макет такой же, как и выше, но у него были и другие стили, поэтому я лишил его всего, чтобы убедиться, что это не мои стили, которые вызывают эту проблему.
body{margin:auto;width:1000px;}
#nav{width:250px;}
#main{width:750px;}