ExternalHeight () and internal images
I have a problem the first time I load a page with an externalHeight.
The value returned by outerHeight () is a multiple of 27.
JQuery
$('.entries').each(function(r) {
$(this).attr("value", $(this).outerHeight()+15);
})
HTML:
<div class="entries">
<div class="container_entrie">
<span class="meta"><span class="title">Daily Inspiration #128</span>
<span class="date">- april 10th 2009 </span></span>
<img src="images/content/four.png" />
</div>
</div>
CSS:
.entries {
position:absolute;
overflow:hidden;
cursor:pointer;
width:200px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding:6px;
background-color:#171717;
}
.meta{
position:absolute;
bottom:0; float:left; width:190px; padding-top:5px; padding-bottom:5px; padding-left:5px; padding-right:5px; font-size:11px; font-weight:bold; line-height:14px;
background-color:#000;
/* for IE */
filter:alpha(opacity=70);
/* CSS3 standard */
opacity:0.7;
border-top:1px solid #000;
}
.meta span.title{color:#FFF; }
.meta span.date{color:#999999; font-weight:normal;}
.container_entrie{position:relative; width:200px; float:left; overflow:hidden; }
And one is downloaded after the update is in order.
So I'm wondering if this isn't a problem with the images in container_entrie?
Thanks for your help =)
0
a source to share
1 answer
Where is your javascript called from? If you haven't set the height on the image, you will have problems if you put it in $(...)
(shorthand for $ (document) .ready). Try putting it in $(window).load(...
) and see if that helps. Loading loads after everything has loaded , Ready is a pseudo event that fires when the dom is ready to run.
+2
a source to share