myspaceprodesigns.com
ie & border-box
- bookmark us
- add me on myspace
- add me on xuqa
- add me on yfly
Acura Div Layout
author: Uday
10/27/2007 07:28 AM
Re: Link Probs. Please Help!
10/27/2007 02:35 AM
Link Probs. Please Help!
ie & the border-box model
One of Internet Explorer's biggest flaws is handling of the border-box model. First, let's take a look at what the border-box model is and why it's important for web developers to understand. Basically, the border-box model is defining border, margin, and padding on an element in relation to a defined height and width. All of this is very important to get our spacial relationships correct and to get alignment of elements correct. If you don't know what an element is, we would suggest that you read our section on style sheets. To understand what border, margin, and padding are, take a look at the graphic below:
This diagram shows you that padding is the area around content. Border is the area around the padding. Margin is the area around the border. When defining height and width of an element, margin, border, and padding should be added to the defined height and width. So, for example, if we wanted our content to occupy 200px by 200px, we wanted a padding of 20px, a border of 20px, and a margin of 20px, the overall height and width of the element will end up being 320px because our content will occupy the given 200px by 200px space and the other property widths will be added to that area. If that makes sense to you, check out this example.
If your browser handles the CSS Box Model correctly, the example on the left will look like the image on the right. If your browser does not handle the model correctly (like if you're using Internet Explorer), you will probably see boxes that are severely undersized because, instead of applying margin, border, and padding to the outside of your content, IE will apply these properties to the defined height and width, "squishing" your content in a sense.
There are several methods to correct for this. A common method is to use one of the "hacks" which exploits improper rendering to achieve the desired affect. Basically most hacks use one deficiency to fix another deficiency. Though lots of people like to use hacks, I'm a bit of a purist when it comes to css and avoid them. In fact, you will not find a single hack on this website and the proof that this problem can be fixed without using a hack comes from our second example.
How did I do that? I used something called a conditional comment. Basically, I redefined the rendering for Internet Explorer so it would display the same as other browsers that handle the border box model correctly. Here's the code I'm using in my head section:
<style type="text/css">
html, body {padding:0px; margin:0px;}
#example {
left:0px;
top:0px;
position:absolute;
background-color:yellow;
font:14pt Arial, Helvetica, sans-serif;
width:400px;
}
#comparison {
left:400px;
top:0px;
position:absolute;
}
.layer {
margin:20px;
border:20px solid blue;
padding:20px;
width:200px;
height:200px;
background:hotpink;
font:8pt Arial, Helvetica, sans-serif;
}
</style>
<!--[if lte IE7]>
<style>
.layer {
width:280px;
height:280px;
}
</style>
<![/endif]-->
Let's look at the different parts so you get an understanding of what everything is.
#example is the div on the left which contains the examples and #comparison is the div on the right which contains the image that shows what the div on the left should look like.
.layer are the two boxes that you're comparing. I want the area containing the content to be 200px by 200px with a margin, border, and padding of 20px. In browsers that implement the border-box model correctly, the area covered by this is 280px X 280px (200px + 40px padding + 40px border) + 40px of margin.
Since IE does not render the border box model correctly, I used a conditional comment after my style sheet and redefined my height and width. The conditional says [if lte IE6] to signify that these properties should be applied if the browser is Internet Explorer 6 or below. As you can see, I changed my width and height to 280px because IE will attempt to add the border and padding to the inside of the defined area. So, 280px - 40px border - 40px padding will equal to a content area of 200px.
Since one of the purposes of MPD is to teach you how to apply web design principles to your MySpace or XuQa page, you may be a little shocked to learn that conditional comments do not work on MySpace. That's okay because there's an alternative. It involves nesting. So since you've diagnosed the problem, why don't you check out our tutorial on nesting elements.
Unfortunately, this is extra coding that makes your document size larger, but it's just something that we'll all have to live with until Internet Explorer starts rendering this essential model correctly.
Comments
View Comments (3) • Leave Comment • Support Forum