Aaron Gray wrote: > I seem to be having a problem with div's vertical spacing. > > > > Basically the #header should be 80px in height, on IE it is, but other > browsers are inserting extra line space, effectively creating another lines > worth. > > >
I think you have discovered browser inconsistency with regards to the Box Model (see http://css-discuss.incutio.com/?page=BoxModel for a far more detailed explanation than I could give you). I am assuming you are looking at IE6 as I think IE7 has corrected this issue. Basically, IE<6 (wrongly) includes any padding and borders in its notion of the specified height (or width) of an element - in your case you have specified an 80px height for your #header, which IE thinks *includes* the 40px padding-top. Firefox (and other good browsers) correctly add the 40px padding-top to the 80px height of the div, thereby rendering all that extra space underneath the text. You could hack the CSS for #header to feed a different height to each browser (see http://css-discuss.incutio.com/?page=BoxModelHack ) but it is probably better to convert the padding-top on #header to a margin-top on the contained elements. <span> won't do it because it is an inline element, but you could use <p> or <h1> (which may be more semantically correct anyway), or add {display : block} to the css for span. With no padding, there is no problem with your height specification for #header. Hope this helps. D# ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
