Wrox Programmer Forums

Need to download code?

View our list of code downloads.

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
Password Reminder
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
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;
  #2 (permalink)  
Old June 17th, 2009, 07:59 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
Join Date: Jun 2003
Location: Camby, IN, USA.
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.


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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

All times are GMT -4. The time now is 06:33 PM.

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