Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Float / Margin problem in IE

    Hi there,

    Almost finished my site with a few bumps along the way, and the last bump in the road is that just one of the pages isn't displaying properly in IE (I've checked versions IE7 & 8), whereas the rest do and i'm sure the CSS is the same in all. The difference is that this page is a .php page and the rest .html, but I don't know how that effects it...

    The problem page is www.canaryroofcoatings.co.uk/send_form_email.php - you might have to fill in the form on the contact page www.canaryroofcoatings.co.uk/canarycontact.html

    The nav bar is split into three parts and the right (third) part is dropping down underneath the rest of the nav bar as the left and middle elements seem to be taking up a bit more space.

    So close... yet so far!

    Here's the source code for the page...

    Code:
    <?php
    if(isset($_POST['email'])) {
         
        // EDIT THE 2 LINES BELOW AS REQUIRED
        $email_to = "info@canaryroofcoatings.co.uk";
        $email_subject = "Canary Web Enquiry";
         
         
        function died($error) {
            // your error code can go here
            echo "We are very sorry, but there were error(s) found with the form you submitted. ";
            echo "These errors appear below.<br /><br />";
            echo $error."<br /><br />";
            echo "Please go back and fix these errors.<br /><br />";
            die();
        }
         
        // validation expected data exists
        if(!isset($_POST['first_name']) ||
            !isset($_POST['last_name']) ||
            !isset($_POST['email']) ||
            !isset($_POST['telephone']) ||
            !isset($_POST['comments'])) {
            died('We are sorry, but there appears to be a problem with the form you submitted.');       
        }
         
        $first_name = $_POST['first_name']; // required
        $last_name = $_POST['last_name']; // required
        $email_from = $_POST['email']; // required
        $telephone = $_POST['telephone']; // not required
        $comments = $_POST['comments']; // required
         
        $error_message = "";
        $email_exp = "^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$";
      if(!eregi($email_exp,$email_from)) {
        $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
      }
        $string_exp = "^[a-z .'-]+$";
      if(!eregi($string_exp,$first_name)) {
        $error_message .= 'The First Name you entered does not appear to be valid.<br />';
      }
      if(!eregi($string_exp,$last_name)) {
        $error_message .= 'The Last Name you entered does not appear to be valid.<br />';
      }
      if(strlen($comments) < 2) {
        $error_message .= 'The Comments you entered do not appear to be valid.<br />';
      }
      if(strlen($error_message) > 0) {
        died($error_message);
      }
        $email_message = "Form details below.\n\n";
         
        function clean_string($string) {
          $bad = array("content-type","bcc:","to:","cc:","href");
          return str_replace($bad,"",$string);
        }
         
        $email_message .= "First Name: ".clean_string($first_name)."\n";
        $email_message .= "Last Name: ".clean_string($last_name)."\n";
        $email_message .= "Email: ".clean_string($email_from)."\n";
        $email_message .= "Telephone: ".clean_string($telephone)."\n";
        $email_message .= "Comments: ".clean_string($comments)."\n";
         
         
    // create email headers
    $headers = 'From: '.$email_from."\r\n".
    'Reply-To: '.$email_from."\r\n" .
    'X-Mailer: PHP/' . phpversion();
    @mail($email_to, $email_subject, $email_message, $headers);  
    ?>
     
    <!-- include your own success html here -->
    <style type="text/css">
    <!--
    body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    }
    .twoColFixRtHdr #container { 
    	width: 935px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	background: #6dcff6;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 1px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    } 
    .twoColFixRtHdr #header { 
    	background: #6dcff6; 
    	padding: 0 0 0 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    } 
    .twoColFixRtHdr #header h1 {
    	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    
    }
    
    navholder {
    	background-color: #6dcff6;
    	width: 935px;
    	height: 49px;
    	margin: 0 0 0 0;
    }
    
    .navleft {
    	background-color:6dcff6;
    	float: left;
    	width: 27px;
    	margin: 0 0 0 0;
    }
    
    ul#list-nav {
    float:left;
    background-image:url(navgradient.jpg);
    background-repeat:repeat-x;
    list-style:none;
    width:763px;
    height: 49px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    
    }
    
    ul#list-nav li {
    display:inline;
    margin: 0;
    float:left;
    margin: 0 0 0 0;
    
    
    }
    
    ul#list-nav li a {
    float:left;
    text-decoration:none;
    height:49px;
    color:#ffffff;
    border-right:thin;
    border-right-style:outset;
    margin: 0 0 0 0;
    }
    
    ul#list-nav li a:hover {
    float:left;
    background-image:url(navhover.jpg);
    color:#ffffff;
    margin: 0 0 0 0;
    }
    
    .navright {
    	background-color:6dcff6;
    	float: right;
    	width: 145px;
    	margin: 0 0 0 0;
    	
    }
    
    .twoColFixRtHdr #sidebar1 {
    	float: right; /* since this element is floated, a width must be given */
    	width: 265px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    	background: #6dcff6; /* the background color will be displayed for the length of the content in the column, but no further */
    }
    
    .boxrighttop {
    	float:right;
    	background-color: #6dcff6;
    	width: 265px;
    	
    }
    .boxrightmiddle {
    	float:right;
    	background-image:url(box-side-middle.jpg);
    	background-repeat:repeat-y;
    	width: 265px;
    	text-align:right;
    }
    
    .boxrighttext {
    	float:right;
    	background-color: #FFFFFF;
    	width: 136px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:10px;
    	visibility: visible;
    	z-index: 1;
    	left: 927px;
    	top: 735px;
    	right: 30px;
    	bottom: 0px;
    	overflow: visible;
    	position: absolute;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    }
    
    .boxrightbottom {
    	float:right;
    	background-color: #6dcff6;
    	width: 265px;
    	
    }
    .twoColFixRtHdr #mainContent { 
    	margin: 0 255px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    	padding: 0 0 0 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    } 
    
    .boxlefttop {
    	float:left;
    	background-color: #6dcff6;
    	width: 620px;
    	
    }
    
    .boxmiddle {
    	float: left;
    	background-image:url(box-middle.jpg);
    	background-repeat:repeat-y;
    	width: 620px;
    	padding-top: 0px;
    	padding-left: 40px;
    	padding-right: 10px;
    	padding-bottom: 20px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	color:#000000;
    	
    }	
    .boxleftbottom {
    	float:left;
    	background-color: #6dcff6;
    	width: 620px;
    }
    
    .boxfootertop {
    	float:left;
    	background-color: #6dcff6;
    	width: 620px;
    	
    }
    
    .boxfootermiddle {
    	float: left;
    	background-image:url(box-middle.jpg);
    	background-repeat:repeat-y;
    	width: 620px;
    	padding-top: 0px;
    	padding-left: 40px;
    	padding-right: 10px;
    	padding-bottom: 20px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	color:#000000;
    	
    }
    .boxfooterbottom {
    	float:left;
    	background-color: #6dcff6;
    	width: 620px;
    }
    	
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    .style1 {
    	font-size: 10px;
    	color: #999999;
    }
    .style8 {font-family: Arial, Helvetica, sans-serif}
    .style1 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12pt;
    	color: #000000;
    }
    
    
    
    -->
    </style>
    <!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixRtHdr #sidebar1 { width: 220px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixRtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixRtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]--></head>
    <body class="twoColFixRtHdr">
    
    <div id="container">
      <div id="header"><img src="header.jpg" alt="Canary Roof Coatings | Norwich" width="935" height="142" border="0" usemap="#Email" />
    <map name="Email" id="Email">
      <area shape="rect" coords="559,82,753,126" href="mailto:info@canaryroofcoatings.co.uk" target="_blank" alt="Click to Email" />
    <area shape="rect" coords="522,84,557,122" href="http://twitter.com/canaryroof" target="_blank" alt="Twitter" />
    </map>
      <div id="navholder">
    <div class="navleft"><img src="navleft.jpg"  /></div><ul id="list-nav"><li><a href="index.html" border="0"><img src="navhome.png" alt="Home" border="0"/></a></li>
    <li><a href="canaryabout.html" border="0"><img src="navabout.png" alt="About" border="0"/></a></li>
    <li><a href="canarysurvey.html" border="0"><img src="navsurvey.png" alt="Survey" border="0"/></a></li>
    <li><a href="canaryprocess.html" target="_parent" border="0"><img src="navprocess.png" alt="Process" border="0"/></a></li>
    <li>
      <div align="center"><a href="canarycoatings.html" border="0"><img src="navinsulation.png" alt="Insulation &amp; Coatings" border="0"/></a></div>
    </li>
    <li>
      <div align="center"><a href="canaryguarantees.html" border="0"><img src="navguarantees.png" alt="Guarantees and Insurances" border="0"/></a></div>
    </li>
    <li><a href="canarypromise.html" target="_parent" border="0"><img src="navpromise.png" alt="Our Promise Guarantee &amp; Liabilities" border="0"/></a></li>
    <li><a href="canarygallery.html" target="_parent" border="0"><img src="navgallery.png" alt="Gallery" border="0"/></a></li>
    <li><a href="canaryFAQs.html" border="0"><img src="navFAQ.png" alt="FAQs" border="0"/></a></li>
    <li><a href="canarycontact.html" border="0"><img src="navcontact.png" alt="Contact" border="0"/></a></li>
    </ul></div>
    <div class="navright"><img src="navright.jpg" /></div>
      <div id="sidebar1"><a href="canarygallery.html"><img src="gallerybox.gif" border="0" /></a><br />
      <div class="boxrighttop"><img src="box-side-top.jpg" /></div>
      <div class="boxrightmiddle">
        <p align="left"><img src="mailinglist.jpg" hspace="15" /></p>
        <p align="center"><!-- Start Bravenet.com Service Code -->
    <div align="left">
    <div style="border:1px solid #999999; width:212px; margin-left: 16px; margin-right: 50px; background-color:#d2f6fc;">
    <form action="http://pub21.bravenet.com/elist/add.php" method="post" style="margin:0px;">
      <div style="margin:10px; font: 11px arial; color: #000000; text-align:left;">
      <div style="text-align:left;">
      <p align="right">Name:
        <input type="text" id="elistname" name="ename" size="25" maxlength="60" style="width: 145px">
        <br />
        <br />
        Email:
        <input type="text" name="emailaddress" id="elistaddress49615941056" size="25" maxlength="100" style="width: 145px">
        <span style="white-space:nowrap;">
          <input type="radio" name="action" value="join" checked style="border: 0px;">
          Subscribe</span>
            <span style="white-space:nowrap;">
                <input type="radio" name="action" value="leave" style="border: 0px;">
              Unsubscribe</span>
            <input type="hidden" name="usernum" style="border: 0px solid black; height: 0px; width: 0px;" value="1780379717">
            <input type="hidden" name="cpv"  style="border: 0px solid black; height: 0px; width: 0px;"  value="1">
            <input type="submit" name="submit" value="GO">
      </p>
      </div>
    </div>
    <div style="color: red" id="elist_err49615941056"></div>
    </form>
    </div>
    <blockquote>
      <p align="right" class="style1">© Canary Roof Coatings site design and build by <a href="http://www.emuspace.co.uk" target="_blank">EmuSpace</a></p>
    </blockquote>
    </div>
    <p>
      <!-- End Bravenet.com Service Code --></p>
      </div>
      <div class="boxrightbottom"><img src="box-side-bottom.jpg" /></div>
      <!-- end #sidebar1 --></div>
      <div id="mainContent">
        <div class="boxlefttop"><img src="box-corner-top.jpg" /></div>
        <div class="boxmiddle">
        <p><img src="thankyou.jpg" alt="thankyou" width="370" height="201" />
          <map name="Map" id="Map"><area shape="rect" coords="-26,126,135,278" href="canarypromise.html" target="_parent" alt="Promise" />
    </map>
    <br />
        
        </div>
    <div class="boxleftbottom"><img src="box-corner-bottom.jpg" /></div>
    <div class="boxfootertop"><img src="box-corner-top.jpg" /></div>
    <div class="boxfootermiddle">
      <p><a href="http://www.homeimprovementprotection.com/" target="_blank"><img src="iconhip.jpg" alt="Home Improvement Protection" border="0" /></a><a href="http://www.simplybusiness.co.uk/" target="_blank"><img src="iconsimply.jpg" alt="Simply Business" border="0" /></a><a href="http://www.energycoatings.org.uk" target="_blank"><img src="icontrc.jpg" alt="Thermal Roof Coating" border="0" /> <img src="iconISO.jpg" alt="ISO" width="156" height="73" border="0" /></a></p>
      </div>
    <div class="boxfooterbottom"><img src="box-corner-bottom.jpg" /></div>
        <!-- end #mainContent --></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" />
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>
    <?
    }
    ?>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello emu_robot,
    Your #sidebar1 and #mainContent are already set up as a 2-column layout so there is no real need for floating .boxlefttop, .boxmiddle, .boxleftbottom, etc., since there is nothing beside them in their container.

    You have a width set on those of 620px but when you add padding: 0 10px 20px 40px; to .boxmiddle you make that element 670px wide and it doesn't fit anymore.

    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all could when figuring width/height.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hey Excavator, that's a really good point, but that section of the page isn't where I'm having the troubles.

    Also, when I take away those floats, the boxleft section slips underneath the sidebar. Is that because it's too wide? Also, why's this not happening on the other pages, do you know?

    The section causing the problem is in the navigation bar... here's a screen grab


    Thanks for your speedy response - more help v much appreciated. Em x

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by emu_robot View Post
    Hey Excavator, that's a really good point, but that section of the page isn't where I'm having the troubles.
    In IE, that extra width is causing the float drop. It's breaking the whole 2 column layout, doesn't the screencap you just provided show that?

    Would .navright work better if it was inside #navholder with the rest of your menu bar?
    It's kind of a confusing layout since your #sidebar1 and #mainContent are enclosed in #header.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •