Layout differs in IE & Firefox

@netzeyeJul 15.2008

Hi, I am currently using CSS to make my page, but it seems that the layout is perfect when viewed via IE, but when I view it using Firefox, the top part of the layout seems messed up: Here is the flawless layout viewed in IE: ~~[url]~~http://img108.imageshack.us/img108/9956/goodle5.jpg[/url]

and this is what happens when viewed with Firefox.

~~[url]~~http://img108.imageshack.us/img108/7479/errorqj3.jpg[/url]
Can anyone please tell me what’s wrong?

Thanks.

to post a comment

CSS

25 Comments(s) _↴

@dtm32236Jul 15.2008 — #it's an IE problem, not Firefox one...

and it's hard to tell without a link or code, but maybe you can try validating your html and css:

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

IE is the browser to blame for this error. FF and other browsers follow the w3c specs very closely, whereas IE doesn't. This is why people had to come up with hacks to trick IE into behaving correctly (google ie underscore hack, png fix, max-width hack, the  thing).

Anyway, it's always a good idea to view your page in FF/Opera/etc, then to test it in IE. Not the other way around.

@netzeyeauthorJul 15.2008 — #Thanks for the suggestions dtm! By the way, here's the link to the page: http://www.netzeye.com/Stdalone/index2.php ?

@netzeyeauthorJul 15.2008 — #Also, why doesn't the flash show up in Firefox?

@CentauriJul 15.2008 — #The flash doesn't show up in FF as you have the wrong filename in the embed section of the movie code. In any case, the menu movie covers three of the product items rendering them unclickable (IE incorrectly bubbles the mouse hover and click through objects). Flash navigation is a very bad idea as anyone without flash will have no way of navigating the site - a serious accessibility problem. This menu could easily be marked up as a standard suckerfish nested unordered list without sacrificing any of the look.

The other display differences are due to you relying on default browser-applied margins and paddings, which vary between browsers. If you zero all defaults at the start of the css, you can then apply these where needed for better cross-browser conformity :

[CODE]* {
 margin: 0;
 padding: 0;
 }[/CODE]

@netzeyeauthorJul 17.2008 — #I applied the 0 margin and padding in my style.css, but it still didnt work.

Also one more problem, my main content is messe up again in firefox and fine in IE... http://www.netzeye.com/index2.php

Does anyone know why it keeps doing this? I use Dreamweaver and everything is in its proper place, but when I view with Firefox...

@WebJoelJul 17.2008 — #... http://www.netzeye.com/index2.php..[/QUOTE] broken URL. check addy again

@netzeyeauthorJul 17.2008 — #Sorry, it's http://www.netzeye.com/Stdalone/index2.php

@Mr__E__CrypticJul 17.2008 — #why have you 2 head elements, 2 doc types etc? typo?

[code=html]<!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" content="netZeye - Digital Remote Management System"><meta name="keywords" content="netzeye, tsm, cctv camera, security camera, dvr security system">
 <link href="../CSS/style.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body class="layout">
 
 <div id="container">
 <div id="header">
 <MARQUEE scrollDelay=200>&lt;&lt;&lt; Welcome to 
 netZeye.com.... We Provide Remote Watching Solutions and Better Digital 
 Remote Management System in the Market. 
 &lt;&lt;&lt;</MARQUEE>
 </div>
 
 
 
 
 <div id="logo"></div>
 
 
 <div id="topmenu">
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />[/code]

@netzeyeauthorJul 17.2008 — #why have you 2 head elements, 2 doc types etc? typo?

[code=html]<!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" content="netZeye - Digital Remote Management System"><meta name="keywords" content="netzeye, tsm, cctv camera, security camera, dvr security system">
 <link href="../CSS/style.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body class="layout">
 
 <div id="container">
 <div id="header">
 <MARQUEE scrollDelay=200>&lt;&lt;&lt; Welcome to 
 netZeye.com.... We Provide Remote Watching Solutions and Better Digital 
 Remote Management System in the Market. 
 &lt;&lt;&lt;</MARQUEE>
 </div>
 
 
 
 
 <div id="logo"></div>
 
 
 <div id="topmenu">
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />[/code]

[/QUOTE]

Because i am using php include for that "topmenu" (http://www.netzeye.com/topmenu.php). In that file, there is CSS, javascript, and html. I figured CSS always goes in the <head> so I put a <head> element in there, I've deleted it now though.

@Mr__E__CrypticJul 17.2008 — #you can't have 2 <head></head>'s in a document, nor two doctypes. all elements that need to be in the head, have to go in THE head (as in singular - the one at the top, just below the doctype). I'd suggest doing some tidy up and re-arranging. If you're still having problems after you've done this, post your new code / link.

use seperate includes - one in the head for the stuff that's to go in the head and one in the topmenu for stuff that's to go in the topmenu.

Try validating your code as well, you've other common problems like using UPPERCASE attribute names and omitting closing tags for self-closing elements and some others.

@netzeyeauthorJul 17.2008 — #you can't have 2 <head></head>'s in a document, nor two doctypes. all elements that need to be in the head, have to go in THE head (as in singular - the one atthe top, just below the doctype). I'd suggest doing some tidy up and re-arranging. If you're still having problems after you've done this, post your new code / link.[/QUOTE]

Is there a way to separate the CSS*Javascript*HTML in my topmenu file (http://www.netzeye.com/topmenu.php) so that I can place its CSS contents in my style.css (http://www.netzeye.com/CSS/style.css) file? That way, the CSS contents in topmenu.php will be under <head>

edit:

When I tried to validate, it said "This page is not Valid XHTML 1.0 Transitional!", but there were errors. Do I still proceed to fix these errors?

@Mr__E__CrypticJul 17.2008 — #Is there a way to separate the CSS*Javascript*HTML in my topmenu file[/QUOTE]

The CSS and and Javascript can be put in the ACTUAL head, and the menu ( <ul id="navigation"> down to </ul> ) can be left where it is, it will still reference the CSS inthe head.

When I tried to validate, it said "This page is not Valid XHTML 1.0 Transitional!", but there were errors. Do I still proceed to fix these errors?[/QUOTE]

Fix the double head an doc type problem first, this will remove any cascading errors - Once that problem is fixed, re-validate you page and proceed with any errors that remain. As I said before common mistakes you have in the file are using attribute name like "HEAD" when you should be using "head" (all lower case) and you're not closing self closing tags. Almost all tags in xhtml must be in the format <tag></tag> (open / close), however there are some that allow you to both open and close in the one line, an example being the meta tags, these can be <meta name="" content="" /> - using <meta name="" content=""> (no closing /) isn't correct - another common one is the line break tag - <br> isn't valid, <br /> is.

EDIT: I shuld probaby mention that the one exception to the above rule is the DOCTYPE tag which does NOT need to be closed.

@netzeyeauthorJul 17.2008 — #The CSS and and Javascript can be put in the ACTUAL head, and the menu ( <ul id="navigation"> down to </ul> ) can be left where it is, it will still reference the CSS inthe head.

Fix the double head an doc type problem first, this will remove any cascading errors - Once that problem is fixed, re-validate you page and proceed with any errors that remain. As I said before common mistakes you have in the file are using attribute name like "HEAD" when you should be using "head" (all lower case) and you're not closing self closing tags. Almost all tags in xhtml must be in the format <tag></tag> (open / close), however there are some that allow you to both open and close in the one line, an example being the meta tags, these can be <meta name="" content="" /> - using <meta name="" content=""> (no closing /) isn't correct - another common one is the line break tag - <br> isn't valid, <br /> is.

EDIT: I shuld probaby mention that the one exception to the above rule is the DOCTYPE tag which does NOT need to be closed.[/QUOTE]

Thanks for the help. One question though, when you said that I can place the CSS & JS in the actual head, do you mean the head of my index2.php page? If it is, I want to avoid that because any changes in my topmenu's css would require me to change it on every single page on my website.

@Mr__E__CrypticJul 17.2008 — #Is there a way to separate the CSS*Javascript*HTML in my topmenu file[/QUOTE]

Sorry. Yes, you can just place the actual CSS content into your CSS file.

Is the CSS file just for that site, or are you using a CSS file that's for multiple sites/designs?

@Mr__E__CrypticJul 17.2008 — #Sorry, hadn't seen your last post before my last.

I want to avoid that because any changes in my topmenu's css would require me to change it on every single page on my website.[/QUOTE]

yes. use two includes:

one with the css and javascript content ad place it in the head.

<?php

include('stuffForHead.php');

?>

and another one with the actual list which you place in the body - where the list is to appear

<?php

include('menu.php');

?>

@netzeyeauthorJul 17.2008 — #Sorry. Yes, you can just place the actual CSS content into your CSS file.

Is the CSS file just for that site, or are you using a CSS file that's for multiple sites/designs?[/QUOTE]

Nope, it's just for that specific site. the ID for my topmenu in my css file is "topmenu", so would I place the css codes as well as the JS code under that? I wouldn't need to alter anything in my index2.php page then right? <div id="topmenu">

<?php include ("/var/www/html/topmenu.php"); ?>

</div>
[/quote]

@netzeyeauthorJul 17.2008 — #Sorry, hadn't seen your last post before my last.

yes. use two includes:

one with the css and javascript content ad place it in the head.

<?php

include('stuffForHead.php');

?>

and another one with the actual list which you place in the body - where the list is to appear

<?php

include('menu.php');

?>[/QUOTE]

It works now, thanks!

@Mr__E__CrypticJul 17.2008 — #Sorry it's late, and I think we're playing post-tennis here. I think the best way to exlain this is, probably, as follows:

When you've tided the double head problem, the basic structure of your page should look like:

[code=html]<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 
 <body>
 </body>
 </html>[/code]

you need to either add the following to your css file:

[code=html] * {
 padding:0; 
 margin:0;
 }
 body {
 font-family:verdana, sans-serif; 
 font-size:12px;
 }
 #navigation, #navigation li ul {
 list-style-type:none;
 }
 #navigation {
 margin:0px;
 }
 #navigation li {
 float:left;
 text-align:center;
 position:relative;
 }
 #navigation li a:link, #navigation li a:visited {
 display:block; 
 text-decoration:none; 
 color:#ffffff; 
 width:120px; 
 height:25px; 
 line-height:25px; 
 border:1px solid #fff; 
 border-width:1px 1px 0 0; 
 background:#000000; 
 padding-left:10px; 
 }
 #navigation li a:hover {
 color:#fff;
 background:#3d4d5d;
 }
 #navigation li ul li a:hover {
 color:#fff;
 background:#6b839c; 
 }
 #navigation li ul {
 display:none;
 position:absolute; 
 top:25px;
 left:0;
 margin-top:1px;
 width:120px;
 }
 #navigation li ul li ul {
 display:none;
 position:absolute; 
 top:0px;
 left:130px; 
 margin-top:0;
 margin-left:1px;
 width:120px;
 }[/code]

or, place [B]<style type ="text/css">put the above code here</style>[/B] between the <head> and </head> tags. If you wish to go this route (just placing it into the CSS file would be much simpler), then you can put [B]<style type ="text/css">put the above code here</style>[/B] in it's own php file and use <?php include ('thatPage.php'); ?>

the following should be between your <head> and </head> tags:

[code=html]<script type="text/javascript">
 function displaySubMenu(li) {
 var subMenu = li.getElementsByTagName("ul")[0];
 subMenu.style.display = "block";
 }
 function hideSubMenu(li) {
 var subMenu = li.getElementsByTagName("ul")[0];
 subMenu.style.display = "none";
 }
 </script>[/code]

and the following should be between your <body> and </body> tags:

[code=html] <div id="topmenu">
 <ul id="navigation">
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href="http://www.netzeye.com">Home</a> 

 </li>
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href="http://www.netzeye.com/Products/index.php">Products</a> 

 <ul>
 <li><a href="http://netzeye.com/System/Features/index.php">netZeye System</a></li>
 <li><a href="http://netzeye.com/cc/index.php">Capture Card</a></li>
 <li><a href="http://netzeye.com/Peripheral/index.php">netZeye Peripheral</a></li>
 <li><a href="http://netzeye.com/Stdalone/index.php">Standalone</a></li>
 <li><a href="http://netzeye.com/Camera/index.php">CCTV Camera</a></li>
 <li><a href="http://netzeye.com/NVR/index.php">NVR</a></li>
 <li><a href="http://netzeye.com/IP/index.php">IP Solution</a></li>
 <li><a href="http://netzeye.com/CMS/index.php">CMS</a></li>
 <li><a href="http://netzeye.com/Monitors/index.php">Monitors</a></li>
 <li><a href="http://netzeye.com/Cables/index.php">Cables</a></li>
 <li><a href="http://www.netzeye.com/lens/index.php">Lens</a></li>
 <li><a href="http://www.netzeye.com/Accessories/index.php">Accessories</a></li>
 </ul>
 </li>
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href="http://netzeye.com/KB/index3.htm">Knowledge Base</a> 

 </li>
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href="http://netzeye.com/Download/index.htm">Downloads</a> 

 </li> 

 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href="http://netzeye.com/LiveView/index.php">Live View</a> 

 </li> 

 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href>Support</a> 

 <ul>
 <li><a href="http://netzeye.com/support/contact_us.php">Contact Us</a></li>
 <li><a href="http://netzeye.com/support/faqs.php">FAQ's</a></li>
 </ul>
 </li> 

 </ul>
 </li>
 </ul>
 </div>[/code]

@netzeyeauthorJul 17.2008 — #Sorry it's late, and I think we're playing post-tennis here. I think the best way to exlain this is, probably, as follows:

When you've tided the double head problem, the basic structure of your page should look like:

[code=html]<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 
 <body>
 </body>
 </html>[/code]

you need to either add the following to your css file:

[code=html] * {
 padding:0; 
 margin:0;
 }
 body {
 font-family:verdana, sans-serif; 
 font-size:12px;
 }
 #navigation, #navigation li ul {
 list-style-type:none;
 }
 #navigation {
 margin:0px;
 }
 #navigation li {
 float:left;
 text-align:center;
 position:relative;
 }
 #navigation li a:link, #navigation li a:visited {
 display:block; 
 text-decoration:none; 
 color:#ffffff; 
 width:120px; 
 height:25px; 
 line-height:25px; 
 border:1px solid #fff; 
 border-width:1px 1px 0 0; 
 background:#000000; 
 padding-left:10px; 
 }
 #navigation li a:hover {
 color:#fff;
 background:#3d4d5d;
 }
 #navigation li ul li a:hover {
 color:#fff;
 background:#6b839c; 
 }
 #navigation li ul {
 display:none;
 position:absolute; 
 top:25px;
 left:0;
 margin-top:1px;
 width:120px;
 }
 #navigation li ul li ul {
 display:none;
 position:absolute; 
 top:0px;
 left:130px; 
 margin-top:0;
 margin-left:1px;
 width:120px;
 }[/code]

[code=html]<script type="text/javascript">
 function displaySubMenu(li) {
 var subMenu = li.getElementsByTagName("ul")[0];
 subMenu.style.display = "block";
 }
 function hideSubMenu(li) {
 var subMenu = li.getElementsByTagName("ul")[0];
 subMenu.style.display = "none";
 }
 </script>[/code]

and the following should be between your <body> and </body> tags:

[code=html] <div id="topmenu">
 <ul id="navigation">
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href="http://www.netzeye.com">Home</a> 

 </li>
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href="http://www.netzeye.com/Products/index.php">Products</a> 

 <ul>
 <li><a href="http://netzeye.com/System/Features/index.php">netZeye System</a></li>
 <li><a href="http://netzeye.com/cc/index.php">Capture Card</a></li>
 <li><a href="http://netzeye.com/Peripheral/index.php">netZeye Peripheral</a></li>
 <li><a href="http://netzeye.com/Stdalone/index.php">Standalone</a></li>
 <li><a href="http://netzeye.com/Camera/index.php">CCTV Camera</a></li>
 <li><a href="http://netzeye.com/NVR/index.php">NVR</a></li>
 <li><a href="http://netzeye.com/IP/index.php">IP Solution</a></li>
 <li><a href="http://netzeye.com/CMS/index.php">CMS</a></li>
 <li><a href="http://netzeye.com/Monitors/index.php">Monitors</a></li>
 <li><a href="http://netzeye.com/Cables/index.php">Cables</a></li>
 <li><a href="http://www.netzeye.com/lens/index.php">Lens</a></li>
 <li><a href="http://www.netzeye.com/Accessories/index.php">Accessories</a></li>
 </ul>
 </li>
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href="http://netzeye.com/KB/index3.htm">Knowledge Base</a> 

 </li>
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href="http://netzeye.com/Download/index.htm">Downloads</a> 

 </li> 

 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href="http://netzeye.com/LiveView/index.php">Live View</a> 

 </li> 

 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 <a href>Support</a> 

 <ul>
 <li><a href="http://netzeye.com/support/contact_us.php">Contact Us</a></li>
 <li><a href="http://netzeye.com/support/faqs.php">FAQ's</a></li>
 </ul>
 </li> 

 </ul>
 </li>
 </ul>
 </div>[/code]

head, body and the doctype should only occur ONCE per page. you can't use something like <div><body></body></div> (as you have) ALL of your CONTENT goes into the one and only <body></body> on the page.

To be honest, you've a LOT of other problems, but sort you basic page structure first, and then we can look more closely at any problems you're still having.[/QUOTE]

Yes I do lol, and I've already made about 50+ pages already using that layout, which means that every single one of them has the same error... It's gonna take a while.

@Mr__E__CrypticJul 17.2008 — #[code=html]and I've already made about 50+ pages already using that layout[/code]

Ouch!

Make sure you post the revised code before you do all 50 (before you do the 2nd one, in fact) ?

@netzeyeauthorJul 18.2008 — #I have gone through the validation process and all the errors seem to be me not having the correct ending tag like </head> should be </head >... I don't have enough time to go over and fix these 200+ errors because I don't think they are causing the problem I'm getting, which is my layout displaying differently in IE & Firefox. This is the problem Im getting in opera http://img339.imageshack.us/img339/7941/82292651ju8.jpg and this in firefox:http://img149.imageshack.us/img149/5855/fasfasfnw5.jpg

@dtm32236Jul 18.2008 — #Here's the problem:

This is a coding error, not a FF glitch. It may look okay in IE, but if Microsoft decides to follow the real html standards (set by the W3C) in future browsers, then your site will look messed up all over again, in every browser. You're probably going to want to fix these errors.

Do you have Dreamweaver or [insert name of any other wysiwyg editor]? Most have a "Find and Replace" feature. With this, you could replace certain lines of code throughout ever page on your site...

@netzeyeauthorJul 18.2008 — #Here's the problem:

This is a coding error, not a FF glitch. It may look okay in IE, but if Microsoft decides to follow the real html standards (set by the W3C) in future browsers, then your site will look messed up all over again, in every browser. You're probably going to want to fix these errors.

Do you have Dreamweaver or [insert name of any other wysiwyg editor]? Most have a "Find and Replace" feature. With this, you could replace certain lines of code throughout ever page on your site...[/QUOTE]

Yep, I use Dreamweaver CS3. I don't know the exact code that's causing my main contents to be messed up. Could it be my CSS codes (the margin and padding in mainContent) http://www.netzeye.com/CSS/style.css that's causing it?

@Mr__E__CrypticJul 18.2008 — # don't know the exact code that's causing my main contents to be messed up. Could it be my CSS codes (the margin and padding in mainContent) http://www.netzeye.com/CSS/style.css that's causing it?[/QUOTE]

The problem is that your page has some MAJOR problems, not minor pinickety problems, MARJOR problems. This is causing browsers to simple go 'Huh?' when they try to parse the page. Adding fixes might solve your problem on some browsers, but will most likely break on others.

You NEED to spend some time tidying up the pages.

@netzeyeauthorJul 18.2008 — #Do you suggest me make or find another new layout and start over? I look at my codes and my mind just starts spinning lol, i dont even know where to start!

Also in #CSS _↴

Mainteanance Facilities does not look right Pure html/css lagnuage selector smspujcka bez registracniho poplatku dnes

Success!

Help @netzeye spread the word by sharing this article on Twitter...

Tweet This

Layout differs in IE & Firefox

25 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Layout differs in IE & Firefox

25 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

25 Comments(s) _↴

Also in #CSS _↴