PDA

View Full Version : IE7 Layout issue


dovroc
06-04-2008, 11:01 PM
I have just built this site for a school project, and have found that on most of my pages the "main content" is pushed to the bottom of the page when previewing in IE7. Everything looks fine in FF.

Any Ideas why this is happening?

<!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" />
<title>Contact Us </title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-color: #666666;
background-image: url(Images/background_trim.jpg);
}


.thrColHybHdr #container {
width: 900px;
background: #FFFFFF;
text-align: left;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-top: 15px;
}
.thrColHybHdr #header {
background-color: #DDDDDD;
background-image: url(Images/Banner_Round.jpg);
height: 110px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.thrColHybHdr #header h1 {
margin: 0;
padding: 10px 0;
}


.thrColHybHdr #sidebar1 {
float: left;
width: 11em;
padding: 15px 0;
background-color: #FFFFFF;
padding-bottom: 15px;
padding-left: 0px;
left: 0px;
padding-right: 0px;
}
.thrColHybHdr #sidebar2 {
float: right;
width: 11em;
background-color: #FFFFFF;
padding-top: 0.0px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
margin: 0px;
}
.thrColHybHdr #sidebar1 h3, .thrColHybHdr #sidebar1 p, .thrColHybHdr #sidebar2 p, .thrColHybHdr #sidebar2 h3 {
margin-left: 10px;
margin-right: 10px;
}


.thrColHybHdr #mainContent {
border: 2px solid #F9BDF9;
margin-top: 12px;
margin-right: 12em;
margin-bottom: 0;
margin-left: 15em;
padding-top: 0;
padding-right: 2em;
padding-bottom: 0;
padding-left: 2em;
top: auto;
width: 500px;
}
.thrColHybHdr #footer {
padding: 0 10px;
background-color: #DDDDDD;
background-image: url(Images/footer_background.jpg);
}
.thrColHybHdr #footer p {
margin: 0; /
padding: 10px 0;
}
#Editors_Choice {
border: 2px solid #F9BDF9;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 9px;
background-image: url(%20);
background-color: #F9BDF9;
padding-right: 0px;
padding-left: 0px;
width: 155px;
}


.fltrt {
float: right;
margin-left: 8px;
}



#sidebar1 {
float: left;
width: 12em;
padding-top: 0px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0px;
background-color: #FFFFFF;
left: 0px;
}

#nav ul {
padding: 0px;
list-style-image: none;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}
#nav li {
font-size: 85%;
list-style-type: none;
margin-right: 0;
margin-left: 10px;
border: 1px none #000000;
}
#nav a {
text-align: center;
display: block;
width: 100%;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
}


#nav a:link,#nav a:visited {
color: #FFFFFF;
text-decoration: none;
background-color: #F9BDF9;
}


#nav a:hover, #nav a:active {
color: #FFFFFF;
background-color: #E2C8E3;
}
.fltlft {
float: left;
margin-right: 8px;
}
.style2 {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
background-color: #F9BDF9;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.style8 { color: #B841B7;
font-size: 18px;
}
.Small_font {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);

if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body class="thrColHybHdr" onload="MM_CheckFlashVersion('8,0,0,0','Content on this page requires a newer version of Adobe Flash Player. Do you want to download it now?');">

<div id="container">
<div id="header">
<h1>&nbsp; </h1>
<!-- end #header --></div>
<div id="sidebar1">
<div id="nav">
<ul>
<li><a href="home_page.html" class="style2">Home </a></li>
<li><a href="about_us.html" class="style2">About Us </a></li>
<li><a href="cakes_list.html" class="style2">Cakes </a></li>
<li><a href="Pies_list.html" class="style2">Pies </a> </li>
<li><a href="Biscuits_list.html" class="style2">Biscuits</a></li>
<li><a href="videos.html" class="style2">Videos</a></li>
<li><a href="Contact_Us.html" class="style2">Contact Us</a></li>
</ul>
<br />
<br />
</div>
<div id="Editors_Choice">
<h3 align="center" class="style2">Every month we <br />
choose a great recipe for you to try out.<br />
<br />
Enjoy!<br />
<br />
<a href="javascript:;" onclick="MM_openBrWindow('editors_choice.html','','scrollba rs=yes,width=600,height=600')">Editors Choice </a></h3>
</div>
<p align="center" class="style9 style9 style9">
</div>
<div id="mainContent">
<p><span class="style8">Contact Us</span> </p>
<form action="contact_us.html" method="post" name="form1" class="Small_font" id="form1">
<p class="Small_font">Please fill out this form to get in touch with us by e-mail</p>
<p class="Small_font">Please enter your name:
<input name="textfield" type="text" id="textfield" value="Your name" />
</p>
<p>Please enter your e-mail adress:
<input name="textfield2" type="text" id="textfield2" value="Your e-mail adress" />
</p>
<p>How did you here about us?
<select name="reference " id="reference ">
<option selected="selected">Friends</option>
<option>Google </option>
<option>Yahoo</option>
<option>MSN</option>
<option>Radio</option>
<option>Other </option>
</select>
</p>
<p>&nbsp;</p>
<p class="Small_font">Type your message in the space provided:
<textarea name="message" cols="45" rows="5" id="message"></textarea>
</p>
<p class="Small_font">
<input type="submit" name="button" id="button" value="Submit" />
<input type="reset" name="button2" id="button2" value="Reset" />
</p>
<p class="Small_font">&nbsp;</p>
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<!-- end #mainContent -->
</p>
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p align="center"><span class="Small_font"><a href="home_page.html">Home </a>l <a href="about_us.html">About Us</a> l <a href="cakes_list.html">Cakes</a> l <a href="Biscuits_list.html">Biscuits</a> l <a href="Pies_list.html">Pies</a> l <a href="Biscuits_list.html">Biscuits</a> l <a href="Contact_Us.html">Contact Us</a></span></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

domedia
06-05-2008, 01:04 PM
Do you have this online anywhere?

m1a2x3x7
06-05-2008, 02:00 PM
Set your #mainContainer to float: left. Give your margin-left: 4em, and take out the margin-right.

.thrColHybHdr #mainContent {
border: 2px solid #F9BDF9;
margin-top: 12px;
margin-bottom: 0;
margin-left: 4em;
padding-top: 0;
padding-right: 2em;
padding-bottom: 0;
padding-left: 2em;
top: auto;
width: 500px;
float: left;
}

dovroc
06-05-2008, 02:27 PM
thanks you're a star!!!