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

metrolocity · 15-Jun-2010, 08:21 PM #1

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">
<html xmlns="http://www.w3.org/1999/xhtml">
%%Panel.HTMLHead%%
<body>
<div id="Container">
%%Panel.Header%%
%%Panel.IndexGallery%%
%%Panel.BottomGallery%%
%%Panel.Footer%%
</div>
</body>
</html>

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

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

colinsp · 16-Jun-2010, 02:08 AM #2

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 · 16-Jun-2010, 03:26 AM #3

Quote:

Originally Posted by colinsp

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:

HTML Code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Savannah Collections :: Luxury Furniture at Factory Direct
Prices</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content=
"Luxury Furniture at factory direct prices, sofa, bedroom, dining room, living room, accent items, Marge Carson, Henredon, thomasville, tommy bahama, restoration hardware, horchow, bernhardt, maitland smith, pulaski, karges, stickley, century, ej victor, lexington, ethan allen">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="shortcut icon" href=
"http://www.savannahcollections.com/product_images/favicon.ico">
<link href=
"http://www.savannahcollections.com/templates/__custom/Styles/styles.css?09783"
media="all" type="text/css" rel="stylesheet">
<link href=
"http://www.savannahcollections.com/templates/Furniture/Styles/iselector.css?09783"
media="all" type="text/css" rel="stylesheet">
<link href=
"http://www.savannahcollections.com/templates/__custom/Styles/ecru.css?09783"
media="all" type="text/css" rel="stylesheet">
<!--[if IE]><link href="http://www.savannahcollections.com/templates/Furniture/Styles/ie.css?09783" media="all" type="text/css" rel="stylesheet" /><![endif]-->
<link href="/templates/__custom/Styles/custom.css?09783" type=
"text/css" rel="stylesheet">
<!-- Tell the browsers about our RSS feeds -->

<link rel="alternate" type="application/rss+xml" title=
"Latest News (RSS 2.0)" href=
"http://www.savannahcollections.com/rss.php?action=newblogs&amp;type=rss">
<link rel="alternate" type="application/atom+xml" title=
"Latest News (Atom 0.3)" href=
"http://www.savannahcollections.com/rss.php?action=newblogs&amp;type=atom">
<link rel="alternate" type="application/rss+xml" title=
"New Products (RSS 2.0)" href=
"http://www.savannahcollections.com/rss.php?type=rss">
<link rel="alternate" type="application/atom+xml" title=
"New Products (Atom 0.3)" href=
"http://www.savannahcollections.com/rss.php?type=atom">
<link rel="alternate" type="application/rss+xml" title=
"Popular Products (RSS 2.0)" href=
"http://www.savannahcollections.com/rss.php?action=popularproducts&amp;type=rss">
<link rel="alternate" type="application/atom+xml" title=
"Popular Products (Atom 0.3)" href=
"http://www.savannahcollections.com/rss.php?action=popularproducts&amp;type=atom"><!-- Include visitor tracking code (if any) -->

<script type="text/javascript" src=
"http://www.savannahcollections.com/index.php?action=tracking_script">
</script><!-- Start Tracking Code for analytics_googleanalytics -->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-16896393-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script><!-- End Tracking Code for analytics_googleanalytics -->

<style type="text/css">
 #Wrapper { background-image: url("http://www.savannahcollections.com/product_images/header_images/Furniture_headerImage.jpg"); } 
</style>

<script type="text/javascript" src=
"http://www.savannahcollections.com/javascript/jquery.js?09783">

</script>
<script type="text/javascript" src=
"http://www.savannahcollections.com/javascript/menudrop.js?09783">
</script>
<script type="text/javascript" src=
"http://www.savannahcollections.com/javascript/common.js?09783">
</script>
<script type="text/javascript" src=
"http://www.savannahcollections.com/javascript/iselector.js?09783">
</script>
<script type="text/javascript">
 //<![CDATA[
 config.ShopPath = 'http://www.savannahcollections.com';
 config.AppPath = '';
 var ThumbImageWidth = 205;
 var ThumbImageHeight = 167;
 //]]>
</script>
<script type="text/javascript" src=
"http://www.savannahcollections.com/javascript/quicksearch.js">
</script>
</head>
<body>
<div id="Container">
<div id="AjaxLoading"><img src=
"http://www.savannahcollections.com/templates/__custom/images/ajax-loader.gif"
alt="">&nbsp; Loading... Please wait...</div>

<div id="TopMenu">
<ul style="display:">
<li style="display:" class="First"><a href=
"http://www.savannahcollections.com/account.php">My
Account</a></li>
<li style="display:"><a href=
"http://www.savannahcollections.com/orderstatus.php">Order
Status</a></li>
<li style="display:"><a href=
"http://www.savannahcollections.com/wishlist.php">Wish
Lists</a></li>
<li><a href=
"http://www.savannahcollections.com/giftcertificates.php">Gift
Certificates</a></li>
<li style="display:" class="CartLink"><a href=
"http://www.savannahcollections.com/cart.php">View Cart </a></li>
<li style="display:">
<div><a href='http://www.savannahcollections.com/login.php'
onclick=''>Sign in</a> or <a href=
'http://www.savannahcollections.com/login.php?action=create_account'
onclick=''>Create an account</a></div>

</li>
</ul>
<br class="Clear"></div>
<div id="Outer">
<div id="Header">
<div id="Logo"><a href=
"http://www.savannahcollections.com/"><img src=
"http://www.savannahcollections.com/product_images/logo2.gif"
border="0" id="LogoImage" alt="Savannah Collections" name=
"LogoImage"></a></div>
<div id="SearchForm">
<form action="http://www.savannahcollections.com/search.php"
method="get" onsubmit="return check_small_search_form()">
<label for="search_query">Search</label> <input type="text" name=
"search_query" id="search_query" class="Textbox" value="">
<input type="image" src=
"http://www.savannahcollections.com/templates/__custom/images/ecru/Search.gif"
class="Button"></form>
</div>
<script type="text/javascript">
    var QuickSearchAlignment = 'left';
    var QuickSearchWidth = '225px';
    lang.EmptySmallSearch = "You forgot to enter some search keywords.";
</script><br class="Clear"></div>
<div id="Menu">
<ul>

<li class="First ActivePage"><a href=
"http://www.savannahcollections.com/"><span>Home</span></a></li>
<li class=""><a href=
"http://www.savannahcollections.com/pages/Bedroom.html"><span>Bedroom</span></a></li>
<li class=""><a href=
"http://www.savannahcollections.com/pages/Dining-Room.html"><span>Dining
Room</span></a></li>
<li class=""><a href=
"http://www.savannahcollections.com/pages/Living-Room.html"><span>Living
Room</span></a></li>
<li class=""><a href="/categories/Accent-Items/"><span>Accent
Items</span></a></li>
<li class=""><a href=
"http://www.savannahcollections.com/pages/Collections.html"><span>Collections</span></a></li>
<li class=""><a href=
"http://www.savannahcollections.com/pages/About-Us.html"><span>About
Us</span></a></li>
<li class=""><a href=
"http://www.savannahcollections.com/pages/Compare-Our-Quality.html">
<span>Compare Our Quality</span></a></li>

<li class=""><a href=
"http://www.savannahcollections.com/pages/Our-Guarantee.html"><span>
Our Guarantee</span></a></li>
</ul>
</div>
<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script> <script type="text/javascript" src=
"http://www.timmikins.com/js/fadeslideshow.js">
</script> <script type="text/javascript">
  var mygallery=new fadeSlideShow({
   wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
   dimensions: [940, 510], //width/height of gallery in pixels. Should reflect dimensions of largest image
   imagearray: [
    ["/product_images/uploaded_images/home_start.jpg"],
    ["/product_images/uploaded_images/home1.jpg"],
    ["/product_images/uploaded_images/home2.jpg"],
    ["/product_images/uploaded_images/home3.jpg"],
    ["/product_images/uploaded_images/home4.jpg"],
    ["/product_images/uploaded_images/home5.jpg"],
    ["/product_images/uploaded_images/home6.jpg"],
    ["/product_images/uploaded_images/home7.jpg"] //<--no trailing comma after very last image element!
   ],
   displaymode: {type:'auto', pause:2500, wraparound:true, randomize:false},
   persist: false, //remember last viewed slide and recall within same session?
   fadeduration: 2000, //transition duration (milliseconds)
   descreveal: "ondemand",
   togglerid: ""
  })
</script>
<div id="fadeshow1"></div>
<div id="BottomGallery">
<table width="940" border="0" cellspacing="2" cellpadding="0"
bgcolor="#B3ABA4">
<tr>
<td bgcolor="#605953"><a href="/pages/Collections.html"><img src=
"http://www.savannahcollections.com/product_images/uploaded_images/bottom1.jpg"
alt="#########"></a></td>
<td bgcolor="#605953"><a href=
"/pages/Compare-Our-Quality.html"><img src=
"http://www.savannahcollections.com/product_images/uploaded_images/bottom2.gif"
alt="#########"></a></td>

<td bgcolor="#605953"><a href="/pages/Collections.html"><img src=
"http://savannahcollections.com/product_images/uploaded_images/bottom3.jpg"
alt="#########"></a></td>
</tr>
</table>
</div>
<div id="Footer2">
<table width="940" border="0" cellspacing="10" cellpadding="10"
bgcolor="#605953">
<tr valign="top">
<td width="200">
<h3>Customer Service</h3>
<a href="/pages/Contact-Us.html">1.800.818.9802</a><br>
<a href="/pages/Contact-Us.html">Contact Us</a></td>
<td width="200">
<h3>Our Company</h3>

<a href="/pages/About-Us.html">About Us</a><br>
<a href="/pages/Privacy-Policy.html">Privacy Policy</a><br>
<a href="/sitemap/">Sitemap</a></td>
<td width="200">
<h3>Our Guarantee</h3>
<a href="/pages/Our-Guarantee.html">14-Days Money Back
Guarantee</a><br>
<!-- <a href="/pages/Craftsmanship.html">Craftsmanship</a><br /> -->
 <a href="/pages/Compare-Our-Quality.html">Compare Our
Quality</a></td>
<td width="200">
<h3>My Account</h3>

<a href="/login.php">Account Login</a><br>
<a href="/login.php?from=account.php?action=order_status">Order
Status</a><br>
<a href="/pages/shipping.html">Shipping Information</a></td>
</tr>
</table>
</div>
<div id="Footer">Copyright 2010 Savannah Collections. ALL RIGHTS
RESERVED.<br>
<br></div>
</div>
</div>
</body>
</html>

metrolocity · 16-Jun-2010, 07:37 AM #4

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 · 16-Jun-2010, 07:48 AM #5

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

Code:

<div id="Footer">Copyright 2010 Savannah Collections. ALL RIGHTS
RESERVED.<br>
<br></div>
</div>
</div>
</body>
</html>

metrolocity · 16-Jun-2010, 08:03 AM #6

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:

Quote:

caraewilton · 16-Jun-2010, 08:14 AM #7

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

dudeking · 16-Jun-2010, 08:23 AM #8

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

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

metrolocity · 16-Jun-2010, 09:46 AM #9

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 · 17-Jun-2010, 06:46 AM **#10**

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-...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 · 17-Jun-2010, 04:56 PM **#11**

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 · 17-Jun-2010, 06:20 PM **#12**

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 · 17-Jun-2010, 08:02 PM **#13**

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 · 19-Jun-2010, 05:17 PM **#14**

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 · 21-Jun-2010, 03:40 PM **#15**

Quote:

Originally Posted by metrolocity

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:

Code:

<div id="fadeshow1" style="clear: left;"></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...

Similar Threads
Title	Thread Starter	Forum	Replies	Last Post
Solved: Outlook express outbox does not send pictures	Alexmosc	Web & Email	5	03-May-2010 06:09 PM
Specified service does not exist as an installed service	weckenro	Windows XP	0	29-Jul-2009 11:53 AM
Browser does not show pages	ScuuM	Virus & Other Malware Removal	0	15-Feb-2009 07:52 AM
Outlook 2007 does not index new mails, therefore search results are incomplete	Sowk	Business Applications	12	14-Sep-2008 11:11 PM
Aol - Browser Does Not Load Pages!	soccerchik	Web & Email	1	08-Jul-2004 07:27 AM

Tag Cloud
acer asus bios bsod computer crash desktop drive driver drivers error ethernet excel freeze gaming hard drive hardware hdmi internet laptop malware memory missing monitor motherboard mouse network operating system printer problem ram registry router slow software sound toshiba trojan uninstall usb video virus vista wifi windows windows 7 windows 7 32 bit windows 7 64 bit windows xp wireless

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for:

Find the solution to yourcomputer problem!

Find the solution to your
computer problem!