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)
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 ;Code:.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; }
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.Code:#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 --*/



Reply With Quote
Bookmarks