View Full Version : Does FF interpreted px differently than Opera/IE

07-25-2005, 05:28 PM
Currently building a webpage and having some trouble making it look as close to the same as possible in all browsers.
I've got a header and nav-bar. All header items have the width 120px, the nav-bar has the width of 120px as well. This is so a black outline is pulled from the header through the nav to the footer. It's strange because the only browser not displaying it correctly is FF. Now I've heard the stories about FF being completely W3C-Rule-Compliant and whatnot, but how come two items with the exact same width that are placed underneath each other do not have the same width?
Is it that FF interprets the px width differently?
I tried recoding the webpage so it looks right in FF, but then it breaks up in everything else.
I used CSS to define the width of the items, both at 120px. It just seems weird.

07-25-2005, 06:16 PM
Did you specify a doctype with a URL?
If not, browsers go into quirks mode, which would account for many discrepancies.
Also, specify padding and margin in the CSS or the browsers get to use defaults, which are not the same cross-browser.

07-25-2005, 06:38 PM
I can't remember exactly but I know IE includes padding and borders in the width of an element - or is it the other way round? That's possibly the cause.

07-25-2005, 06:49 PM
yes, I have specified padding and margin
and I forgot to specify a doctype because it's momentarily only a testpage. This helped, but at the same time didn't. I could fix the width error, but now there's a border error, I set the doctype to strict which has helped a lot, I was fixing the header's height, so that the bottom border appears under the menu, works perfect in Opera and IE, but with FF the line goes throught the bottom of the menu-boxes.
I get the same propblems with xhtml transitional and html 4.01 transitional. Yes I know how they differ, was just trying to get the browsers to display properly.

BTW, does IE ignore the doctype definition, it hasn't changed once, no matter how declared.

07-25-2005, 07:11 PM
Ok, I wanted to use strict or maybe even xhtml 1.1, but I noticed that you are not allowed to use
target="_blank"on <a>.
I don't know what I'm supposed to use instead. JavaScript seems a waste.
If I can't use it I might just switch to transitional.

07-25-2005, 08:12 PM
Yeah you might want to go transitional. You would need some sort of javascript to open a page in a new window. Remember borders and padding count for overall width. Browsers do rending pixels slightly different but can't tell for the most part. Can you show us your code? It sounds like you are floating some items but you haven't cleared them.

07-25-2005, 09:37 PM
Yes, I am floating items, but they have been cleared. I made a class called clear
.clear { clear: both; }
This is how my body is set up:
<div id="header">...</div>
<div class="clear"></div>
<div id="wrapper">
<div id="nav">...</div>
<div id="content">...</div>
<div class="clear"></div>
<div id="footer">...</div>

the header has a fixed position (with items in the header floating left), the wrapper is absolute, nav is floating left, footer no position-attribute specified.

It doesn't matter that much anymore, I found something you might be able to consider a work-a-round. I applied the IE height setting, which works for Opera aswell and FF will have to suffer, it's just not as beautiful. Then again less than 1% of visitors use FF.

Another problem I had was aligning the contents because z-index for elements with position: fixed is ignored by IE.
Is there perhaps a hack? Since my background is going to be white it's not a problem (other colour bgs you could see a white strip at the top). But would be nicer if I could be variable.


(BTW this topic seems to have gone of course from what I originally intended so if a mod/admin could maybe move it into HTML/CSS?)

07-25-2005, 09:40 PM
Hmm looks like you are wanting a fluid layout with a header, content, and footer. http://bonrouge.com/hcf-fluid.php If the link works, its been off and on, you should see an example of a layout that I think you are trying to achieve.

07-25-2005, 10:14 PM
Yes and no, you've given me that link before. They didn't work back then but eventually they worked. Anyways since I'm trying to get my header and nav to be fixed the fluent layout didn't work too well, the nav went crazy. The layout the way it is atm is ok, the thing causing the problem is most likely IE.

07-25-2005, 10:31 PM
Here is a site that seems to have made fixed positioning work in IE. http://www.stunicholls.myby.co.uk/layouts/fixed.html this site might help as well http://tagsoup.com/-dev/null-/css/fixed/#gtev5 This whole site really might be useful to you http://www.stunicholls.myby.co.uk/layouts/

07-26-2005, 07:26 AM
thanks _Aerospace_Eng_