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?
Msg#: 4300025 posted 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">
Msg#: 4300025 posted 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.