Friday, November 27, 2009

Why are my DIV layouts misaligned in firefox but work fine in ie?

I make my DIV layout using ie and it looks good. But when i use it in firefox everything is misaligned. How do I fix this? Is there a code I need?



Why are my DIV layouts misaligned in firefox but work fine in ie?windows xp themes





More than likely, Firefox is actually displaying things according to standards, and it is IE which is not acting correctly. If you designed only with IE in mind, and then tested on Firefox, you would probably conclude that Firefox doesn't render things properly. The problem gets worse if you developed with IE6, because a page that looks good in IE6 will no longer render the same way for users in IE7.



It's a mess, but there is a well-known way to resolve the problem:



1. Design with web standards in mind. I recommend XHTML Strict 1.0 with CSS. This standard is approved by the W3 Consortium and agreed upon (in theory) by all major browser manufacturers. (-of course their compliance with the standard varies)



2. Validate your code. Use a free validator like validator.w3.org or the html validator toolbar on firefox to ensure your code adheres to the standards. Invalid code may look fine on some browsers (cough: IE6) but not on browsers with stricter adherance (I suspect this is part of your problem.)



3. Use CSS for page layout. If you're using XHTML Strict, you won't really have an option, because you'll no longer be able to use formatting tags (like %26lt;font%26gt; or %26lt;center%26gt;) or frames. CSS takes all the formatting out of XHTML, and makes your XHTML much easier to read and clean. If you use Strict XHTML, it will normally work fine on all browsers. The modifications you'll need to make won't be in the HTML at all, but in the CSS code.



4. Test first in a standards-compliant browser. Use Firefox, Opera or Safari for initial testing, as these browsers have much better standards compliance than IE.



5. Test in IE7. A page that works well in Firefox usually works pretty well in IE7, too, as Microsoft finally decided to follow standards they had agreed to.



6. Identify IE problem areas. There will be places where your CSS has to be altered to handle differences in IE6 and earlier rendering. For example, it's well known that IE does not measure margins and paddings according to the standard, so you'll often need to add a small patch style to fix those areas.



Good luck to you!



Why are my DIV layouts misaligned in firefox but work fine in ie?download windows media player internet explorer



becuase each brower renders html tags a little bit differently also if you are using positioning with css that could be a problem to.
Layouts that work both in IE and Firefox are tricky. It has to do with the rendering engine in Firefox. If it looks good in Firefox, just go with it, unless it's horribly misaligned. Could also be something in the CSS if you're using that.



Coding a custom scrollbar works fine in IE, but Firefox completely ignores that code. Not sure why but they chose to ignore that and will continue to with Firefox 3.



Look at my site in IE, then in Firefox. Not off at all except the scrollbar and Firefox blocks some of the links on my site.



If we could see what the problem is, maybe we could help.
Simply put...IE and Firefox use different web authoring standards. Try rent-a-coder.com to find someone who can do the techical fix for a price. This is not easy stuff.
Usually this problem occurs when using margins, every browser will display them differently. I avoid margins instead I wrap divs and use padding since I find that easiest to do. Make sure that everything is floated properly as well because sometimes this can cause headaches later . Lots of possibilities. Sometimes it can be things as simple as a borders and widths.

No comments:

Post a Comment

 
web hosting talk