Question

I am using the latest version of the Yahoo User Interface 3 (YUI). I am using the reset, fonts, grids and base stylesheets. I am also using the latest version of the Telerik MVC extensions. I am doing my website in ASP.NET MVC 3 using the razor view engine. Browser is Internet Explorer 8.

I am have an issue with my layout and not sure what is causing it. I have a header and footer section, and the content part consists of a right and a left column.

Here are my stylesheers that I am using:

<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"/>

I have just some basic markup added to my view (the colours are there for display purposes only):

<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)
)

The grid loads with 10 records. After it has loaded it overlaps my footer. I checked it in IE9 and it looks fine, the footer is below the grid. But in IE8 the grid goes over the footer. How would I get this to display correctly in IE8? Is there a bug in IE8 when it displays markup?

UPDATE:

This is all that I have in my stylesheet. The rest is in the above mentioned stylesheets. It’s a very basic layout. My original layout is like above but it had other styles as well, so I stripped it of everything to make sure that it is not my styles that is causing this issue.

body{margin:auto;width:1000px;}
#nav{width:250px;}
#main{width:750px;}

Answer 1

As a front-end developer, might I suggest NEVER using Telerik. It is actually quite terrible from an HTML/CSS standpoint. It’s basically the asp.net equivalent of using Dreamweaver hooks.

Letting microsoft automatically generate markup/css/js and imagining it will be flexible enough to play nice with other libraries might be a bit of a pipe-dream, in 90% of the cases I’ve experienced you’re better off not using it (sorry to be mr. negative, I’ve got a lot of experience untangling telerik issues – and most of the time there is no quick or simple answer).