Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Safari display problem vs. other browsers

Safari distorts webpage

7:27 pm on Apr 18, 2011 (gmt 0)

New User

5+ Year Member

joined:Apr 18, 2011
posts: 1
votes: 0

ref: www.nfocusprototype.com/vanallen

I put a Dreamweaver menu flush on top of a YouTube video box and added a "footer" to the bottom of the box. In FireFox, Opera and Camino, the alignment is perfect and flush at top/bottom/sides. However, in Safari and Chrome, there is a small misalignment of the menu on top and the footer on the bottom of about 2px plus the "footer" shows a small gap between it and the bottom of the box, where of course it is normally flush.

I don't know why Safari is "seeing" the code differently. I have zeroed out the margins of the page but that has not helped.

Anyone have any idea what, if anything, can be done?

Thanks in advance.

7:55 pm on Apr 18, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
votes: 0

Welcome to the forums awsarti.

Have you validated your source code? Cross browser display problems can be impossible to fix if there are validation errors, because browsers do not have one standard way of doing error recovery.

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
4:46 am on Apr 19, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 551

Does it have to be HTML 5? I can get it to work in 4.01.

Start by stripping away everything except the bits you need to look at more closely. I put in a bunch of margin=0 and padding=0 just to be safe, but I don't think they're related to the problem. Leave out the "frameborder" property; it isn't recognized in 5 anyway. Oh, and don't bother trying "seamless"; that doesn't do anything either.

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

<title>Van Allen Realty</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=US-ASCII">

<style type="text/css">

body {color: #CCC; background-color: #06007e;}
iframe {margin: 0; padding: 0;}
img {margin: 0; padding: 0; text-decoration: none; border: none;}
p {text-align: center; margin-left: auto; margin-right: auto; width: auto;}


<li>About Us</li>
<iframe title="YouTube video player" width="495" height="305" src="http://www.youtube.com/embed/5tNrE_o5Fzo?rel=0"></iframe>

<img src="../frameBottomInfo.jpg" width="495" height="20" alt = "shut up, validator">

8:22 am on Apr 19, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
votes: 0

Hi awsariti, and welcome to WebmasterWorld :)

As tedster says, validate - there are some errors in the code that could be improved, however ater a quick look I think the source of the trouble in sfari is the line <br>eak between the iframe and the image being used as the "footer".
A quick fix is to delete the <br>. To stop the image being displayed beside the iframe (because the image and iframe are "inline" so will align horizontally if there is enough room) set the img to display:block.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members