IE versus FF problem.

[KiwiBrian]

I am having a problem getting IE6 and FireFox 1.07 to display a page in the
same way.
If anyone has the time to look the the page is:-
http://www.hibiscuslink.co.nz/Oxfam/aboutox.html
All the CSS is embedded for convenience.
The discrepancy between the two browsers that I have been unable to
eliminate is the vertical spacing between the navbar and the text "About
Oxfam New Zealand" below the navbar.
While it is not a critical issue in this case, I feel that there is probably
an important lesson to be learned here.
Brian.

 

[Beauregard T. Shagnasty]

I am having a problem getting IE6 and FireFox 1.07 to display a page in the
same way.
If anyone has the time to look the the page is:-
http://www.hibiscuslink.co.nz/Oxfam/aboutox.html
All the CSS is embedded for convenience.
The discrepancy between the two browsers that I have been unable to
eliminate is the vertical spacing between the navbar and the text "About
Oxfam New Zealand" below the navbar.
While it is not a critical issue in this case, I feel that there is probably
an important lesson to be learned here.
Brian.

Maybe correcting the errors will help.

27 errors in the HTML.
<http://validator.w3.org/check?verbose=1&uri=http://www.hibiscuslink.co.nz/Oxfam/aboutox.html>

Many CSS warnings. Start by removing the comment markers within the
<style> block.
<http://jigsaw.w3.org/css-validator/...p://www.hibiscuslink.co.nz/Oxfam/aboutox.html>

 

[rf]

I am having a problem getting IE6 and FireFox 1.07 to display a page in the
same way.
If anyone has the time to look the the page is:-
http://www.hibiscuslink.co.nz/Oxfam/aboutox.html
All the CSS is embedded for convenience.
The discrepancy between the two browsers that I have been unable to
eliminate is the vertical spacing between the navbar and the text "About
Oxfam New Zealand" below the navbar.
While it is not a critical issue in this case, I feel that there is probably
an important lesson to be learned here.

Switch on borders for all elements:
* {border: solid 1px green;}
and you will see which elements are causing the space and which
margin/padding properties you should tweak to remove the space.

I'm suspicious of that margin: 0,auto.

BTW when I ignore your font-size: 14px (which is two pixels below my
preferred and minimum font size of 16px) your navigation wraps onto two
lines.

 

[KiwiBrian]

I am having a problem getting IE6 and FireFox 1.07 to display a page in the
same way.
If anyone has the time to look the the page is:-
http://www.hibiscuslink.co.nz/Oxfam/aboutox.html
All the CSS is embedded for convenience.
The discrepancy between the two browsers that I have been unable to
eliminate is the vertical spacing between the navbar and the text "About
Oxfam New Zealand" below the navbar.
While it is not a critical issue in this case, I feel that there is
probably
an important lesson to be learned here.
Brian.

Thanks very much chaps.
You were both very helpful in a catalytic sort of way....
Brian

 

[Vladdy]

I am having a problem getting IE6 and FireFox 1.07 to display a page in the
same way.
If anyone has the time to look the the page is:-
http://www.hibiscuslink.co.nz/Oxfam/aboutox.html
All the CSS is embedded for convenience.
The discrepancy between the two browsers that I have been unable to
eliminate is the vertical spacing between the navbar and the text "About
Oxfam New Zealand" below the navbar.
While it is not a critical issue in this case, I feel that there is probably
an important lesson to be learned here.
Brian.

Step 1: Correct HTML mark-up errors as was already pointed out
Step 2: Switch to Strict DTD to put IE in a "slightly more" compliant mode
Step 3: Correct any new mark-up that were cased by switching doctype
Step 4: Start styling...