Layout fine in Firefox, not IE. Beginner CSS help. [Archive]

kazzywazzy

23rd March 08, 11:05 PM

I have developed a page in Firefox, which looks exactly as it should when previewed. However, when tested in IE version 7, everything goes inside out and upside down (not literally, but it looks like a dog's breakfast!)

I'm very new to CSS and while I have a grasp of the basic elements, a lot of it for me is 'poking in the dark' and fudging it a little when it comes to positioning.

Because I am so new to this, I wouldn't have the faintest idea what exactly is wrong with it. I suspect there are a number of bugs due to my inexperience. Unfortunately, this project is on a tight deadline and I need answers as soon as possible.

I wondered if some kind person might be willing to have a read through my stylesheet and my page code and see if the answer jumps out at them? It's not a large page and I don't think it's particularly complicated.

Any and all help would be gratefully appreciated.

STYLESHEET

BODY { font-family:Arial,Helvetica, sans-serif; color:#FFFFFF; line-height:135%; font-size:11px; margin:0px; text-align:center;}

P, blockquote {font:13px Arial,Helvetica,Verdana,sans-serif; line-height:135%; color:#0D0D0D; text-align:justify;}

/* Main Page Elements */

#asp {background:#273238;}

#container {width:976px; height:560px; margin:75px auto; text-align:left; padding:0; border:0;}

#menucontainer {background:none; border:0; position:absolute; margin:0; }

#collections {background:none;border:0;position:relative;margin-top:25px;margin-left:-3px;margin-bottom:3px;}

#menubar {background:#fff;border:0;position:relative;}

.polaroid {border-left:3px #fff solid;border-right:3px #fff solid;border-top:3px #fff solid;border-bottom:50px #fff solid;}

#polaroidcontainer {width:750px;height:456px;background:#c3b39c;margi n:0;padding:0;border-left:3px #fff solid;border-right:3px #fff solid;border-top:3px #fff solid;border-bottom:50px #fff solid;float:right;}

#logocontainer {width:785px;height:84px;position:relative;top:436 px;border:0;}

#topmenu {width:976px;height:22px;position:relative;text-align:right;top:0px;border:0;}

#tagline {width:976px;height:121px;position:absolute;left:2 20px;top:70px;border:0;}

#topmenu .img {padding-right:22px;border:0;}

#logopos {width:251px;height:84px;float:right;border:0;}

#passionpos {width:394px;height:15px;position:absolute;top:40p x;left:5px;border:0;}

#menucontent {float:left;padding:5px;}

#menucontent .img { padding:6px; border:0; }

#content {margin-top:-445px;width:410px;padding-right:20px;height:426px;float:right;}

h1 {font:20px/1.2 Georgia, Arial, Helvetica, sans-serif; font-weight:bold; color:#72A296; margin:0;}
h2 {font:22px/1.2 Arial, serif;font-weight:bold;color:#518573;margin:0 0 10px 0;}
h3 {font:15px/1.2 Arial, serif;font-weight:bold;color:#9c4042;margin:0;}
h4 {font:14px/1.2 Arial, serif;font-weight:bold;color:#000;margin:0;}
h5 {font:11px/1.2 Arial, serif;font-weight:bold;color:#333;}
h6 {font-size:12px;}

#keywords {font-size:1px; font-family:Arial,Helvetica,sans-serif; margin:0px; color:#273238;}

HTML/CSS PAGE

<html>

<head><title>Photography</title>


<link rel="stylesheet" href="css/basicstyles.css" type="text/css" media="screen" />

</head>

<body id="asp">

<DIV id="container">



<div id="polaroidcontainer">

<div id="logocontainer" style="z-index:2">

<div id="passionpos"><img src="images/passion.png" alt="Where your wedding day is my passion!" /></div>
<div id="logopos"><img src="images/logo.png" alt="Angelsmith Photography" /></div>

</div>

<img src="images/msw/msw3.jpg" style="margin-top:-84px" alt="" />

</div>

</DIV>

</body></html>