PDA

View Full Version : left margin in IE wrong, FF is fine?



alex mcnab
Aug 13th, 2007, 06:34 PM
Hi
I'm a bit stuck on this and would appreciate any help.
I'm drafting out a page layout here
http://www.mcnabdesign.co.uk/east/latest.htm
It looks fine in Firefox but the left margin disappears in IE. I've looked for a solution but can't work it out. I've got a container div, a header called #banner, #rightinfo, #content and #footer

Here's the CSS

body { margin: 0;
padding: 0;
font-family: Trebuchet MS, Arial, sans-serif, ;
background-color: #CCFF33; }

#container { margin: 10px; background-color: #FFFFFF;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333; }

#banner { background-color: #0257b6;
border-bottom: 1px solid #333; }
#banner h1 { margin: 0;
padding: .5em;
color: #ffffff; font-size: 1.5em }

#rightinfo { float: right;
width: 230px;
margin-right: 5px;
padding: 2em 1em;
border-left: thin solid #000066 }

#rightinfo p { margin-top: 3px; font-size: 0.82em }
#rightinfo h6{ background-color: #000066;
color: #FFFF00;
font-size: 0.8em;
padding: 3px;
font-weight: bold }

#content { padding-top: 1em;
margin: 0 300px 20px 5px; }
#content h2 { margin-top: 0; }

#footer { clear: both;
background-color: #000066;
color: #FFFFFF;
padding: .5em;
text-align: center;
border-top: 1px solid #333; }


And the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>basic structure</title>

<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner">

<h1>Company logo & menu go here in the #banner div</h1>
<script src="xaramenu.js"></script><script Webstyle4 src="menu/bluemenu.js"></script></div>

<div id="rightinfo"><!-- #BeginLibraryItem "/library/openingtimes.lbi" -->
<h6>Company Times </h6>
<p>Monday to Friday 8am to 6pm</p><br>
<h6>Address etc </h6>
<p>other details</p>

<!-- #EndLibraryItem --></div>
<div id="content">
<h2>Main Content of each page</h2>

<p>This is the #content div where the main content for each page will appear</p>

</div>

<div id="footer">
<p>Footer information will appear here</p>
</div>
</div>

</body>
</html>

cheers, Alex

harbingerOTV
Aug 13th, 2007, 08:47 PM
try changing this:



body { margin: 0;
padding: 0;
font-family: Trebuchet MS, Arial, sans-serif, ;
background-color: #CCFF33; }

#container { margin: 10px; background-color: #FFFFFF;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333; }


to this:


body { margin: 0;
padding: 10px;
font-family: Trebuchet MS, Arial, sans-serif, ;
background-color: #CCFF33; }

#container { background-color: #FFFFFF;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333; }

alex mcnab
Aug 13th, 2007, 11:26 PM
try changing this:



body { margin: 0;
padding: 0;
font-family: Trebuchet MS, Arial, sans-serif, ;
background-color: #CCFF33; }

#container { margin: 10px; background-color: #FFFFFF;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333; }


to this:


body { margin: 0;
padding: 10px;
font-family: Trebuchet MS, Arial, sans-serif, ;
background-color: #CCFF33; }

#container { background-color: #FFFFFF;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333; }


I tried that (locally) and it looked the same...fine in FF, wrong in IE

alex mcnab
Aug 14th, 2007, 10:21 AM
I think the problem lies with the #footer

If I remove
clear: both;
from the #footer, the left margin appears fine but of course the footer then appears too high up the screen. Appreciate any help.

alex mcnab
Aug 14th, 2007, 02:06 PM
This seems to have sorted it:-


body { margin: 10px;
padding: 0px;
font-family: Trebuchet MS, Arial, sans-serif, ;
background-color: #CCFF33; }

#container { background-color: #FFFFFF;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333; }