Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0
BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design, 2nd Edition by Richard York; ISBN: 9780470096970
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old June 17th, 2009, 06:15 PM
Registered User
Join Date: Jun 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Chapter 7, Fig 7-11c: IE7 and Firefox 3 handle border-collapsing differently


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;
Old June 17th, 2009, 07:59 PM
richard.york's Avatar
Wrox Author
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts

The correct term is "margin collapse", rather than "border collapse" just so new readers don't get confused... it is the margin that collapses not the borders.

"border: 1px;" doesn't work because, I believe, the default border style is none. IE7 probably deviates from the standard and makes the default border style solid.


Similar Threads
Thread Thread Starter Forum Replies Last Post
Chapter 16 Fig 16-11 krsouthern BOOK: Professional SharePoint 2007 Development ISBN: 978-0-470-11756-9 1 July 8th, 2008 12:11 PM
Datalist Style in IE7 and Firefox dgatlin ASP.NET 2.0 Basics 2 April 9th, 2008 08:34 PM
Float acts differently in IE6 than IE7 rsearing CSS Cascading Style Sheets 3 August 30th, 2007 03:01 AM
combo box doesnt work in IE7 but Firefox mamuco Classic ASP Components 1 June 4th, 2007 10:10 AM
Chapter 3 (Fig 3-23) - Box model margins wilsonc BOOK: Accessible XHTML and CSS Web Sites: Problem Design Solution 0 July 31st, 2006 10:23 PM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.