September 28, 201213 yr Hi Guys, I've designed a layout, very beginner i realise. It works so far in most browsers, yet it wont work in Safari. The area with the main content in is supposed to scroll (as you will see in chrome, firefox, IE etc.). The issue is, when it is opened in Safari, the content from the scrolling div, decides to wonder off over the top of the rest of the layout! The website address is http://www.burgatefarmhouse.co.uk I would really appreciate some advice with this, as i have looked over it and am failing to see the problem, even though i am sure it is minor. I think it may have something to do with the div tags. Thank you for any help Here is the code... ***THE HTML*** <!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" <html xmlns:fb="http://ogp.me/ns/fb#"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Burgate Farmhouse, 2 beautiful self catering holiday cottages in the New Forest. Long and short breaks available, late booking discount also available. Special offers on our site." /> <meta name="keywords" content="New,Forest,Short,Long,Breaks,Self,Catering,Holiday,Cottage,Beautiful,Discount,Value" /> <meta name="author" content="Yorspec & Christine Bennett" /> <link rel="stylesheet" href="CSS/burgatestyle.css" /> <link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" /><style>._css3m{display:none}</style> <link rel="shortcut icon" href="Images/favicon.ico" /> <title>Burgate Farmhouse | Self Catering Cottages in the New Forest | New Forest Accomodation</title> </head> <!--Web Design by Yorspec - www.yorspecdesign.co.uk--> <body> <div id="fb-root"></div> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div id="navbar"> <center><ul id="css3menu1" class="topmenu"> <li class="topmenu"><a href="index.html" title="Homepage" style="height:16px;line-height:16px;">Home</a></li> <li class="toproot"><a href="accommodation.html" title="Accommodation" style="height:16px;line-height:16px;"><span>Accommodation</span></a> <ul> <li><a href="littlethatch.html" title="Little Thatch">Little Thatch (Sleeps 2-4)</a></li> <li><a href="wishingwell.html" title="Wishing well">Wishing Well (Sleeps 6)</a></li> <li><a href="gamesbarn.html" title="Games barn and garden">Games Barn & Garden</a></li> </ul></li> <li class="toproot"><a href="prices.html" title="Prices and Availability" style="height:16px;line-height:16px;"><span>Prices & Availability</span></a> <ul> <li><a href="thatchprice.html" title="Little Thatch Prices">Little Thatch (Sleeps 2-4)</a></li> <li><a href="wishprice.html" title="Wishing well prices">Wishing Well (Sleeps 6)</a></li> <li><a href="booking.html" title="How to book">How To Book</a></li> </ul></li> <li class="topmenu"><a href="location.html" title="Location and Directions" style="height:16px;line-height:16px;">Location & Directions</a></li> <li class="topmenu"><a href="attractions.html" title="Things to see and do" style="height:16px;line-height:16px;">Things to see & do</a></li> <li class="toplast"><a href="aboutus.html" title="About us, and testimonials" style="height:16px;line-height:16px;">About Us & Testimonials</a></li> </ul></center> </div> <div id="mainwrap"> <div id="contentwrap"> <BR /> <center><div id="paperbanner"> <div id="specialoffers"></div> </div></center> <div id="content"> <div id="farmhouseimage"></div> <p><strong><h2>Self catering accomodation - 2 Holiday Cottages in the New Forest</h2></strong><BR /> Burgate Farmhouse is a 15th century thatched listed property in Fordingbridge, Hampshire. It is close to the New Forest National Park. <BR /><BR /> There are two self catering cottage wings of the farm house. Little Thatch, which will sleep two to four people and Wishing Well, which will sleep six people. <BR /><BR /> The large Games Barn in the grounds has a skittle alley, pool table, table tennis table, dart boards and lots of children’s toys. Dogs are welcome here, and Little Thatch has an ideal back garden/yard area, which is totally secure. With cots and high chairs available as well as much more baby and toddler equipment, the little ones will feel at home too. <BR /><BR />The pretty half acre garden is available for all to enjoy. with a summerhouse, Barbeque, garden furniture, swings & foot- ball net. Parking on site is plentiful, offering you peace of mind during your stay. We have free Broadband WiFi for all guests. Short breaks are available from Nov to May, short breaks are sometimes possible in main season. See the bottom of this page for ‘Special Offers’. Late availability discounts are available and credit or debit cards are accepted. <BR /><BR /> <center><img src="Images/paymentlogo.png" /></center><BR /><BR /> <center><iframe width="815" height="480" src="http://www.youtube.com/embed/QvplJcaushI?rel=0" frameborder="0" allowfullscreen></iframe></center> </p> </div> </div> </div> <div id="promoboxeswrap"> <div id="promoboxleft"><div id="accreditations"></div></div> <div id="promoboxmiddle"><center><strong>Christine Bennett<BR /> Burgate Farmhouse<BR /> Fordingbridge, New Forest<BR /> Hampshire, SP6 1LX<BR /> 01425 655909<br /> 07837 052645</strong></center></div> <div id="promoboxright"> <div id="promoboxrighttext">See more of Burgate Farmhouse with Flickr and YouTube, or ‘like’ us on facebook.</div> <div id="fblikebox"><iframe allowtransparency="yes" frameborder="0" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fburgatefarmhouse&send=false&layout=box_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=90"></iframe></div> </div> </div> </body> </html> ***An then the CSS*** @charset "utf-8"; /*Web Design By Yorspec - All rights reserved*/ /*www.yorspecdesign.co.uk for Web Design and Hosting*/ body { margin:0px; padding:0px; background-image:url(../Images/backgroundimage.png); font-family:Arial, Helvetica, sans-serif; color:#525252;} p { font-family:Arial, Helvetica, sans-serif; color:#525252;} h2 { font-family:Arial, Helvetica, sans-serif; font-size:18px; color:;#525252;} #navbar { width:901px; height:45px; margin:0 auto; background:url(../Images/navbarbg.png) no-repeat; padding-bottom:40px;} #mainwrap { clear:both; width:901px; height:653px; margin:0 auto; background:url(../Images/contentbg.png) no-repeat; padding-bottom:20px; padding-top:8px;} #contentwrap { clear:both; width:870px; height:630px; overflow:scroll; margin:inherit; overflow-y: scroll; overflow-x: hidden;} #content { width:815px; margin:0 auto;} #promoboxeswrap { clear:both; width:901px; height:150px; margin:0 auto; background:url(../Images/Promoboxes.png) no-repeat; padding-bottom:20px;} #paperbanner { width:878px; height:180px; margin:0 auto; padding-right:10px; background:url(../Images/specialofferspaper.png) no-repeat;} #farmhouseimage { float:left; clear:both; width:325px; height:208px; background:url(../Images/farmhouse.png) no-repeat; padding-right:25px; margin-bottom:5px;} #promoboxleft { float:left; width:265px; height:130px; padding-top:10px; padding-left:10px; padding-bottom:10px; padding-right:10px;} #promoboxmiddle { float:left; width:272px; height:130px; padding-top:17px; padding-left:24px; padding-bottom:10px; padding-right:20px; font-family:Arial, Helvetica, sans-serif; font-size:16px;} #promoboxright { float:left; width:276px; height:130px; padding-top:10px; padding-left:14px; padding-bottom:10px; padding-right:10px; overflow:hidden;} #specialoffers { height:170px; width:220px; float:right; padding-right:100px;} #promoboxrighttext { width:276px; height:50px;} #fblikebox { clear:both; margin-top:13px; width:50px;} #accreditations { margin:0 auto; width:270px; height:120px; background:url(../Images/accreditations.png) no-repeat;} Edited September 28, 201213 yr by Kirk Freeman
September 28, 201213 yr Can't find any difference between Firefox(15) and Safari(5.1.7). In both the browsers I'm able to scroll the main content. Léon
September 28, 201213 yr Author But, does the content (i.e the youtube video) not appear to overflow on to the boxes at the bottom of the page?
September 29, 201213 yr why use an i frame? why not just use a normal page or then a div with a set height and overflow set to auto? also you need to optimise your background image 3mb is way too big - if you're not so experienced yet with your image editor then try something like http://www.smu****.com/ysmush.it/ oh and take out the double <BR /> and start a new <p> instead
September 29, 201213 yr I second the use of an iframe. This isn't needed these days. Use a DIV with the correct overflow settings as this will keep all content on the same page which is far better for SEO. On a side note, it works here.
October 2, 201213 yr Author The iFrame is for the youtube video. So are you guys saying that, on your computer, the site looks fine in safari?
October 2, 201213 yr The iFrame is for the youtube video. So are you guys saying that, on your computer, the site looks fine in safari? Yep
October 3, 201213 yr Author Works perfectly fine in Safari for me. What version of Safari are you using? Version 5.1.7 i think!
Create an account or sign in to comment