Chit-Chat

Problem with divs in IE9

Permalink September 30, 2011 at 12:29 PM

Hello,
anyone out there that can provide any insight on this one would be greatly appreciated!

By no means am I an expert in css so many thanks in advance to anyone that can help. My custom there works perfectly in every browser but IE9 (imagine that!)
The homepage layout is a content wrapper div with 4 nested divs. 1 that spans the entire width of the screen on top and 3 that span the entire width of the site side by side directly below it.
PROBLEM: anytime I use any block other than basic content (ie... problog, simple news...), the block splits itself into what looks like 2 divs and messes up the whole layout. I have each of the divs floated left (except for the right div.. its floated right)

FYI: I am calling a separate stylesheet for IE..
here is a link tot he site.
http://www.reaction-nutrition.com...
If you view the site in Firefox you can see what its supposed to look like. View it IE9 and you'll see how it is splitting the div.

<body>
<div id="header"></div>
<!--BEGIN 1000px Container div-->    
<div id="container">
     <div id="spacer1"></div>
     <div id="nav">
   <?php 
   $a = new Area('Header Nav');
   $a->display($c);
   ?>
     </div>
    <div id="logo">
        <div id="spacer_inlogo"></div>
            <div id="tab">
               <?php

Viewing 15 lines of 48 lines. View entire code block.

 
<body>
<div id="header"></div>
<!--BEGIN 1000px Container div-->    
<div id="container">
 
     <div id="spacer1"></div>
     <div id="nav">
   <?php 
   $a = new Area('Header Nav');
   $a->display($c);
   ?>
     </div>
 
    <div id="logo">
        <div id="spacer_inlogo"></div>
 
            <div id="tab">
               <?php 
      $a = new Area('tab');
      $a->display($c);
      ?>
            </div>
 
    </div>
 
<!--BEGIN content here-->    
     <div id="content_holder">
 
        <div id="content_top">   
   <?php 
   $a = new Area('content_top');
   $a->display($c);
   ?>
        </div>
 
        <div id="content_bottom">
 
           <div id="content_left">   
      <?php 
      $a = new Area('content_left');
      $a->display($c);
      ?>
                </div>
 
              <div id="content_middle">   
      <?php 
      $a = new Area('content_middle');
      $a->display($c);
      ?>
           </div>
 
           <div id="content_right">   
      <?php 
      $a = new Area('content_right');
      $a->display($c);
      ?>
           </div>
 
         </div>

Here is the css:

#container {
   height: auto;
   width: 1000px;
   margin-top: -80px;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: auto;
}
#content_holder {
   height: auto;
   width: 1000px;
   background-color: #000;
   margin-top: auto;
   margin-right: auto;
   margin-bottom: auto;

Viewing 15 lines of 134 lines. View entire code block.

 
#container {
 
   height: auto;
 
   width: 1000px;
 
   margin-top: -80px;
 
   margin-right: auto;
 
   margin-bottom: auto;
 
   margin-left: auto;
 
}
 
 
 
#content_holder {
   height: auto;
   width: 1000px;
   background-color: #000;
   margin-top: auto;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: auto;
   float: left;
}
 
 
 
#header {
 
   height: 80px;
   width: 1900px;
   background-image: url(/images/header.jpg);
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: auto;
}
 
#nav {
   height: 32px;
   width: 800px;
   text-align: center;
   font-family: Tahoma, Geneva, sans-serif;
   font-size: 10px;
   font-weight: bold;
   color: #000;
   margin: auto;
}
 
#logo {
   width: 1000px;
   height: 145px;
   background-image: url(/images/reaction-LOGOheader.png);
   background-repeat: no-repeat;
   margin-top: auto;
   margin-right: auto;
   margin-bottom: -20px;
   margin-left: auto;
}
#spacer_inlogo {
   height: 55px;
   width: 1000px;
   margin: auto;
}
 
#tab {
   height: 40px;
   width: 485px;
   font-family: "Courier New", Courier, monospace;
   font-size: 9px;
   color: #ef4536;
   float: right;
   margin-top: 5px;
   margin-right: 15px;
   margin-bottom: auto;
   margin-left: auto;
   text-align: right;
   display: inline;
   letter-spacing: 2px;
}
 
#content_top {
   font-family: Arial, Helvetica, sans-serif;
   color: #CCC;
   height: auto;
   width: 970px;
   font-size: 12px;
   font-weight: normal;
   padding-top: 15px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
   float: left;
   margin-top: auto;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: 15px;
}
 
#content_bottom {
   background-image: url(/images/content_bottom-back.jpg);
   background-repeat: no-repeat;
   margin: auto;
   padding: 15px;
   height: auto;
   width: 970px;
   float: left;
   background-color: #000;
}
 
#content_left {
   font-family: Tahoma, Geneva, sans-serif;
   font-size: 12px;
   font-weight: normal;
   color: #7C7C7C;
   width: 300px;
   height: auto;
   float: left;
   margin-top: 15px;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: auto;
   text-align: left;
}
 
#content_middle {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: normal;
   color: #7C7C7C;
   float: left;
   width: 290px;
   height: auto;
   margin-top: 15px;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: 28px;
}
 
#content_right {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: normal;
   color: #7C7C7C;
   float: left;
   height: auto;
   width: 290px;
   margin-top: 15px;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: 30px;
}

This is a bit messy as I'm not done with it yet... But I truly appreciate any guidance
Thanks

Steevb replied on Sep 30, 2011 at 1:03 pm Permalink Reply

Hi,
There are few errors with your CSS even with Firefox, Chrome and Safari.

Top image does centralise and Flash sits down from where it should.

You could try floating all divs to the left.

Forums

Chit-Chat

Problem with divs in IE9

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?