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:
browsershots.png [ 137.5 KiB | Viewed 161 times ]
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%;
}
