How to Fix the CSS Box in IE
When designing a simple website, hypertext markup language, or HTML, and cascading style sheets, also known as CSS, are used to create a layout. The combination of these two elements creates boxes, which the World Wide Web Consortium calls the box model. While the box model works fine in most browsers, Internet Explorer, or IE, has some issues. While designing a website with CSS you might run into some quirks in IE. There are several workarounds to avoid these strange problems.
Other People Are Reading
Instructions
-
-
1
Add "word-wrap: break-word;" to each div. When you have a line of text that is too long for your div, it is automatically broken into several lines by most browsers. However, IE does not break the text for you automatically, causing your div to stretch. The word-wrap command will force IE to break the word for you, placing it into several lines and keeping your div the desired width. In action, the CSS appears like so:
<style>
#box{
background-color: #000;
width: 500px;
word-wrap: break-word;
}
</style>
-
2
Add the following doctype to your page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Place this code at the top of your HTML document, before the <html> tag. This adjusts the padding for the overall page in browsers earlier than IE 8. Without it, the size of your divs won't be exactly as you set them, which can throw off your boxes.
-
-
3
Add the CSS code "overflow: hidden;" to each of your box divs. This code works much like the "word-wrap: break-word;" code, only this works for images as well. This code is not ideal, as by design it will crop text and images that are wider than your boxes, however it keeps these rogue images and long lines of text from breaking your layout. When you implement this code, the CSS will look something like this:
<style>
#box{
background-color: #000;
width: 500px;
overflow: hidden;
}
</style>
-
1
Tips & Warnings
You can use both the word-wrap and the overflow codes at the same time.
References
- Photo Credit Comstock/Comstock/Getty Images
