[web] IE vs Firefox Positioning
Author
I am working on a layout and I am experiencing problems with positioning in Firefox.
I have a column on the left side which contains an ul and it gets shifted to the right in FF. This does not happen in IE. I am also having issues with the horizontal navigation. In FF the links seem to be much lower than in IE. Does anyone know what I can do about these issues? Any comments, or suggestions are welcome.
http://jg-webdesign.freehostia.com/work_directory/norridge_park/
Thanks in advance
Try setting padding:0; for your that ul element
Edit: The nav could be the same thing, set padding:0; for that ul also.
Edit: The nav could be the same thing, set padding:0; for that ul also.
Often, the easiest way to fix problems like this is to have two CSS scripts...one for IE, and one for other browsers. Like in IE, maybe it looks right when you have the padding set to 10px, but in firefox, it looks right when the padding is set to 0px. Using 2 different CSS pages you can have it both ways. This is sortof a pain in the ass to do all the time, but it's rather easy.
Using javascript you can tell which browser the user is using, and load the correct script...that will override classes and elements that need to be changed.<br><br>If you decide to go this route and have trouble with the javascript end, post back and someone will help you out.<br><br>ArchG<br><br><!--EDIT--><span class=editedby><!--/EDIT-->[Edited by - ArchG on July 25, 2007 4:05:01 PM]<!--EDIT--></span><!--/EDIT-->
Using javascript you can tell which browser the user is using, and load the correct script...that will override classes and elements that need to be changed.<br><br>If you decide to go this route and have trouble with the javascript end, post back and someone will help you out.<br><br>ArchG<br><br><!--EDIT--><span class=editedby><!--/EDIT-->[Edited by - ArchG on July 25, 2007 4:05:01 PM]<!--EDIT--></span><!--/EDIT-->
There are a few different approaches you can take when using different styles across browsers files:
> Have different CSS pages for browsers, as ArchG said.
> To minimize on repetition, have one main CSS page where everything's standard, and then have your sub-pages where it adjusts classes and such for the different browsers
> Use server side scripting, like PHP, to handle the differences for you.
All of these methods have their benefits and downfalls. Try them out and see which one fits your situation the best and easiest.
> Have different CSS pages for browsers, as ArchG said.
> To minimize on repetition, have one main CSS page where everything's standard, and then have your sub-pages where it adjusts classes and such for the different browsers
> Use server side scripting, like PHP, to handle the differences for you.
All of these methods have their benefits and downfalls. Try them out and see which one fits your situation the best and easiest.
javascript? PHP? Don't. You only need to distinguish IE v.s. non-IE browsers. Just create a nice cross-browser stylesheet and create an extra one that works around IE's buggy and non-compliant behaviour by overriding certain classes. Include the IE-specific stylesheet with conditional comments. It's the only fool-proof way of distinguishing IE from the rest, plus it's XHTML complient, uses no scripting and is forwards-compatible.
See http://www.quirksmode.org/css/condcom.html
See http://www.quirksmode.org/css/condcom.html
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
