On Thursday 2005-07-21 23:13 +0200, Richard Baldwin wrote: > This is my first attempt at web design and I am having some trouble > with differences between IE 6 and FireFox. There seems to be a large > gap between the header div and the contentwrap div in FireFox and a > smaller one in IE 6. I don't want any gap at all, you will see there > is a one pixel white border which was supposed to simulate a gap. I'm > not sure why there is a space between the two divs. In FireFox the > content div seems to be a few pixels shorter in width than the header > and footer divs as well. > > The test page can be viewed at http://www.rtza.net/test/index.html
Your stylesheet has a rule:
#headnav {
height: 32px;
...
background-image: url(images/nav_bg.gif);
background-repeat: repeat-x;
(line 145), but the image is only 30px tall. This accounts for 2 pixels
of the gap (what you see in IE).
The other source of the gap is that the div with id="navwrap" has its
height increased (in Firefox but not IE) by the issue described in
http://developer.mozilla.org/en/docs/Images%2C_Tables%2C_and_Mysterious_Gaps
Since the div with id contentwrap is floating, it must be below this as
well.
(IMO, you'd be better off not using text-within-images and fixed sizes,
especially those in points, but that's a whole other discussion.)
-David
--
L. David Baron <URL: http://dbaron.org/ >
Technical Lead, Layout & CSS, The Mozilla Foundation
pgpYdgdFaKFyT.pgp
Description: PGP signature
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
