Safari display problem vs. other browsers

Forum Moderators: open

Message Too Old, No Replies

Safari display problem vs. other browsers

Safari distorts webpage

awsariti

7:27 pm on Apr 18, 2011 (gmt 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.

AWS

tedster

7:55 pm on Apr 18, 2011 (gmt 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]

lucy24

4:46 am on Apr 19, 2011 (gmt 0)

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">
<html>

<head>
<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;}

</style>
</head>

<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
</ul>
<p>
<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">
</p>

</body>
</html>

alt131

8:22 am on Apr 19, 2011 (gmt 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.