No replies
yobokkie
Offline
newbie
Somewhere over the rainbow
Last seen: 3 years 3 weeks ago
Somewhere over the rainbow
Timezone: GMT+2
Joined: 2011-09-05
Posts: 1
Points: 2

Greetings all,
I'm trying to create my first joomla template and I'm having an issue with some of the styling in IE8, it looks perfect in Chrome and firefox but in IE it's messed up...

See here

You can see the source code or use chrome to see how the divs and css are coded but here is the main css I'm using:

/*Overall page */
.sheet {
width: 1000px;
margin: auto;
margin-top: 39px;}
 
/* Left floating module position and styling*/
.left {float: left;
position: fixed;
height:310px;
width: 230px;
background: url("../images/float.png") no-repeat;
}
 
.left a, .left a:link, .left a:visited, .left a.visited, .left a:hover, .left a.hover {
font-weight:bold;
font-size:14px;
color:white;}
 
.left ul {
list-style-type: none;
padding: 14px 0 0 26px;
margin: 0;
}
 
/*content sheet and border */
.content{  
position: relative;  
margin: 0 auto;  
min-width: 100px;  
min-height: 275px;
}
 
.rbody{  
position: relative;
padding: 45px 77px 89px 74px;
z-index:1;}
 
.tr, .tl, .br, .bl, .tc, .bc, .cr, .cl{  
position: absolute;
z-index:-1;}
 
.tr, .tl, .br, .bl{  
width: 200px;  
height: 202px;  
background-image: url('../images/corn.png');}
 
.tl{  
top: 0;  
left: 0;  
clip: rect(auto, 100px, 106px, auto);}
 
.tr{  
top: 0;
right: 0;  
clip: rect(auto, auto, 106px, 100px);}
 
.bl{  
bottom: 0;
 left: 0;  
 clip: rect(96px, 100px, auto, auto);}
 
.br{  
bottom: 0;
right: 0;  
clip: rect(96px, auto, auto, 100px);}
 
.tc, .bc{  
left: 100px;
right: 100px;
height: 197px;
background-image: url('../images/tb.png');
background-repeat:repeat-x;}
 
.tc{  
top: 0;
clip: rect(auto, auto, 101px, auto);}
 
.bc{  
bottom: 0;
clip: rect(101px, auto, auto, auto);}
 
.cr, .cl{
top: 106px;  
bottom: 106px;  
width: 200px;  
background-image: url('../images/lr.png');
background-repeat:repeat-y;}
 
.cr{  
right: 0;
clip: rect(auto, auto, auto, 100px);}
 
.cl{  
left: 0;
clip: rect(auto, 100px, auto, auto);}
 
.cc{  
position: absolute; 
top: 100px;
left: 100px;
right: 100px;
bottom: 95px;  
background-color: #fff;
z-index:-1;}
 
.content{  
top: -2px !important;  
margin-bottom: -3px !important;  
cursor:auto;  
width: 820px;
margin-right: 0px;}
 
/* Positions within the content */
 
.topmenu {
background: #1F1A17;
margin: 0 -43px 0 -34px;
height: 20px;
vertical-align: middle;
padding: 6px;}
 
.breadcrumb, .breadcrumb a, .breadcrumb a:link {
font-size:10px;}
 
.breadcrumb img {
margin: 0;}
 
.topmenu a, .topmenu a:link {
color:white;
padding:10px;
}
 
.toppics{
min-height:30px;}
/*footer */
.footer p {
font-size:12px;
text-align:center;}

Any help from the clever people on this forum would be much appreciated, I really can't see what I'm doing wrong.