Layout is wrecked in IE but perfect in FF!? Anyway to make it right in both? [Archive]

vivalaart

08-15-2010, 06:37 PM

Hi everyone!

So I love coding in Div's/css but one thing I hate (and this is probably just me :p ) is I can always get it perfect in FF (main browser I use) but it is horrible or almost-close in IE. And this is something I always face, I can never get it right!

I've started coding my new design for my site and though I'm not done, I can't continue unless I know what I have so far is good on both browsers. It's perfect in FF but terrible in IE! Here is the demo page I've set for your viewing: Click here (http://jessica-lucas.net/BlueHaze/).

Here is the css snippet:
/************************* JLN BODY *************************
----------------------------------------------------------------------------------- */

body {
font-family: "Verdana";
font-size: 11px;
text-align: center;
margin: 0 0px;
padding: 0px;
background: #f6f6f4 url("images/bgx.png") repeat-x;
}

#Inner_Page {
width: 900px;
margin: 0 auto;
text-align: justify;
position: relative;
}

/************************* LAYOUT STRUCTURE *************************
----------------------------------------------------------------------------------- */
#header {
width: 900px;
height: 516px;
background: url("images/blue-haze_01.png") top no-repeat;
font-family: "Times New Roman", Times, serif;
font-size: 10px;
color: #8b8b89;
line-height: 12px;
text-align: justify;
}

#header-links {
width: 330px;
height: 41px;
padding: 93px 0px 0px 398px;
margin: 0px;
}

#header-links img {
padding: 0px;
border: 0px;
}

#header-links img:hover {
padding: 0px;
border: 0px;
}

.ad {
width: 728px;
height: 90px;
padding: 8px 0px 0px 3px;
}

#intro {
width: 238px;
height: 126px;
padding: 20px 0px 0px 295px;
}

#images {
padding: 0px 0px 0px 575px;
width: 280px;
height: 126px;
margin-top: -130px;
}

Is there anyway I can fix this to have it right in both browsers?

Thanks for any help!

met

08-15-2010, 06:59 PM

you have no doctype which is almost certainly the problem

add this to the top:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

using transitional. strict may be used, down to preference

read : http://www.alistapart.com/articles/doctype/

edit ~ fix these validation errors - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fjessica-lucas.net%2FBlueHaze%2F