homepage Welcome to WebmasterWorld Guest from 54.196.159.11
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Safari display problem vs. other browsers
Safari distorts webpage
awsariti




msg:4300027
 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




msg:4300039
 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




msg:4300228
 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




msg:4300295
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved