Layout fine in Firefox, not IE. Beginner CSS help.

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>

chrishirst · 3rd April 08, 11:25 PM

Having no doctype is the first problem.

23rd March 08, 11:05 PM	#1
kazzywazzy WLC Member Join Date: Mar 2008 Posts: 1	Layout fine in Firefox, not IE. Beginner CSS help. 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> <!-- STYLESHEETS --> <link rel="stylesheet" href="css/basicstyles.css" type="text/css" media="screen" /> </head> <body id="asp"> <DIV id="container"> <!-- START POLAROID --> <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><!-- END POLAROID --> </DIV> </body></html>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

3rd April 08, 11:25 PM	#2
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: Layout fine in Firefox, not IE. Beginner CSS help. Having no doctype is the first problem.