Click to See Complete Forum and Search --> : Layout messed up in Firefox


netzeye
06-27-2008, 05:15 PM
Hi, when I use IE to view my layout, it looks fine, but when I use firefox, the top looks very messed up. Here is my siteS: http://www.netzeye.com/Stdalone/CCTVDVR8/index.php . When viewing with firefox, the width of the top menu becomes shorter. I have set everything to 980 pixels, so there shouldnt be any reason for it to fall short. Here is the page to my css: http://www.netzeye.com/CSS/style.css

Also, one more thing, my mainContent DIV's margin is diff in IE & in Firefox. When viewing with Firefox, the top margin is closer...

Anyone know what's going on ?

Thanks.

WebJoel
06-27-2008, 06:37 PM
A few warnings on validation that should be fixed:<!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">
<HEAD>
<TITLE>netZeye - Digital Remote Management System</TITLE>
<meta name="description"
....

....
<br /> <a href="http://www.netzeye.com/LiveView/index.htm"><a href="http://www.netzeye.com/LiveView/index.htm"><img src="http://www.netzeye.com/netZeye%20Demo.gif" width="100" height="20" border="0"></a><br>
<font color="#000000">8:30 AM- 5:30 PM&nbsp;PST</font>
</center></p></td> Minor & nearly dismissable: these "<HEAD> <TITLE>" should be lowercase for the !doctype used, and of greater concern, the first anchor lacks a explicit closure before another anchor is created/opened.. ("missing "</a>" before "<a>" error")

Centauri
06-27-2008, 06:50 PM
Fiefox is simply correctly displaying what you coded, taking into account its interpretation of the multiple coding errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.netzeye.com%2FStdalone%2FCCTVDVR8%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0) (most of which seem to be due to not coding to the standards of the chosen doctype) - always start with valid code.

As to the margin difference, this is due to setting the height of #category incorrectly - FF will respect the set height and allow the content to overflow that, but IE will incorrectly expand the height.