Log in

View Full Version : CSS div containers not working in ie6 & ie7 -



mannkumar
02-19-2010, 11:58 AM
dear all,

as newbie to css, i created a css web-site (from css snippets picked up from the web)
based on ie8 and FF, which works fine on most browsers but fails miserably on ie6 and ie7.

i have tried to remedy it (initially by using conditional comments to omit the hover span classes, the result in as this link;

http://www.lotus-architects.com/2nd-test/

however, none of my original div containers appear in ie6 or ie7 (temporarily coloured with borders), the CSS for the divs is as below (the full css can be downloaded from link)


.container-main {
width: 805px;
height: 480px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
border: 1px solid #C0C0C0;
padding-top: 30px;
padding-left: 30px;
padding-right: 10px;
}
.cell-main {
height: 160px;
width: 160px;
float: right;
font-family: Verdana;
font-size: 11px;
color: black;
z-index: -1;
ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter: alpha(opacity=80);
text-wrap: none;
}
.cell-main2 {
height: 160px;
width: 320px;
float: right;
font-family: Verdana;
font-size: 11px;
color: black;
z-index: -1;
text-wrap: none;
}
.cell-text {
display: block;
height: 160px;
width: 320px;
float: left;
text-align: left;
}
.cell-logo {
display: block;
height: 160px;
width: 320px;
float: left;
text-align: left;
}
.index-text {
display: block;
height: 320px;
width: 320px;
float: left;
text-align: left;
border: 1px solid yellow;
}
.column {
display: block;
height: 480px;
width: 320px;
float: left;
text-align: left;
border: 1px solid green;
}
.img-cont {
float: right;
height: 480x;
width: 480px;
border: 1px solid red;
}
.row-main {
display: block;
float: right;
height: 160px;
width: 480px;
clear: right;
border: 1px solid orange;
}
.row-text {
display: block;
float: right;
height: 160px;
width: 320px;
clear: right;
border: 1px solid purple;
}
.container-main,
.cell-main {
display: block;
font-family: Verdana;
list-style-type: none;
text-decoration: none;
}


The divs for the navbar which i also lifted from the web do seem to work fine in ie6 and ie7 and contain some ie fixes, but unfortunately i don't know how (or even if) they are to be applied to the other div containers, but they read as ;



#pageBody {
margin: 10px 0 0 20px;
}
#contentContainer {
width: 800px;
}
#navbar {
font-weight: normal;
height: 20px;
padding: 0px;
margin: 0px;
}
#navbar a {
text-decoration: none;
color: #666666;
}
#navbar a:hover {
color: #990000;
}
#navbarContainer {
height: 20px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.navbarItem {
margin: 0px;
height: 20px;
width: 160px;
display: inline block;
float: left;
margin: 0;
padding: 0;
font-family: Verdana,Arial,Sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
/* stupid IE was wrapping **** */
white-space: nowrap;
}
.navbarItem a {
display: block;
height: 17px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
}
.navbarItem a:hover {
display: block;
#990000
}

/*-- BEGIN: IE bug fixes --*/
* html .ieVariableWidthFix { width: 160px; }
* html .ieVariableHeightFix { height: 1%; }
* html .ieNavbarHeightFix a { height: 20px; }

/*-- END: IE bug fixes --*/

I'd be extremely grateful if anyone can help point me in the right direction to correct the div containers of the main page to make them work (appear) in ie6 & 7, because at the moment all the content in ie6 & ie7 just floats about (div less). many thanks.

stringcugu
02-20-2010, 04:07 AM
.container-main
{width: 815px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
//border: 1px solid #C0C0C0;
border: 1px solid #Ccffcc;
padding-top: 30px;
padding-left: 30px;
padding-right: 10px;
}

mannkumar
02-20-2010, 10:48 AM
dear stringcugu, many thanks for you reply but i think i may not have explained my problem properly.

None of the div containers work or appear in ie6 or ie7 (only the nav bar containers seem to appear). Its not just a problem of the border colours (i just used coloured borders to see where they appear on screen). All of the div containers just don't appear in ie6 or ie7?

mannkumar
02-26-2010, 12:11 PM
Problem solved - many thanks Bruno Fassino for your help.