Login

04-14-2009, 08:24 AM

[eluser]SomeFunkyDude[/eluser]
It is a pain dealing with IE, but using a lot of css is necessary if you want a more detailed layout. One of the main problems with IE is it's interpretation of the box model (margin/border/padding). There's a couple tricks for having your page display right. One is to apply your padding to a content div that's wrapped within another that is simply a wrapper, the content div will expand to fill the parent div, but applying padding or margin to it will help you control the way it looks across multiple browsers.

You can also check out resets to override default browser settings, YUI has one and I know there's a a few other out there.

Also, if your having trouble aligning things, consider this, text-align:center is applied to the body which centers everything in IE but not FF or safari, margin auto is applied to a "wrapper" div which centers the div in FF or safari, but not IE. The only problem with this, is applying text-align:center to the body centers all the text, to get around this, you'll need to use text-align:left or whatever alignment you want, for each box that has content.

Code:
&lt;html&gt;

&lt;head&gt;

&lt;style type="text/css"&gt;

body {

background:#000044;

text-align:center;

}

#wrapper {

width:400px;

background:#FF0000;

color:#FFF;

margin-left:auto;

margin-right:auto;

}

#content {

padding:20px;

text-align:left;

}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;!-- the wrapper div sets the with the box, the content box fills it, which you can then apply margin or padding --&gt;

<div id="wrapper"><div id="content">Sed tempor facilisis tortor. Duis turpis massa, pellentesque eu, lobortis eget, pellentesque non, mi. Aliquam commodo mi non libero. Maecenas eleifend. Nunc rutrum purus in sem. Curabitur tempus faucibus nisi. Integer varius nisl non neque. Maecenas cursus. Etiam accumsan lectus quis justo. Proin egestas lacus non eros. Maecenas a libero. Donec ullamcorper libero vitae odio. </div></div>

&lt;/body&gt;

&lt;/html&gt;