I am in the process of creating a simple website using MVC3, with plans to make it easily expandable in the future. Despite my limited skills in javascript, I have attempted various online solutions to address a persistent issue with Chrome. Some have suggested using a background image to achieve the desired effect, but I am keen on implementing jquery and CSS modifications. If more information is needed, please let me know. It's surprising that Chrome is the browser presenting me with this challenge.
Below is the javascript/html for the layout page...
<head>
<meta content="charset=utf-8" />
<title>@ViewBag.Title</title>
<link rel="shortcut icon" href="@Url.Content("~/Content/images/favicon.ico")" />
<link rel="icon" type="image/gif" href="@Url.Content("~/Content/images/animated_favicon1.gif")" />
<link href="@Url.Content("~/Content/CSS/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="body">
<div id="SiteLogo">
<img alt="Logo" src="@Url.Content("~/Content/images/Logo.png")" height="100" width="100" />
</div>
<div id="SiteBanner">
<br />
<em>@quote[quoteSelect]</em>
<br /><br />
<em id="BannerQuoteBy"> @quoteBy[quoteSelect]</em>
</div>
<div class="ClearBoth"></div>
<div id="NavAndBody">
<div id="SiteLinkColumn">asdf
</div>
<div id="SiteBody">
@RenderBody()
</div>
<div class="ClearBoth"></div>
</div>
</div>
<script type="text/javascript">$(document).ready(function(){$("#SiteLinkColumn").css({'height':($("#SiteBody").height()+'px')});})</script>
<script type="text/javascript">alert($("#SiteBody").height());</script>
</body>
Regarding the partial pages, all pages have alignment issues despite the structure. Here's an example...
@{
ViewBag.Title = "About";
}
<div class="FloatLeft" style="padding:10px;">
<img width="350px" src="@Url.Content("~/Content/images/Logo.png")" alt="Logo" />
</div>
<p>
<img alt="Bullet" width="15px" src="@Url.Content("~/Content/images/Logo.png")" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat enim, gravida ac hendrerit non, ornare a purus. Integer sit amet lacinia odio. Morbi sit amet auctor metus. In bibendum nibh vitae orci consequat et ultrices neque fermentum. Aliquam diam ligula, hendrerit sit amet scelerisque quis, gravida et velit. Integer in felis non dui varius convallis. Nam nec elit sit amet ligula volutpat tincidunt. Cras lacus libero, porta at commodo sed, auctor vitae quam. Fusce nec metus dolor, eu fringilla ipsum. Aliquam nec commodo urna.
</p>
Here is the CSS applied to the divs before javascript intervention...
#SiteLinkColumn {
height: auto;
width: 98px;
float: left;
border: 1px solid #97F78A;
}
#SiteBody {
float: left;
height: 100%;
width: 798px;
border: 1px solid #97F78A;
margin-left: 10px;
}
I have added the requested alert notification and observed differences between Chrome, Firefox, and IE. In Chrome, the alert appears before the images load, causing the div to expand. Removing images fixes the alignment issue. I am seeking guidance on how to address this problem, including insights on the compatibility of the jQuery version used.