"Growing" blocks puzzle — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

"Growing" blocks puzzle

This page's ID: 11008

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I suspect that the problem here is a misunderstanding of the "box model". Yes, I believe that's the case. Let me clarify something: the only reason your page (i'm looking at [url=http://www.malmo.bostream.se/richcris/studioone/]http://www.malmo.bostream.se/richcris/studioone/[/url] right now) looks right in Internet Explorer (IE) is because IE knows that you misunderstand the box model, and it's being nice to you. How does IE know that you misunderstand the box model? Because you're using an invalid doctype at the top of your page. If nothing else, the word "doctype" needs to be in capital letters. I think you'll find that if you replace your doctype with this doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> And make sure that it's the very first thing on your page, then IE will display the same problems that Mozilla does. When you use a valid doctype (a list of which can be found at [url=http://www.w3.org/QA/2002/04/valid-dtd-list.html]http://www.w3.org/QA/2002/04/valid-dtd-list.html[/url] ), the browser says "aha, this person knows what they're doing, so I shouldn't be nice to them - I should follow the standards to the letter." So I strongly, strongly, strongly suggest that you use a valid doctype such as the one I suggested. You may also want to make sure your page validates by checking it at validator.w3.org , so that you know you're using HTML and CSS correctly. OK, now that we've determined that the problem is the page and not the browser, allow me to explain what the issue actually is: When you specify the width or height of an element, you are specifying the width or height of the content area, [b]not[/b] including padding, borders, or margins. So, if you want a box to be 20 pixels high with 2 pixels of padding and a 1 pixel border, you want to give it a height of 14. (1 + 2 + 14 + 2 + 1 = 20). Make sense? Same thing for the width of an element. This is a bit of an annoyance, but it's the way that CSS works. In the future, there will be "box-width" and "box-height" properties which behave more intuitively, but in the meantime, you'll have to deal with this different behavior. I think you'll find that when you use a valid doctype and specify the widths/heights of elements in this way, your pages will look correct in both IE and Mozilla, along with other browsers that properly support these standards. OK, now, all would be well and good at this point, except for one thing: Internet Explorer 5. IE 5 is too old to know about the doctype. So, regardless of whether you specify a doctype for your page or not, IE 5 will behave the same way that IE 6 does when you don't specify a valid doctype. That means that you'll encounter the exact opposite of the problem you're facing now when you test your valid page in IE 5. However, there is a known hack for IE 5 that you can use to fix this problem. If IE 5 support is important to you, then after you get your page working in IE 6 and Mozilla, I suggest you take a look at [url=http://www.tantek.com/CSS/Examples/boxmodelhack.html]http://www.tantek.com/CSS/Examples/boxmodelhack.html[/url] which explains the problem and the workaround. It's a little complicated, so I suggest that you make your page work in IE 6 and Mozilla before you get into it. I hope that covers everything. Let us know if you're still confused. Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu