Browser compatability help
I wondered if anyone could help me fix this website http://www.catalansuk.com/ as logo has padding or borders between it in IE 6 and below see here http://ipinfo.info/netrenderer/index.php. Also the right section goes to the bottom under left section in some browsers (see attached screenshot). I read some useful stuff here http://snook.ca/archives/html_and_css/top_css_tips/ but don't understand everything. It said I should use overflow: hidden but this has not solved the issue. I am sure there are loads of experts out there that could spot the problem in a flash so some help would be much,[attachment=0:3lv6grtl]browsershots.png[/attachment:3lv6grtl] much appreciated. This is my CSS (I know it is quite messy): .contentpane-news{ margin-left: 15px; line-height: 12px; margin-right:0px; width: 600px; border: 1px solid #cccccc; padding: 15px; } .sectiontableheader-news { padding-top: 10px; } .moduletable-newsletter { margin-left: 20px; line-height: 35px } #a1 { margin-bottom:10px; }#a2 { margin-bottom:10px; }#a3 { margin-bottom:10px; }#a4 { margin-bottom:10px; }#a5 { margin-bottom:10px; }#a6 { margin-bottom:10px; }#a7 { margin-bottom:10px; }#a8 { margin-bottom:10px; }#a9 { margin-bottom:10px; }#a10 { margin-bottom:10px; }#a11 { margin-bottom:10px; }#a12 { margin-bottom:10px; }#a13 { margin-bottom:10px; }#a14 { margin-bottom:10px; }#a15 { margin-bottom:10px; } #contact_text { height: 100px; } .contentpane-contact{ margin-left: 20px; padding-right:25px; margin-right:15px; background: #ffffff; } .contentheading-contact { float: left; font-family:verdana, Verdana, Arial; color: #323232; text-align: left; padding-top: 4px; padding-left: 39px; height: 14px; font-weight: bold; font-size: 12px; letter-spacing:1px; background: #ffffff; } .componentheading-contact { margin-bottom:15px; font-family:verdana, Verdana, Arial; color: #323232; text-align: center; padding-top: 10px; padding-left: 22px; height: 14px; font-weight: bold; font-size: 12px; letter-spacing:1px; background: #ffffff; } .contentpaneopen-news{ margin-left: 15px; line-height: 12px; margin-right:5px; padding:2px; background: #ffffff; } .componentheading-news { padding-top: 4px; padding-left: 0px; height: 14px; font-weight: bold; font-size: 12px; margin-bottom:5px; font-family:verdana, Verdana, Arial; color: #323232; text-align: center; letter-spacing:1px; background: #ffffff; } .contentheading-news { font-family:verdana, Verdana, Arial; color: #323232; float: left; padding-top: 2px; padding-left: 0px; padding-bottom: 4px; font-weight: bold; font-size: 12px; height: 14px; border-bottom:1px solid #ccc; letter-spacing:1px; background: #ffffff; text-align: left; } .contentpaneopen-home { margin: 3px; background: #ffffff; margin-right:2px; margin-left: 5px; } .contentheading-home { font-family:verdana, Verdana, Arial; color: #3c3b3b; text-align: left; padding-top: 4px; padding-left: 2px; height: 14px; font-weight: bold; font-size: 12px; align: left; letter-spacing:1px; background: #ffffff; float: left; } .blog-home { border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; margin-bottom: 5px; background: #ffffff; } .contentpaneopen-sponsors { line-height: 12px; margin-left: 0px; margin-right: 5px; margin-top: 25px; text-align: center; background: #ffffff; width:350px; } .contentheading-sponsors { background: #ffffff; font-family:verdana, Verdana, Arial; color: #666666; float: left; padding-top: 10px; padding-left: 0px; font-weight: bold; font-size: 10px; text-transform: uppercase; letter-spacing:4px; } .componentheading-sponsors { padding-top: 10px; padding-left: 0px; font-weight: bold; font-size: 12px; font-family:verdana, Verdana, Arial; color: #323232; float: center; height: 14px; letter-spacing:1px; background: #ffffff; text-align: center; } .readon-sponsors { padding-left:140px; } .contentpaneopen-content { line-height: 15px; margin-left: 15px; margin-right: 15px; padding-top: 10px; } .contentheading-content { font-family:verdana, Verdana, Arial; color: #323232; float: left; padding-top: 10px; padding-left: 0px; font-weight: bold; font-size: 12px; align: left; letter-spacing:1px; background: #ffffff; } .componentheading-ukinfo { background: #ffffff; font-family:verdana, Verdana, Arial; color: #323232; align:left; padding-top: 10px; padding-left: 20px; float: left; font-weight: bold; font-size: 12px; letter-spacing:1px; } .contentheading-ukinfo { font-family:verdana, Verdana, Arial; color: #323232; float: left; padding-top: 10px; padding-left: 5px; height: 12px; font-weight: bold; font-size: 12px; background: #ffffff; letter-spacing:1px; text-align: left; } .contentpaneopen-ukinfo { background: #ffffff; margin-left: 12px; line-height: 20px; } body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#333333; margin:0 0 20px 0; padding:0; background: #ffffff; } .blog { background: #ffffff; text-align: justify; padding-left:10px; padding-right:10px; margin-bottom:3px; } #mod_search_searchword { margin-top: 15px; margin-bottom: 15px; width: 140px; } .contentpaneopen { margin-left: 15px; margin-right:15px; } a:link, a:visited { color:#1652bf; text-decoration:none; font-weight:bold; font-size:10px; } a:hover, a:visited:hover { color:#cccccc; text-decoration:none; } a img { border:none; } td, p { text-align:left; vertical-align:top; font-size:11px; } h1 { } h2 { } h3 { } form { /* removes space below form elements */ margin: 0; padding: 0; } .clr { clear:both; font-size:0px; } .clear { clear:both; font-size:0px; height:1px; } .spacer { clear:both; background-color:#FFFFFF; font-size:2px; } #outer { width:900px; margin:auto; /*background-color:#e4e4e4;*/ } #left_outer { width:183px; float:left; background-color:#1c1880; height: 600px; overflow:hidden; /*background-image:url(http://www.catalansuk.com/images/stories/web/left.jpg);*/ background-position:bottom; background-repeat: no-repeat; } #body_outer { float:left; background: #ffffff; width:717px; /*background-color:#e4e4e4;*/ } #header { height:71px; padding:0px; background: #1c1880; border-bottom:5px solid #ffffff; background-image:url(../images/headernew.jpg); background-position:right; background-repeat:no-repeat; } #headerimage { height:19px; padding:0px; background: #ffffff; border-left:5px solid #ffffff; padding-bottom:6px; } #logo { height:71px; border-bottom:5px solid #ffffff; padding-top:0px; text-align:left; background-color:#d7040e; } #search_outer { text-align:right; } #topmenu { padding:0; margin:0px 0 0 0; } #content { /*background-color:#e4e4e4;*/ margin: 0 0 0 2px; } #content_outer { width:540px !important; width:549px; float:left; /*background-color:#D9D9D9;*/ padding: 0 5px 0 5px; margin: 0 2px 0 0px !important; margin: 0 2px 0 0px; } #content_outer_noright { width:712px !important; width:712px; float:left; padding-left: 2px; /*ackground-color:#D9D9D9;*/ } #right_outer { width:163px; float:right; } div#footer { clear:both; background-color:#d7040e; color:#ffffff; text-align:center; height:20px; padding-top: 5px; font-size: 10px; align: center; margin-top: 0px; } #footer_text { background-color:#FFFFFF; } #footer a:link, #footer a:visited { color:#000000; text-decoration:none; font-size: 9px; text-align:right; } #footer a:hover, #footer a:visited:hover { color:#CCCCCC; text-decoration:none; } ul#mainlevel-nav { list-style: none; padding: 0; margin: 0; } ul#mainlevel-nav li { float:left; background-image:url(../images/header_liner.jpg); background-position:right; background-repeat:no-repeat; height:18px !important; height:68px; padding: 50px 0 0 0; } ul#mainlevel-nav li a { padding-left: 15px; padding-right: 15px; text-decoration: none; background: transparent; color: #e4e4e4; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; } #buttons>ul#mainlevel-nav li a { width: auto; } ul#mainlevel-nav li a:hover { color: #cccccc; } /* Extended menu */ .moduletable_extmenu { background:none; } ul#mainlevel_extmenu { list-style: none; padding: 0; margin: 0; } a.mainlevel_extmenu { padding-left: 15px; padding-right: 15px; display:block; float:left; background-image:url(../images/header_liner.jpg); background-position:right; background-repeat:no-repeat; height:18px !important; height:68px; padding: 50px 0 0 0; } ul#mainlevel_extmenu li a { padding-left: 15px; padding-right: 15px; text-decoration: none; background: transparent; color: #e4e4e4; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; } #buttons>ul#mainlevel_extmenu li a { width: auto; } ul#mainlevel_extmenu li a:hover { color: #cccccc; } /* end Extended menu */ a.mainlevel:link, a.mainlevel:visited { background:url(http://www.catalansuk.com/images/storie ... e/join.jpg); font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #e6e6e6; display: block; vertical-align: middle; text-align: center; text-transform: uppercase; height: 36px; text-decoration: none; letter-spacing: 2pt; padding-top: 4px; margin-top: 10px; margin-right: 12px; margin-left: 7px; } a.mainlevel:hover { text-decoration: none; color: #cccccc; } a.mainlevel#active_menu { color:#cccccc; font-weight: bold; } a.mainlevel#active_menu:hover { color: #CCCCCC; } a.sublevel:link, a.sublevel:visited { padding-left: 1px; vertical-align: middle; font-size: 11px; font-weight: bold; color: #c64934; text-align: left; } a.sublevel:hover { color: #900; text-decoration: none; } a.sublevel#active_menu { color: #333; } .highlight { background-color: Yellow; color: Blue; padding: 0; } .code { background-color: #ddd; border: 1px solid #bbb; } .componentheading { font-family:verdana, Verdana, Arial; color: #323232; text-align: left; padding-left: 4px; padding-top: 6px; padding-bottom: 4px; height: 21px; font-weight: bold; font-size: 12px; letter-spacing:1px; display: block; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-top: 3px; margin-left: 3px; } .contentheading { font-family:verdana, Verdana, Arial; color: #323232; text-align: left; padding-top: 4px; padding-left: 0px; height: 14px; font-weight: bold; font-size: 12px; letter-spacing:1px; } .moduletable { background-color:#1c1880; padding-top:0px; overflow:hidden; } .moduletable td{ color:#ffffff; } #search_outer .moduletable { background:none; } div.moduletable table { margin:12px; width:90% !important; width:90%; } table.moduletable th { background-color: #368FE3; color: #CCCCCC; text-align: center; padding-left: 4px; height: 29px; line-height: 21px; font-weight: bold; font-size: 10px; text-transform: uppercase; margin: 1px 0 2px 0; vertical-align:middle; } div.moduletable h3 { background-color: #d7040e; color: #ffffff; text-align: center; padding-top: 3px; height: 20px; text-transform: uppercase; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; letter-spacing:2px; } div.mosimage { border: 1px solid #ccc; } .mosimage { border: 1px solid #cccccc; margin: 0px } .mosimage_caption { margin-top: 2px; background: #efefef; padding: 1px 2px; color: #666; font-size: 10px; border-top: 1px solid #cccccc; } span.article_seperator { display: block; height: 1em; } .back_button { float: left; font-family: Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; width: auto; border:1px solid #1652bf; background: #ffffff;; padding: 0 5px 0 5px; height: 15px ; margin-left: 20px; margin-top: 10px; margin-bottom: 10px; cursor:pointer; color: #1652bf; } .back_button a:link, .back_button a:visited, .back_button a:hover, .back_button a:visited:hover { color:#333333; } .pagenav { color: #333333; font-family: Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; width: auto; border:1px solid #1c1880; background: url(../images/button_bg.jpg) repeat-x; padding: 0 5px 0 5px; height: 15px ; margin: 1px; cursor:pointer; } .pagenavbar { margin-right: 10px; float: right; } .button { color: #ffffff; font-family: Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; width: auto; border:1px solid #000000; background: #1652bf; height: 22px ; margin: 1px; cursor:pointer; } select.button { background:none; background-color:#FFFFFF; border:none; padding:0; margin:0; font-weight:normal; } .inputbox { padding: 2px; border:solid 1px #cccccc; background-color: #ffffff; } table.moduletable td { font-size: 11px; padding: 0px; margin: 0px; font-weight: normal; } .createdate { height: 12px; padding-bottom: 5px; color: #333333; font-size: 11px; } .modifydate { height: 15px; padding-top: 10px; color: #333333; font-size: 11px; } table.moduletable { width: 100%; margin-bottom: 15px; padding: 0px; border-spacing: 0px; border-collapse: collapse; } div.moduletable { padding: 0; margin-bottom: 0px; } table.contentpaneopen { width:100%; }
