Web Page Loading Issue

phpfreaks14 · November 8, 2008

Hi,

I have created a website using PHP and CSS.

What I observe is that when I Load website on my Computer, the website loads very fast, however when I access website from internet (From Web Host), the page loads but shows non-formatted layout and then after couple of seconds shows formatted layout.

The CSS styling applies little late. It looks very awkward when the page loads, reveals my unformatted page and then shows formatted layout.

Please guide me how to avoid this situation.

Thanks.

thebadbad · November 8, 2008

Flash of Unstyled Content.

phpfreaks14 · November 8, 2008

Hi thebadbad,

Sorry but I don't see any text in your response.

Thanks,

phpfreaks14 · November 8, 2008

Oh, I got the link.

But the link talk about IE. I see it on Safari(Mac) and Mozilla also.

What I have done is that I have put my CSS code in the same webpage. I don't have seperate CSS File.

Is this what is causing this issue?

Do I need to put my CSS codes in a seperate CSS file and then include that file when page loads?

Any tips to optimize page loading would be a great help.

Also, my webpage looks fine after complete loading on Safari, Chrome and Mozilla but on IE my layout distorts. I am mostly using <div> tag for the layout.

Thanks,

thebadbad · November 8, 2008

Okay, that article just came to mind when reading about your problem. It shouldn't make a difference whether you use an external stylesheet or not. Maybe show us your code and a link to the page in question?

phpfreaks14 · November 8, 2008

Indeed a good article to read. Thanks for the same.

I just tried to access my website again and I am surprised to see that the problem didn't occur. Not sure how it happened.

But I have a portability issue with IE.

My website gets displayed properly when opened on Safari/Chrome/Mozilla but when I open on IE the Layout distorts.

I use CSS in following way:

div.home_page_search_criteria{

position:absolute;

height:100px;

width:720px;

visibility:visible;

margin-top:82px;

margin-left:1px;

background-color:red;

overflow:visible;

padding-left:5px;

padding-right:5px;

float:left;

}

Please let me know if I have to take care of certain Layout Parameters to make my webpage compatible with IE also.

Thanks,

thebadbad · November 8, 2008

I just tried to access my website again and I am surprised to see that the problem didn't occur. Not sure how it happened.

That could be because the browser has cached the page.

You can always run into problems when coding CSS for several browsers. Especially IE tends to be a pain in the a** (although IE7 is much easier to work with compared to earlier versions, if you ask me). But ever since IE7 came along, I've only tested my code in Fx and IE7. I really can't bother with users stuck on IE6 or worse.

If you show me your page, I can have a quick look at it (in Fx3 and IE7).

phpfreaks14 · November 8, 2008

I just tried to access my website again and I am surprised to see that the problem didn't occur. Not sure how it happened.

That could be because the browser has cached the page.

You can always run into problems when coding CSS for several browsers. Especially IE tends to be a pain in the a** (although IE7 is much easier to work with compared to earlier versions, if you ask me). But ever since IE7 came along, I've only tested my code in Fx and IE7. I really can't bother with users stuck on IE6 or worse.

If you show me your page, I can have a quick look at it (in Fx3 and IE7).

Hi thebadbad,

I have attached the my php page in HTML format. Please try to open in IE and Mozilla.

Please help me find the root cause of this layout distortion in IE.

Thanks alot!!

phpfreaks14 · November 8, 2008

I think I cannot attach.

I am putting the code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

function passwordwin()

{

window.open('http://XYZ.com/my_password.php','','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=500,height=300,top=70, left=80');

}

</script>

<TITLE>

Home Page

</TITLE>

div.home_page_background{

position:absolute;

height:783px;

width:1000px;

visibility:visible;

margin-top:0px;

margin-left:0px;

background-color:red;

text-align:center;

overflow:visible;

}

div.home_page_logo{

position:absolute;

height:80px;

width:220px;

visibility:visible;

margin-top:1px;

margin-left:1px;

background-color:white;

overflow:visible;

float:left;

}

div.home_page_title{

position:absolute;

height:80;

width:779;

visibility:visible;

margin-top:1;

margin-left:220;

background-color:white;

overflow:visible;

float:left;

}

/*

div.home_page_greeting{

position:absolute;

height:100;

width:150;

visibility:visible;

margin-top:1;

margin-left:400;

background-color:white;

overflow:visible;

}

div.home_page_buyer_login{

position:absolute;

height:80;

width:249;

visibility:visible;

margin-top:102;

margin-left:1;

background-color:steelblue;

overflow:visible;

font-family:tahoma;

}

*/

div.home_page_search_criteria{

position:absolute;

height:100px;

width:720px;

visibility:visible;

margin-top:82px;

margin-left:1px;

background-color:red;

overflow:visible;

padding-left:5px;

padding-right:5px;

float:left;

}

div.home_page_seller_login{

position:absolute;

height:105px;

width:270px;

visibility:visible;

margin-top:82px;

margin-left:722px;

background-color:red;

overflow:visible;

float:left;

}

div.home_page_decoration{

position:absolute;

height:79px;

width:710px;

visibility:visible;

margin-top:110px;

margin-left:1px;

background-color:white;

overflow:visible;

padding-left:5px;

padding-right:5px;

z-index:5;

font-size:10;

color:grey;

font-family:arial;

text-align:left;

float:left;

}

div.home_page_search_result{

position:absolute;

height:496px;

width:988px;

visibility:visible;

margin-top:190px;

margin-left:1px;

background-color:white;

overflow:visible;

z-index:5;

font-size:8;

font-family:arial;

overflow:scroll;

padding-left:5px;

padding-top:10px;

padding-right:5px;

float:left;

}

div.home_page_search_result_base{

position:absolute;

height:496px;

width:988px;

visibility:visible;

margin-top:190px;

margin-left:1px;

background-color:white;

overflow:scroll;

z-index:2;

font-size:8;

font-family:arial;

padding-left:5px;

padding-top:10px;

padding-right:5px;

float:left;

}

div.home_page_footer_left{

position:absolute;

height:95;

width:150;

visibility:visible;

margin-top:687;

margin-left:1;

background-color:white;

overflow:visible;

}

div.home_page_footer_middle{

position:absolute;

height:95;

width:150;

visibility:visible;

margin-top:687;

margin-left:151;

background-color:white;

overflow:visible;

}

div.home_page_footer_middle_second{

position:absolute;

height:95;

width:140;

visibility:visible;

margin-top:687;

margin-left:300;

background-color:white;

overflow:visible;

}

div.home_page_footer_middle_third{

position:absolute;

height:95;

width:130;

visibility:visible;

margin-top:687;

margin-left:440;

background-color:white;

overflow:visible;

}

div.home_page_footer_middle_fourth{

position:absolute;

height:95;

width:130;

visibility:visible;

margin-top:687;

margin-left:570;

background-color:white;

overflow:visible;

}

div.home_page_footer_middle_fifth{

position:absolute;

height:95;

width:120;

visibility:visible;

margin-top:687;

margin-left:700;

background-color:white;

overflow:visible;

}

div.home_page_footer_right{

position:absolute;

height:95;

width:179;

visibility:visible;

margin-top:687;

margin-left:820;

background-color:white;

overflow:visible;

}

div.invalid_user_msg{

position:absolute;

height:11;

width:136;

visibility:visible;

margin-top:127;

margin-left:726;

background-color:red;

overflow:visible;

font-size:10;

font-family:arial;

color:lightyellow;

z-index:20;

}

table.home_page_search_criteria_table{

}

table.home_page_seller_Login_table{

margin-left:auto;

margin-right:auto;

}

table.home_page_buyer_login_table{

margin-left:auto;

margin-right:auto;

}

td.home_page_search_result_td{

font-size:10;

width:120;

text-align:center;

background-color:white;

}

td.home_page_search_result_td_lowest_price{

font-size:10;

width:120px;

text-align:center;

background-color:lightgreen;

}

td.home_page_search_result_company{

font-size:10;

width:120px;

text-align:left;

background-color:white;

}

tr.home_page_search_result_th{

font-size:12;

background-color:white;

color:red;

width:120px;

}

a{

text-decoration: none;

color:yellow;

}

a.website_link{

text-decoration: none;

color:blue;

}

</style>

</HEAD>

<BODY>

<TH> Title1</TH><TH> Title2</TH><TH> Title3</TH><TH> Title4</TH><TH> Title5</TH><TH> Title6</TH><TH> Title7</TH><TH> Title8</TH></TR><TR><TD></TD></TR><TR><TD class="home_page_search_result_td"> Value1</TD><TD class="home_page_search_result_td">Value2</TD><TD class="home_page_search_result_td" width="90" height="100"><img src="http://XYZ.com/Uploaded_Files/Products/abc.jpg" width="100%" height="100%" alt="Product Photo"></TD><TD class="home_page_search_result_td">Value3</TD><TD class="home_page_search_result_td">Value4</TD><TD class="home_page_search_result_td_lowest_price"><b>Value5</b></br> (abc)</TD><TD class="home_page_search_result_company"><b><font color="blue"> Value6 </font></b> <font color="green"></br> Value8 </br> Value8</br> Valu9</br> Value10</font></br><a class="website_link" href=></a></br></TD><TD class="home_page_search_result_td" width="90" height="60"><img src="http://XYZ.com/Uploaded_Files/Logos/abc.jpg" width="100%" height="100%" alt="No Photo"></TD></TR></table></div>

</div>

</div>

Some Text Here.........

</br>

Address1</br>

Address2</br>

Address3</br>

Address4</br>

Address5

</div>

<tr>

<font size="2" face="arial">Select City</font>

</td>

<td>

<option value ="None">[select Option]</option>

<option value ="Option1">Option1</option>

</select>

</td>

<!--

<font size="2" face="arial">Select Category</font>

</td>

<td>

<OPTION value="0">[select a Category]</OPTION>

<OPTION value="Option1">Option1</OPTION>

</SELECT>

</td>

THESSSSSQQQQQQ

</td>

-->

<font size="2" face="arial">Select Condition</font>

</td>

<td>

<OPTION value="0">[select Condition]</OPTION>

</SELECT>

</td>

<font size="2" face="arial">Enter Option1</font>

</td>

<td>

</td>

<td>

</td>

<!--

<tr>

<font size="2" face="arial">Enter Option</font>

</td>

<td>

</td>

<td>

</td>

</tr> -->

</table>

</form>

</div>

<tr>

<font size="2" face="arial">Seller Id</font>

</td>

<font size="2" face="arial">Password</font>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<font size="2" face="arial"><a href="javascript:passwordwin()">Forgot Password?</a></font>

</td>

<font size="2" face="arial" color="red">Incorrect UsePassword!</font>

</td>

</tr>

<tr>

<b><font size="2" face="arial"><a href="seller_registration_form.php" style="text-decoration:blink; color:lightyellow">New Seller? Sign Up!</a></font></b>

</td>

</tr>

</table>

</form>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</BODY>

</HTML>

phpfreaks14 · November 10, 2008

The issue is resolved by manipulating the DIV positions on the page.

Now I have one question, let's say my Page is taking little longer to load the content. Can there be any mechanism so that I

can put a delay so that my page contents get loaded and then display them on screen altogether?

Thanks,

Sign In

Web Page Loading Issue

Recommended Posts

phpfreaks14

Link to comment

Share on other sites

thebadbad

Link to comment

Share on other sites

phpfreaks14

Link to comment

Share on other sites

phpfreaks14

Link to comment

Share on other sites

thebadbad

Link to comment

Share on other sites

phpfreaks14

Link to comment

Share on other sites

thebadbad

Link to comment

Share on other sites

phpfreaks14

Link to comment

Share on other sites

phpfreaks14

Link to comment

Share on other sites

phpfreaks14

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information