Hey guys, still having loads of trouble with this website, it looks fine in Firefox, and in IE8, but any previous version of IE looks terrible.
The site can be viewed here http://www.catalystpics.co.uk/dev/index.html
As you can see the site is still only in development stages, but this is a major issue i need to sort,
Hope someone can help !
Thanks in advance
Wastedguitarist
my css code is as follows
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: Tahoma, Arial;
text-align: justify;
color: #5C5C5C;
border:0px;
}
h1, h2, h3 {
margin: 0;
font-weight: normal;
color: #FFFFFF;
}
h1 {
letter-spacing: -1px;
font-size: 32px;
}
h2 {
font-size: 23px;
}
p, ul, ol {
margin: 0 0 2em 0;
text-align: justify;
line-height: normal;
}
a {
color: #1B75A9;
}
a:hover, a:active {
text-decoration: none;
color: #1B75A9;
}
a:visited {
color: #1B75A9;
}
img {
border: none;
}
img.left {
float: left;
margin-right: 15px;
}
img.right {
float: right;
margin-left: 15px;
}
/* Header */
#header {
width: 1200px;
margin: 0 auto;
height: 60px;
}
/* Menu */
#menu {
float: left;
background: url(images/menu.gif) repeat-y top center;
width:1200px;
height:95px;
margin:0 auto;
}
#menu ul {
font-weight:bold;
font-size:16px;
text-decoration:none;
margin: 0;
padding: 23px 0 0 20px;
list-style: none;
line-height: normal;
text-align:center;
}
#menu li {
text-align: center;
display:inline;
}
#menu a {
font-weight:bold;
font-size:16px;
text-decoration:none;
color:#ffffff;
background-color:#000000;
padding:0px 30px 2px 30px;
}
#menu a:hover {
background-color:#FAE707;
font-weight:bold;
font-size:16px;
text-decoration:none;
color:#000000;
}
#menu .current_page_item a {
background-color:#FAE707;
color: #000000;
}
/* Page */
#page {
width: 1200px;
background-image:url(Images/body.JPG);
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
/* Content */
#contenttop {
position:relative;
font-family: Tahoma, Arial;
margin-left:180px;
margin-right:180px;
margin-top:10px;
float: left;
width: 840px;
height: 100px;
left: 00px;
top: 00px;
}
#contentmiddle {
position:relative;
font-family: Tahoma, Arial;
margin-left:180px;
margin-right:180px;
margin-top:15px;
float: left;
width: 840px;
height: 450px;
left: 0px;
top: 000px;
}
#contentmiddlework {
position:relative;
font-family: Tahoma, Arial;
margin-left:113px;
margin-right:113px;
float: left;
width: 963px;
height: 495px;
left: 0px;
top: 000px;
background-color: #FFFFFF;
}
#contentleft {
position:relative;
font-family: Tahoma, Arial;
margin-left:180px;
margin-top:15px;
float: left;
width: 540px;
height: 550px;
left: 0px;
top: 30px;
}
#contentright {
position:relative;
font-family: Tahoma, Arial;
margin-right:180px;
margin-top:15px;
float: left;
width: 300px;
height: 550px;
left: 0px;
top: 30px;
}
#contentbottom{
position:relative;
font-family: Tahoma, Arial;
margin-left:180px;
margin-right:180px;
margin-top:15px;
float: left;
width: 840px;
height: 350px;
left: 0px;
top: 40px;
}
#contentbottomwork {
position:relative;
font-family: Tahoma, Arial;
margin-left:113px;
margin-right:113px;
margin-top:0px;
float: left;
width: 963px;
height: 350px;
left: 0px;
top: 10px;
background-color: #FFFFFF;
}
/* Footer */
#footer {
position:relative;
background: url(images/footer.jpg) repeat-y top center;
width:1200px;
height:138px;
margin:0 auto;
top:-25px;
}
#footermenu {
width:840px;
height:138px;
margin-left:180px;
margin-right:180px;
}