Safari and Chrome issue?

[PicnicTutorials]

Good morning

Here is the page... http://tinyurl.com/yco4re7 In Safari and Chrome ONLY something in the comment app is overflowing and causing the wrapper (or footer?) to come up off the bottom of the browser window. If this was a FX issue I could probably find the culprit. But because I can't use firebug, I'm sort of SOL. I've tried adding overflow:hidden to all the obvious containers (the main comment box container, my #wrapper, etc), but nothing solves the problem. I also tried floating the main comment box container and still no go - which is odd. Any ideas welcome - I'll test anything. Thanks!

[kohoutek]

It's working fine on Safari 4.04 on Mac OS X 10.5.8.

Chrome crashes instantly when I try to open your page.

[PicnicTutorials]

OK, so maybe just a windows thing. I'm on Safari 4 too! Chrome does not crash for me. Just looked, even the main "Echo" website has the same issue in Webkit. Look closely at the bottom. You will see a 10px black gap at the bottom. Same as on my site. http://js-kit.com/

Even if I move the script (and all it's containing goodies) up above the #content div it still pushes the wrapper up. Or even above the Header - still the same issue. That makes no sense to me. Even overflow hidden on the body does not prevent it. Frustrating!

[kohoutek]

I see the bottom space now. I haven't a clue what is doing it. Seems like a Javascript issue? I don't know.

It still crashes for me on Chrome for the Mac, however. It may be a browser bug as Chrome for the Mac is still in Beta.

[PicnicTutorials]

The js injects all the HTML and CSS. So it "should" be a css issue.

[PicnicTutorials]

Well i'm stupid, overflow hidden prob won't work unless a height is specified. But how do I give a varible height app (the comments vary) a height. Hmmm...

[PicnicTutorials]

HA! Even if I wrap the script in a div with zero height and overflow hidden the problem is still there. That makes no sense right???

<div id="content" style="height:0; overflow:hidden">
<script type="text/javascript" src="/echo/echo.js"></script>
</div>

...or even if I say display none on the outer comments container the gap is still there. The comments are gone - but the gap remains. What is that? I'm thinkin thats not a css/html issue then. But what?

[Paul O'B]

Hi Eric,

I've seen this a number of times with widgets and things and it seems to be caused by iframes that have been inserted.

I've used this before to cure it but don't know if it will affect whatever use the iframe is being put to.

iframe{display:block!important}

[PicnicTutorials]

Hi Eric,

I've seen this a number of times with widgets and things and it seems to be caused by iframes that have been inserted.

I've used this before to cure it but don't know if it will affect whatever use the iframe is being put to.

iframe{display:block!important}

YES Paul! That fixed it! I would have never of guessed that. Thanks a ton Paul

[PicnicTutorials]

Three quick questions... one, is there some explanation that you know of why I an ONLY use iframe {...} to fix this bug, rather than using my preferred method of .js-kit-comments iframe {...}? It only fixes the bug with just iframe {...}. I can't use iframe#ID or any combination. I'd rather not target every iframe I happen to come across in the future. Two, do you happen to see another iframe? The only one I know of is the one wrapping the area where you input a comment. That shouldnt matter anyways because .js-kit-comments is the outermost container. Three, if I can't figure out why, would it bother any other iframes in the future, are iframes display block or inline by default? Thanks!

[Rayzur]

Three, if I can't figure out why, would it bother any other iframes in the future, are iframes display block or inline by default? Thanks!

Hi Eric,
As for question #3 it is my understanding that they are inline elements by default, hence the meaning of the "i" (iframe).
I was not sure about it either a while back and Erik.j gave me some info on it in this thread.

http://www.sitepoint.com/forums/show...81#post4467981

I think they are similar to images being that they are inline elements that can take dimensions.

[PicnicTutorials]

Thanks Ray! Yeah it really bugs me when I don't understand something. Even if I say #wrapper iframe {...} it won't kill the bug. It's got to be something do do with the same old explanation "the iframe doesn't really exist on my webpage YADA YADA". But I still don't get it. The iframe is inside the #wrapper (and a million other containers) so why I can't say #wrapper iframe (or any other container) is beyond me.

[Paul O'B]

Hi,

As Ray said iframe stands for "inline-frame" and behaves much as an image would in that it sits inline with other inline content.

I'm not sure where this iframe is sitting because it seems to be appended to the body by this routine.:

var d = document.createElement('div');
	d.style.height = 0;
	var tgt = 'jsk-ifrmsess-' + Math.random();
	d.innerHTML = '<iframe id="' + tgt + '" name="' + tgt + '" src="about:blank" width=0 height=0 style="border: none"></iframe>';
	var f = function() {
		document.body.appendChild(d);

It has a random ID which is why you can't target it and it seems to be append to the body but not within #wrapper.

You should be able to target it by exclusion.

e.g.

iframe{display:block}
#wrapper iframe {display:inline}

[PicnicTutorials]

Again, Yes Paul, that fixed it! Thank you very much. Looks like I'm all good now. Why didn't I think of targeting it like that - I'm getting rusty. The only iframe I know of is the one wrapping the area where you input a comment. It goes...

<iframe>
   <html>
     <body>
     </body>
   </html>
</iframe>

[Paul O'B]

There's an iframe inserted here:

<td class="mceIframeContainer mceFirst mceLast"><iframe style="width: 100&#37;; height: 100px;" src='javascript:""' id="js-CmtText-0_ifr" frameborder="0"></iframe></td></tr></tbody></table></span></div><div class="jsk-CommentFormFooter"><div class="js-kit-lcf-extraControlsMenuWrapper"><div class="js-kit-tab js-kit-tab-images"><div style="background-image: url(//cdn.js-kit.com/images/picture_add.png); background-repeat: no-repeat;" class="js-kit-tab-icon"></div><div class="js-kit-tab-title js-nsgecko">Add images</div><div style="background-image: url(//cdn.js-kit.com/images/menu/vertical-menu-expand-marker.png); background-repeat: no-repeat;" class="js-kit-tab-expandMarker"></div><div class="js-kit-clear"></div></div><div class="js-kit-tab js-kit-tab-follow"><div style="background-image: url(//cdn.js-kit.com/images/follow.png); background-repeat: no-repeat;" class="js-kit-tab-icon"></div><div class="js-kit-tab-title js-nsgecko">Follow</div><div style="background-image: url(//cdn.js-kit.com/images/menu/vertical-menu-expand-marker.png); background-repeat: no-repeat;" class="js-kit-tab-expandMarker"></div><div class="js-kit-clear"></div></div><div class="js-kit-clear"></div></div><div class="js-commentSubmit"><input style="cursor: pointer;" name="js-Cmtcancel" class="jsk-CommentFormButton" value="Cancel" type="reset"><input style="cursor: pointer;" name="js-Cmtsubmit" class="jsk-CommentFormButton" value="Post" type="submit"></div><div style="clear: both;"></div></div><div style="display: none;" class="js-kit-lcf-extraControlsMenuContent"></div></div><div class="js-poweredBy js-poweredBy-echo"></div><div style="clear: both;"></div></div><div style="display: none;" class="js-LeaveComment"><div class="js-commentControl"><a href="javascript:void(0);">Leave a comment</a></div><div style="display: none;" class="js-commentControl js-commentTool"><font face="Webdings">@</font><a href="javascript:void(0);">Controls</a></div><br clear="all"></div><div class="jsk-HeaderWrapper jsk-PrimaryFont"><div class="jsk-HeaderInfoBox"><div style="background-image: url(//cdn.js-kit.com/images/echo.png); background-repeat: no-repeat;" class="jsk-HeaderInfoBoxImg"></div><div class="jsk-CommentsCountWrap jsk-CommentsCount jsk-H1Color jsk-H1Font">Echo&nbsp;<span class="jsk-CommentsCount jsk-SecondaryFontColor jsk-PrimaryFont">0 Items</span></div><div class="js-kit-clear"></div></div><div class="jsk-HeaderMenu jsk-LinkFont jsk-LinkColor"><div class="jsk-MenuAdmin"><div><table cellpadding="0" cellspacing="0"><tbody><tr><td><div class="jskit-MenuTitle js-nsgecko">Admin</div></td><td><div style="background-image: url(//cdn.js-kit.com/images/menu/vertical-menu-expand-marker.png); background-repeat: no-repeat;" class="jskit-MenuTitleExpandMarker"></div></td></tr></tbody></table><div style="display: none;" class="jskit-MenuContainer jskit-MenuRootContainer"><table cellpadding="0" cellspacing="0"><thead></thead><tbody><tr class="jskit-MenuItem"><td class="jskit-MenuItem"><div style="background-image: url(//cdn.js-kit.com/images/menu/key.png); background-repeat: no-repeat;" class="jskit-MenuItemIcon js-nsgecko"></div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemTitle js-nsgecko">Log In</div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemEnding js-nsgecko"></div><div style="display: none;" class="jskit-MenuContainer"><table cellpadding="0" cellspacing="0"><thead></thead><tbody></tbody><tfoot></tfoot></table></div></td></tr><tr class="jskit-MenuItem"><td class="jskit-MenuItem"><div style="background-image: url(//cdn.js-kit.com/images/menu/user-edit.png); background-repeat: no-repeat;" class="jskit-MenuItemIcon js-nsgecko"></div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemTitle js-nsgecko">Edit My Profile</div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemEnding js-nsgecko"></div><div style="display: none;" class="jskit-MenuContainer"><table cellpadding="0" cellspacing="0"><thead></thead><tbody></tbody><tfoot></tfoot></table></div></td></tr><tr><td colspan="3"><div class="jskit-MenuDelimeter"></div></td></tr><tr class="jskit-MenuItem jsk-DisabledFontColor"><td class="jskit-MenuItem"><div style="background-image: url(//cdn.js-kit.com/images/menu/comment-edit.png); background-repeat: no-repeat;" class="jskit-MenuItemIcon js-nsgecko jsk-DisabledFontColor"></div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemTitle js-nsgecko jsk-DisabledFontColor">Moderation</div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemEnding js-nsgecko jsk-DisabledFontColor"></div><div style="display: none;" class="jskit-MenuContainer"><table cellpadding="0" cellspacing="0"><thead></thead><tbody></tbody><tfoot></tfoot></table></div></td></tr><tr class="jskit-MenuItem jsk-DisabledFontColor"><td class="jskit-MenuItem"><div style="background-image: url(//cdn.js-kit.com/images/menu/wrench.png); background-repeat: no-repeat;" class="jskit-MenuItemIcon js-nsgecko jsk-DisabledFontColor"></div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemTitle js-nsgecko jsk-DisabledFontColor">General Settings</div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemEnding js-nsgecko jsk-DisabledFontColor"></div><div style="display: none;" class="jskit-MenuContainer"><table cellpadding="0" cellspacing="0"><thead></thead><tbody></tbody><tfoot></tfoot></table></div></td></tr><tr class="jskit-MenuItem jsk-DisabledFontColor"><td class="jskit-MenuItem"><div class="jskit-MenuItemIcon js-nsgecko jsk-DisabledFontColor"></div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemTitle js-nsgecko jsk-DisabledFontColor">Admin Notices</div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemEnding js-nsgecko jsk-DisabledFontColor"></div><div style="display: none;" class="jskit-MenuContainer"><table cellpadding="0" cellspacing="0"><thead></thead><tbody></tbody><tfoot></tfoot></table></div></td></tr><tr><td colspan="3"><div class="jskit-MenuDelimeter"></div></td></tr><tr class="jskit-MenuItem"><td class="jskit-MenuItem"><div style="background-image: url(//cdn.js-kit.com/images/menu/script-code.png); background-repeat: no-repeat;" class="jskit-MenuItemIcon js-nsgecko"></div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemTitle js-nsgecko">Get this for your site</div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemEnding js-nsgecko"></div><div style="display: none;" class="jskit-MenuContainer"><table cellpadding="0" cellspacing="0"><thead></thead><tbody></tbody><tfoot></tfoot></table></div></td></tr><tr class="jskit-MenuItem"><td class="jskit-MenuItem"><div style="background-image: url(//cdn.js-kit.com/images/menu/newspaper.png); background-repeat: no-repeat;" class="jskit-MenuItemIcon js-nsgecko"></div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemTitle js-nsgecko">JS-Kit Blog</div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemEnding js-nsgecko"></div><div style="display: none;" class="jskit-MenuContainer"><table cellpadding="0" cellspacing="0"><thead></thead><tbody></tbody><tfoot></tfoot></table></div></td></tr><tr class="jskit-MenuItem"><td class="jskit-MenuItem"><div style="background-image: url(//cdn.js-kit.com/images/menu/twitter-favicon.png); background-repeat: no-repeat;" class="jskit-MenuItemIcon js-nsgecko"></div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemTitle js-nsgecko">JS-Kit on Twitter</div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemEnding js-nsgecko"></div><div style="display: none;" class="jskit-MenuContainer"><table cellpadding="0" cellspacing="0"><thead></thead><tbody></tbody><tfoot></tfoot></table></div></td></tr><tr class="jskit-MenuItem"><td class="jskit-MenuItem"><div style="background-image: url(//cdn.js-kit.com/images/menu/information.png); background-repeat: no-repeat;" class="jskit-MenuItemIcon js-nsgecko"></div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemTitle js-nsgecko">Help</div></td><td class="jskit-MenuItem"><div class="jskit-MenuItemEnding js-nsgecko"></div><div style="display: none;" class="jskit-MenuContainer"><table cellpadding="0" cellspacing="0"><thead></thead><tbody></tbody><tfoot></tfoot></table></div></td></tr></tbody><tfoot></tfoot></table></div></div></div><div class="jsk-HeaderPauseBox jsk-SecondaryFontColor"><div class="jsk-HeaderPauseBoxImg">&nbsp;</div><span class="jsk-HeaderPauseBoxName"></span>&nbsp;<span class="jsk-HeaderPauseBoxCount jsk-PrimaryFont"></span>&nbsp;–</div></div><div style="clear: both;"></div></div><div class="jsk-ThreadWrapper jsk-PrimaryFont jsk-PrimaryBackgroundColor"><div style="display: none;" class="js-OldCommentsWrap jsk-StreamWrapper"><div class="js-OldComments"><div></div></div></div><div style="" class="js-PageNavBottom js-nsgecko"><div></div></div><div class="js-poweredBy"><div class="js-poweredBy-wrapper"><a href="http://js-kit.com"><div style="background-image: url(//cdn.js-kit.com/images/brand.png); background-repeat: no-repeat;" class="js-poweredBy-logo"></div><div class="js-poweredBy-text">Social Networking by </div><div class="js-kit-clear"></div></a></div><div class="js-kit-clear"></div></div></div></div><script src="//js-kit.com/extra/tiny_mce/tmce.js" charset="utf-8" type="text/javascript" id="js-kit-script-js-kitcomextratiny_mcetmcejs"></script></div>

But that's not the one causing the problem. The code above was found by viewing generated source with the webdev toolbar but it doesn't show the iframe that's actually causing the problem though. You won't be able to target it anyway because it has a random ID so the only way would be by exclusion anyway.