Solved

why there is overflow in google chrome browser (text comes above each other)?!

Posted on 2010-11-21
10
385 Views
Last Modified: 2012-05-10
hi,

I am developing my company website, responsible to some parts, I test the website using ie8, firefox, opera, it runs ok, but there is problem in google chrome browser!

here is the demo website:
www.leamratech,com/test_pages

then please go to products, then scroll down, then click second product, face identification system , scroll to the end of the page, check end of page in both firefox and google chrome!!

so how to solve the overflow problem??
0
Comment
Question by:njgroup
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34183788
It looks the same messed up in both Firefox 3.6.12 and Chrome 7.0 from here.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34184092
I got past the comma error, but when the page loads, the top flash presentation grabbed 100% of CPU time and I never did get to the products, which kept jumping all over the screen as the various flash components were trying to load.

This site is a classic example of how an overbearing flash presentation makes the rest of an otherwise good page presentation unusable.  Sorry, I Xed out of it before the flash nonsense even finished.  If you want people to ENJOY this site and stay, GET RID of the flash !!
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:njgroup
ID: 34185668
but I don't have any flash in website load!

I have two small sized flash object in "face identification" product, which is in products --> face identification, and all others are non-flashes, they are javascript, css, jquery!

is that flashes making the trouble?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34185732
No, you have so much stuff going on that it is out or order the first time it loads.  After refreshing a couple of times on both Firefox and Chrome, it finally displays correctly because almost everything is in the browser cache.  Looks like a timing problem to me.
0
 

Author Comment

by:njgroup
ID: 34185802
I think, I found the problem,

As ajax loading, after user click the product, I am getting the html content (as string) from server, and I set it to main div as inner html, then I am getting the height of the div that contain loaded html, and using jquery function animate to animate the  main div height to html div height,

that happens in this code snippet:

 
var content_html = msg.d;
                                $("#products_loading").hide('explode', 500, function() {
                                    change_products_main_contents(content_html, productName);
                                    $("#products_main_contents").show('drop', 500, function() {
                                        var inner_content_product = $("#inner_content_product").height();
                                        alert(inner_content_product);
                                        $("#products_main_contents").height(inner_content_product);
                                        alert($("#products_main_contents").height());
                                        $("#products_contents").animate({ height: inner_content_product + "px" }, 1000, function() { alert($("#products_contents").height()); });

                                    });

    function change_products_main_contents(content_html, productName) {
        $("#products_main_contents").html(content_html);
        

        switch (productName) {
            case "face":
                $("#product_lable").html("LEAMRA Face Identification - LFIS");
                break;
        }
    }

Open in new window


now, the problem is that the headers (such as "What is LFIS" and others...) for each paragraph are taking some time to be loaded, and the jquery height function getting the height before they are loaded!
so the height is not correct as its increased after loading of them.


I test it, before the are loading, I got height 2172px for inner div html, but after the loading of images, I got 2282px.

by the way, the problem happens in all browsers, but it looks google chrome slower in loading pictures
0
 

Author Comment

by:njgroup
ID: 34185881
I solve that by replacing each image with div with width and height, and set the background of div to this image,

is there any solution better?
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 34185895
I'm glad you figured it out.  I wouldn't be able to tell you anything more.  As long as it works, it's good to me.
0
 

Author Comment

by:njgroup
ID: 34185910
DaveBaldwin,

yes!  I think once its is in cache, then, the html images will be loaded and taken height before the jquery retreive the height, so that means,

in first time loading website, I got:

inner div html height (before loading the images): 2172
main div (which will be animated to same inner div html height): 2172
after loading inner div html heigh: 2282

after many loading of page so it has images in cache:
inner div html height: 2282
main div (which will be animated to same inner div html height): 2282

0
 

Author Comment

by:njgroup
ID: 34185915
scrathcyboy, please let me know how the site is stuck and where or because which element?
0

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question