SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Safari and Chrome issue?

    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!

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The js injects all the HTML and CSS. So it "should" be a css issue.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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...

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    iframe{display:block!important}

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Code:
    iframe{display:block!important}
    YES Paul! That fixed it! I would have never of guessed that. Thanks a ton Paul

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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!

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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.

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.:
    Code:
    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.
    Code:
    iframe{display:block}
    #wrapper iframe {display:inline}

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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...

    Code:
    <iframe>
       <html>
         <body>
         </body>
       </html>
    </iframe>

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    There's an iframe inserted here:

    Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •