• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 567
  • Last Modified:

CSS error - boxes not aligning when viewed in IE6

Hi experts,

I'm having a mare with trying to get a box to align using CSS on the following page:

http://www.capitacommunications.co.uk/capita-fs/

The contact centre & warehousing boxes are not aligned on the homepage in IE6 - but are fine in IE7 and Firefox.

The CSS is here: http://www.capitacommunications.co.uk/capita-fs/css/main.css

and the relevant bits of CSS are pasted in below.

Many thanks for any assistance!
gjirvine3000
============================
/* 2_2 HOMEPAGE HORIZONTAL DIVISION CONTAINING SERVICE PANELS */
                           
#homepagehoriz2_2 {
          float: left;
               margin-top:15px;
            margin-left:0px;
              margin-right:0px;
          width:780px;
          background:#ffffff;
          border: 0px;
          }

/* 2_2 HOME LEFT-HAND CONTENT */

#homeleft2_2 {
          width:365px;
          float: left;
            background: #EDEEF0;
              margin-left: 15px;
          border-right:1px solid #b2b3b5;
              border-bottom:1px solid #b2b3b5;
              border-left:1px solid #b2b3b5;
              height: 132px;
          }  
             
#hometitleleft2_2 {
          width:365px;
              height:20px;
          float: left;
          background:#95a92a;
          border-right:1px solid #b2b3b5;
              border-bottom:0px solid #b2b3b5;
              padding-top:6px;
              text-indent:8px;
              margin-bottom: 5px;
          }  
             
#homecontentleft2_2 {
          width:348px;
              height:130px;
          float: left;
          padding-left:5px;
          }  
             
/* 2_2 HOME RIGHT CONTENT */

#homeright2_2 {
          width:365px;
              float: right;
            background: #EDEEF0;
              border-bottom:1px solid #b2b3b5;
              margin-right:15px;
              border-left:1px solid #b2b3b5;
              border-right:1px solid #b2b3b5;
              height: 132px;
              }
             
#hometitleright2_2 {
          width:365px;
              height:20px;
          float: right;
          background:#04476f;
              border-bottom:0px solid #008566;
              padding-top:6px;
              text-indent:8px;
              margin-bottom: 5px;
          }
             
#homecontentright2_2 {
          width:348px;
              height:130px;
          float: right;
          padding-right:5px;
          }
             
                             /* MORE BUTTON WITHIN HOME CONTENT CONTAINER */
             
#more {
              border:0px solid #c7c2ba;
              float: right;
              padding-right:0px;
              text-align:right;
              color:#ffffff;
            width:110px;
              margin-top: 0px;
          }
             
#more a:hover {
              border:0px solid #c7c2ba;
              padding-right:0px;
              background: #a1c6cf;
              text-align:right;
              color:#ffffff;
              margin-top: 0px;
          }

0
gjirvine3000
Asked:
gjirvine3000
  • 2
1 Solution
 
TNameCommented:
Hi, it looks like the IE6 double margin bug:
   http://www.positioniseverything.net/explorer/doubled-margin.html

Just add  display:inline;  for all 4 boxes, e.g.

#homeleft2_1 {
          width:365px;
          float: left;
            background: #EDEEF0;
              margin-left: 15px;
          border-right:1px solid #b2b3b5;
              border-bottom:1px solid #b2b3b5;
              border-left:1px solid #b2b3b5;
              height: 132px;
display:inline;
          }  

#homeright2_1 {
          width:365px;
              float: right;
            background: #EDEEF0;
              border-bottom:1px solid #b2b3b5;
              margin-right:15px;
              border-left:1px solid #b2b3b5;
              border-right:1px solid #b2b3b5;
              height: 132px;
display:inline;
              }


Same for the other two.
0
 
gjirvine3000Author Commented:
Hiya

Thanks a lot for the reply... unfortunately the change has had no effect and the boxes still aren't aligning along the bottom. Would you have any other ideas!?

Thanks
0
 
TNameCommented:
If you want the 4 boxes to be equally high, delete the height attribute

        height:130px;

for these 4 divs:

#homecontentleft2_1,
#homecontentright2_1,
#homecontentleft2_2,
and
#homecontentright2_2


But does the fact that in IE6 there is no space in the middle between the boxes not bother you? I find it much more annoying than the slighly unequal heights - and I see you haven't fixed the distance between the boxes, as suggested in my first post. It does work, I have tested it.

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now