# Solved: Safari does not render page properly - All browsers OK - Any Advice?



## metrolocity (Jul 21, 2009)

Hi all... would appreciate if anyone can figure this one out. I've been trying for days to find a solution:

- Homepage loads OK on all browsers except Apple Safari (see http://www.savannahcollections.com/)
- Checked Chrome, Firefox, I.E. and all load properly

Appears I'm simply missing a code somewhere. Here is the source code of the homepage:

***********************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

%%Panel.HTMLHead%%

%%Panel.Header%%
%%Panel.IndexGallery%%
%%Panel.BottomGallery%%
%%Panel.Footer%%

*********************

Please advise how I can align IndexGallery with the rest of the page on Safari. Much appreciated.


----------



## colinsp (Sep 5, 2007)

I am running Safari 5 on Windows XP and it displays exactly the same as Firefox 3.6.3 for me. Try clearing your cache.


----------



## caraewilton (Nov 7, 2007)

colinsp said:


> I am running Safari 5 on Windows XP and it displays exactly the same as Firefox 3.6.3 for me. Try clearing your cache.


Same here. There is a closing div missing at the end though correct html:

```
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Savannah Collections :: Luxury Furniture at Factory Direct
Prices











<img src=
"http://www.savannahcollections.com/templates/__custom/images/ajax-loader.gif"
alt="">  Loading... Please wait...

[LIST]
[*][URL]My
Account[/URL]
[*][URL]Order
Status[/URL]
[*][URL]Wish
Lists[/URL]
[*][URL]Gift
Certificates[/URL]
[*][URL]View Cart [/URL]
[*]
[URL=http://www.savannahcollections.com/login.php]Sign in[/URL] or [URL]Create an account[/URL]

[/LIST]

[URL]<img src=
"http://www.savannahcollections.com/product_images/logo2.gif"
border="0" id="LogoImage" alt="Savannah Collections" name=
"LogoImage">[/URL]

Search

[LIST]

[*][URL]Home[/URL]
[*][URL]Bedroom[/URL]
[*][URL]Dining
Room[/URL]
[*][URL]Living
Room[/URL]
[*][URL=http://xflive.techguy.org/categories/Accent-Items/]Accent
Items[/URL]
[*][URL]Collections[/URL]
[*][URL]About
Us[/URL]
[*][URL]
Compare Our Quality[/URL]

[*][URL]
Our Guarantee[/URL]
[/LIST]

[TABLE]
[TR]
[TD][URL=http://xflive.techguy.org/pages/Collections.html]<img src=
"http://www.savannahcollections.com/product_images/uploaded_images/bottom1.jpg"
alt="#########">[/URL][/TD]
[TD][URL]<img src=
"http://www.savannahcollections.com/product_images/uploaded_images/bottom2.gif"
alt="#########">[/URL][/TD]

[TD][URL=http://xflive.techguy.org/pages/Collections.html]<img src=
"http://savannahcollections.com/product_images/uploaded_images/bottom3.jpg"
alt="#########">[/URL][/TD]
[/TR]
[/TABLE]

[TABLE]
[TR]
[TD]

[B][SIZE=14]Customer Service[/SIZE][/B]

[URL=http://xflive.techguy.org/pages/Contact-Us.html]1.800.818.9802[/URL]
[URL=http://xflive.techguy.org/pages/Contact-Us.html]Contact Us[/URL][/TD]
[TD]

[B][SIZE=14]Our Company[/SIZE][/B]

[URL=http://xflive.techguy.org/pages/About-Us.html]About Us[/URL]
[URL=http://xflive.techguy.org/pages/Privacy-Policy.html]Privacy Policy[/URL]
[URL=http://xflive.techguy.org/sitemap/]Sitemap[/URL][/TD]
[TD]

[B][SIZE=14]Our Guarantee[/SIZE][/B]

[URL=http://xflive.techguy.org/pages/Our-Guarantee.html]14-Days Money Back
Guarantee[/URL]

 [URL=http://xflive.techguy.org/pages/Compare-Our-Quality.html]Compare Our
Quality[/URL][/TD]
[TD]

[B][SIZE=14]My Account[/SIZE][/B]

[URL=http://xflive.techguy.org/login.php]Account Login[/URL]
[URL=http://xflive.techguy.org/login.php?from=account.php?action=order_status]Order
Status[/URL]
[URL=http://xflive.techguy.org/pages/shipping.html]Shipping Information[/URL][/TD]
[/TR]
[/TABLE]

Copyright 2010 Savannah Collections. ALL RIGHTS
RESERVED.
```


----------



## metrolocity (Jul 21, 2009)

colinsp> I'm running Safari 4.0.5 on Win7 64bit and after clearing the cache, I'm still getting the same error:










I'll update to Safari 5 and see what I get. However, it is still important that I fix this error lest some visitors with older browsers will get the same error as I have.

caraewilton> You mentioned the closing div missing. Could you highlight where I should place the closing div and see if it will solve this mystery?

Thanks for all the suggestions.


----------



## caraewilton (Nov 7, 2007)

There should be 3 closing divs before the closing body tag.

```
<div id="Footer">Copyright 2010 Savannah Collections. ALL RIGHTS
RESERVED.<br>
<br></div>
</div>
[COLOR="Red"]</div>[/COLOR]
</body>
</html>
```


----------



## metrolocity (Jul 21, 2009)

caraewilton> I've updated with the page with the missing div. Same page error on Safari 4. FWIW, I get the same error when viewing this page on iPhone 3GS and my new iPad Safari browser.

Do you think there could be something wrong with part of this code found 2/3 down on the page? Javascript generally gives me a lot of headaches in the past:


----------



## caraewilton (Nov 7, 2007)

Sorry, i really don't know enough about javascript to help with that:-(


----------



## dudeking (Feb 7, 2007)

You don't need a comma there dont worry..

I'm using safari 5 on mac and looks perfect to me


----------



## metrolocity (Jul 21, 2009)

caraewilton> No worries... tks for looking into this.

dudeking> Glad to know it's looking fine on Safari 5. Just bugs the bejesus out of me that it's not aligned correctly on Safari 4, iPhone, and iPads. *sigh*


----------



## lordsmurf (Apr 23, 2009)

I have screwed-up code on one of my sites, viewed with Safari 4 Windows.
Mac was fine.

Just test Safari 5 Windows -- error still there.

The menu JS generates "Error fetching content. Server Response:"

This person is having the same issue as I am: http://www.devcomments.com/JQuery-1...uting-on-Safari-4-0-4-Mac-IE-8-XP-at46537.htm
... although his is bigger issue, I think.

I'm about to confer with a JS expert.
Might your issues be related to jquery, too?


----------



## metrolocity (Jul 21, 2009)

lordsmurf> I think you may be correct. The jquery usually gives me a lot of problems. I would fix it in one platform and it would be problematic in another. One can only wish that all browsers speak the same "language". *sigh*

Do drop a note here if you are able to find an expert to fix this. 16% of my visitors have Safari, so it's important to get this fixed. 10yrs ago when Mac traffic was only 3-5%, I'd just ignore the problem. Now that Mac is taking over the world, best to play with them =)


----------



## lordsmurf (Apr 23, 2009)

To me, this is proof that Safari is not "the same" between Mac and Windows. I've tested it on Safari 3-4 on Mac OS X and it's fine. Need to try v5 here soon, also OS X. My Safari visitors are less than 5%, and I'd guess 95%+ would be Mac based. 

My jquery programmer is on vacation, so it may be 2-3 weeks before he gets back AND has time. I have a feeling he'll know what's wrong -- don't lose touch. If I forget about this thread, don't hesitate to PM me a reminder in about a month.

I'm more or less convinced it's jquery being parsed/read wrong by the Win implementation of Safari. If I knew what to do, I'd submit it as a bug report. (The guy I contact may well just do that.)


----------



## metrolocity (Jul 21, 2009)

lordsmurf> Copy that. I look forward to what your programmer has to say. To summarize, it appears my problem is not only on Win7 Safari 4, but also iPhone and iPad Safari. Other members using Safari 5 appears fine (I assume it's on OSX).


----------



## lordsmurf (Apr 23, 2009)

I never thought of iPad and iPhone -- although I can honestly say I don't really care, as the audience is less than 1% at best. But I'll see about testing them anyway. Mobiles apps have always been a pain in the butt, as were TV based apps of years past (WebTV, etc).

By the time iPhone/iPad traffic hits bigger % points, I'd like to think the tech will have improved.

Right now, I don't know if it's Safari or jquery at fault. Or both.


----------



## tomdkat (May 6, 2006)

metrolocity said:


> colinsp> I'm running Safari 4.0.5 on Win7 64bit and after clearing the cache, I'm still getting the same error:


This is a stretch but I'm thinking Safari 4 is having an issue with the "#header" and "#menu" DIVs having a float: left applied.

Why do you apply a float to those DIVs? Since "#menu" appears below "#header", I don't think the float is needed.

In any event, try adding a "clear: left" attribute to the "#fadeshow1" DIV and see if the slideshow appears in the correct spot in Safari 4:

```
<div id="fadeshow1" [b][color=red]style="clear: left;"[/color][/b]></div>
```
Of course, you should temporarily enable borders on the "#header" and "#menu" DIVs so you know exactly how they are laying out.

Based on the screenshot you posted, it appears as if the Safari 4 is rendering the "#fadeshow1" DIV in the "wrong" place because the previous DIVs have the "float" applied.

If adding the "clear" attribute to the "#fadeshow1" DIV works, try removing that AND the "float" attributes on the "#header" and "#menu" DIVs and see if anything breaks.

I haven't tried any of this myself so I don't know if it will actually work or not but based on the screenshot you posted, this is what I would do to troubleshoot the Safari 4 issue.

I've upgraded to Safari 5 as well so the page renders correctly for me as well. 

Good luck!

Peace...


----------



## metrolocity (Jul 21, 2009)

tomdkat> I don't know how to thank you enough. Your advice to add the "clear" attribute works! It renders properly in Safari 4 (Win7 64bit) and also in iPhone Safari (haven't tried on the iPad yet, but I'm guessing it should be fine).



> Why do you apply a float to those DIVs? Since "#menu" appears below "#header", I don't think the float is needed.


I purchased the webstore software and modify/custom designed the rest. Hence, the divs were there originally, and I only made changes as necessary.



> If adding the "clear" attribute to the "#fadeshow1" DIV works, try removing that AND the "float" attributes on the "#header" and "#menu" DIVs and see if anything breaks.


Not familiar with what you mean by "float" attributes on the "#header" and "#menu". Could you pls specify what other scripts I should change? Or since all is working fine, should I just leave well enough alone?


----------



## tomdkat (May 6, 2006)

metrolocity said:


> tomdkat> I don't know how to thank you enough. Your advice to add the "clear" attribute works! It renders properly in Safari 4 (Win7 64bit) and also in iPhone Safari (haven't tried on the iPad yet, but I'm guessing it should be fine).


Great!



> I purchased the webstore software and modify/custom designed the rest. Hence, the divs were there originally, and I only made changes as necessary.


Gotcha



> Not familiar with what you mean by "float" attributes on the "#header" and "#menu". Could you pls specify what other scripts I should change? Or since all is working fine, should I just leave well enough alone?


If you look in the CSS files that are included in the HTML page, you can find the one that defines the style of the #header and #menu DIVs and see if removing the float attribute also fixes the rendering issue or not. I just too a quick look and it appears this stylesheet is the one you want to take a look at:

http://www.savannahcollections.com/templates/__custom/Styles/*styles.css*?09783

Of course, since it's working now you can decide if you want to continue experimenting or just roll with it. 

Peace...


----------



## metrolocity (Jul 21, 2009)

tomdkat>



> I just took a quick look and it appears this stylesheet is the one you want to take a look at....
> 
> Of course, since it's working now you can decide if you want to continue experimenting or just roll with it.


Gotcha. At this point, I'll just well enough alone, lest I'll encounter other unforeseen problems. Thank you again.


----------



## lordsmurf (Apr 23, 2009)

What fixed my issue was moving the jquery js call above the other js in the header.
And then I also added a div:clear segment of code below my jquery-driven menu.

Funny how we both seem to have solved it separately on the same day.


----------



## metrolocity (Jul 21, 2009)

lordsmurf> Glad to hear you had it fixed. I'll keep your solution in mind when I'll be working on jquery next time.


----------



## jaanazam (Aug 25, 2010)

colinsp said:


> I am running Safari 5 on Windows XP and it displays exactly the same as Firefox 3.6.3 for me. Try clearing your cache.


hi ,
iam facing the problem like as i am not able to load the xmlfile of size 200 MB using javascript by using the safari browser.

safari browser crashes while loading the large xml file but it works fine with other browsers like IE & Firefox

could you please advise me to solve this problme.

here is the code for loading the xml file in javascript

if (document.implementation && document.implementation.createDocument) {

xhttp = new XMLHttpRequest();
xhttp.open("GET", dname.xml, false); 
xhttp.send(null); 
return xhttp.responseXML;
}


----------

