Chapter 7, Fig 7-11c: IE7 and Firefox 3 handle border-collapsing differently
Hi,
I was experimenting with border collapses as described in chapter 7 on pp.218 and 219 of the 2nd edition of York's book, and ran into something that puzzled me. Using a sample file I created myself, I tried to prevent border collapse between a nested div and its parent div by applying a border to the parent, as stated in the text. I found that it worked in IE7, but not in Firefox 3.0. I eventually figured it out, and thought I'd share what I learned here, in case anyone else encounters the same puzzle.
The text states that when you nest an element such as a div inside another div, you must ensure that their top (or bottom) borders do not touch if you want to prevent border collapse, and that you can do this by applying a small border or padding value to the parent element. When I created my own file to test this, I applied a 1px border to the parent div, and found that my page displayed as expected in IE7, but in Firefox, the top border collapsed despite the parent div having a border 1px wide.
When I looked at the author's code more closely, I noticed that he applied a border style as well as a border width to the parent div. When I added a "solid" to my border specification for the parent div, it behaved as expected in Firefox.
This didn't prevent border collapse between div#parent and div#child in Firefox 3.0:
div#parent {
border: 1px;
}
But this did:
div#parent {
border: 1px solid;
}
|
