There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
Search
Web Design & Development
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
Search
Search for:
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
Solved: Safari does not render page properly - All browsers OK - Any Advice?

Reply  
Thread Tools
metrolocity's Avatar
Junior Member with 14 posts.
 
Join Date: Jul 2009
15-Jun-2010, 08:21 PM #1
Solved: Safari does not render page properly - All browsers OK - Any Advice?
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's Avatar
Computer Specs
Senior Member with 1,044 posts.
 
Join Date: Sep 2007
Location: Spain
Experience: Adv PC, int HTML, bit PHP
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's Avatar
Computer Specs
Senior Member with 1,288 posts.
 
Join Date: Nov 2007
Location: South Africa
Experience: Intermediate
16-Jun-2010, 03:26 AM #3
Quote:
Originally Posted by colinsp View Post
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> 
__________________
Here is the updated and working link for anyone looking for the tutorial: how to create a web page photograph gallery using CSS and HTML
metrolocity's Avatar
Junior Member with 14 posts.
 
Join Date: Jul 2009
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's Avatar
Computer Specs
Senior Member with 1,288 posts.
 
Join Date: Nov 2007
Location: South Africa
Experience: Intermediate
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's Avatar
Junior Member with 14 posts.
 
Join Date: Jul 2009
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:
<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>
caraewilton's Avatar
Computer Specs
Senior Member with 1,288 posts.
 
Join Date: Nov 2007
Location: South Africa
Experience: Intermediate
16-Jun-2010, 08:14 AM #7
Sorry, i really don't know enough about javascript to help with that:-(
dudeking's Avatar
Member with 483 posts.
 
Join Date: Feb 2007
Location: UK, Midlands
Experience: Advanced
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's Avatar
Junior Member with 14 posts.
 
Join Date: Jul 2009
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's Avatar
Computer Specs
Senior Member with 1,156 posts.
 
Join Date: Apr 2009
Location: USA, Canada, Europe
Experience: Advanced
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?

__________________
.
~ Want more of my advice? See my other past posts on these topics:
~ DVD Burning Problems / VCR-to-DVD Help / Digital Photo Tips / Making Websites ~
metrolocity's Avatar
Junior Member with 14 posts.
 
Join Date: Jul 2009
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's Avatar
Computer Specs
Senior Member with 1,156 posts.
 
Join Date: Apr 2009
Location: USA, Canada, Europe
Experience: Advanced
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.)
__________________
.
~ Want more of my advice? See my other past posts on these topics:
~ DVD Burning Problems / VCR-to-DVD Help / Digital Photo Tips / Making Websites ~
metrolocity's Avatar
Junior Member with 14 posts.
 
Join Date: Jul 2009
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's Avatar
Computer Specs
Senior Member with 1,156 posts.
 
Join Date: Apr 2009
Location: USA, Canada, Europe
Experience: Advanced
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.
__________________
.
~ Want more of my advice? See my other past posts on these topics:
~ DVD Burning Problems / VCR-to-DVD Help / Digital Photo Tips / Making Websites ~
tomdkat's Avatar
Computer Specs
Distinguished Member with 7,127 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
21-Jun-2010, 03:40 PM #15
Quote:
Originally Posted by metrolocity View Post
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...
Reply

THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
WELCOME TO TECH SUPPORT GUY! Are you looking for the solution to your computer problem? Join our site today to ask your question -- for free! Our site is run completely by volunteers who want to help you solve your computer problems. See our Welcome Guide to get started.
Thread Tools


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


Facebook Facebook Twitter Twitter TechGuy.tv TechGuy.tv Mobile TSG Mobile
You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 01:46 AM.
Copyright © 1996 - 2011 TechGuy, Inc. All rights reserved.

Powered by Cermak Technologies, Inc.