asked on

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;
}

TName

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.

gjirvine3000

ASKER

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

ASKER CERTIFIED SOLUTION

TName

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial