Re: [css-d] div spacing problem
From: Aaron Gray [EMAIL PROTECTED] http://angray.members.beeb.net/Examples/CSS/test.html I have used extra div's instead of using padding for positioning and now believe have a working cross browser solution. It would be good to know why the above example had the extra line space though. As was previously explained, the lack of a doctype on your page puts ALL browsers into quirks mode, which can cause quite a variety of different renderings. For IE6, it means, for one thing, that it uses the old, broken box model of its even older relatives, IE5 and IE5.5 [1]. The /real/ box model says you should add borders and padding to the outside of the content width and height. So, for example, if you have a div with a height of 40px, and a top and bottom border of 5px and top and bottom padding of 5px, you have the following addition problem that the browsers are supposed to perform. 40px (declared height) + 10px (top and bottom borders) + 10px (top and bottom padding) = 60px (total height of the div) This can also be shown as 5+5+40+5+5=60 (note: this is just a height example, but width works the same way). When IE6 is in quirks mode (which it is with your page because it has no doctype [2]) and for IE5 and IE5.5, the borders and padding are computed INSIDE the content height. So, if you set the height of your div to 40px, then the borders and padding will stay within this confined space (essentially, as long as your content doesn't make it expand). It is your choice to use a doctype or not on your pages. Just as a caution, however, as you progress with building your page. As I stated before, without a doctype, ALL browsers use their quirks rendering mode, and you will likely find that there are even more differences as you add elements to the page than just what you have found so far. Most people recommend using a valid, standard-compliance-mode-rendering doctype to be placed on page to make most browsers render things in a similar way. If you decide to keep IE6 in quirks mode for your page, you can place a comment, or an XML declaration above the doctype (if you use XHTML) to make that browser behave like its relatives, IE5 and IE5.5. There will still be many differences you will have to account for with the IEs this way, as compared to better browsers. Some people do this all the time (you know who you are...) and some, perhaps most people don't, chosing instead to keep IE6 in standard-compliance mode. I hope that helps clear things up a little for you. ~holly [1] http://www.communitymx.com/abstract.cfm?cid=E0989953B6F20B41 [2] http://www.communitymx.com/abstract.cfm?cid=E2F258C46D285FEE __ 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/
Re: [css-d] div spacing problem
I'm commenting on this since the road one chooses, definitely affects how our CSS-styled pages are rendered and/or our approach to web design. Holly Bergevin wrote: Most people recommend using a valid, standard-compliance-mode-rendering doctype to be placed on page to make most browsers render things in a similar way. If you decide to keep IE6 in quirks mode for your page, you can place a comment, or an XML declaration above the doctype (if you use XHTML) to make that browser behave like its relatives, IE5 and IE5.5. There will still be many differences you will have to account for with the IEs this way, as compared to better browsers. Some people do this all the time (you know who you are...) (sure do :-) ) ...and some, perhaps most people don't, chosing instead to keep IE6 in standard-compliance mode. I most often recommend 'standard-compliance mode' to others - especially to those somewhat new to CSS based layouts. However, I myself leave mode-switching to the browser, since I use an XHTML doctype with an XML declaration on top. Not my fault that IE6 is broken on that point too, and it works to /my/ advantage[1]. IE6 isn't standard-compliant in any mode, so no big deal, IMO. I approach the layout in such a way that it doesn't really matter which mode (or mood) IE6 is in, so I can switch mode back and forth in IE6 without getting any major rendering-differences. That's all CSS, and pretty simple once one gets used to it - just like everything else in web design. I *recommend* that our creations are provided with a doctype that'll trigger standard mode[2] in standard-compliant browsers, so they default to the same standards. That is the only way to secure that the outcome of our work with CSS-layouts is somewhat close to what we want across browser-land. IE6 will always be off, but not by much :-) Think that's it on the subject ;-) regards Georg [1]http://www.gunlaug.no/contents/wd_additions_16.html [2]http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html -- http://www.gunlaug.no __ 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/
Re: [css-d] div spacing problem
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, IE6 (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/
Re: [css-d] div spacing problem
David Sharp wrote: 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. My bad - IE6 strict also gets the box model correct. In the case in point the lack of doctype declaration throws the browser into quirks mode. 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/
Re: [css-d] div spacing problem
Aaron Gray wrote: The following web page works properly in IE but not FF, NS, and Opera. http://angray.members.beeb.net/Examples/CSS/test.html 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. Aaron This is /one/ way of doing something like that: http://www.chelseacreekstudio.com/ca/cssd/layout18.html -Make sure you a have a doctype -Use percent or em as a unit of measure for specifying fonts on the screen. Best, ~dL -- http://chelseacreekstudio.com/ca/ccs/pow/pow.html __ 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/
