jQuery CSS div height not lining up in Chrome (Firefox & IE both work)
Building a fairly basic website in MVC3 (overkill at the moment, but want it to be easily expandable). Anyway, I've tried what I know how to do, but I'm not incredibly good at javascript. I've searched online and tried a few different options with javascript, but nothing seems to solve my Chrome issue.
I have seen a suggestion to use a background image to give the illusion of what I'm wanting, but I'd prefer to have it done with jquery and css modification. Let me know if you need more information...I'm still just shocked that Chrome is the browser that is giving me an issue...
The javascript/html for the layout page...
<head>
<meta content="charset=utf-8" />
<title>@ViewBag.Tit开发者_运维百科le</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>
And then the partial pages look like...(it doesn't matter which page I use they all don't line up).
@{
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>
The css that is applied to the divs before javascript gets it's hands on it...
#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;
}
Also as requested I added the alert...and I also did an alert on document.ready. In Chrome the alert is generated before the images are populated (firefox and ie alert after image population) and the images cause the div to expand so I'm guessing this is the issue and to confirm it I removed all the images from one of the pages and it then lined up correctly in all three browsers.
However, I'm not aware of any way to solve this so if someone can point me in the right direction or if you know the solution posting it... (would the version of jquery that I'm using have anything to do with this???)
Found solution after I found the problem based off of @Coulton 's hint... Official way to ask jQuery wait for all images to load before executing something
Needed to use $(window).load instead of $(document).ready
加载中,请稍侯......
精彩评论