Hi I am designing a templates for a developer and for some reason or another my left and right borders are not adjusting right to the height of the div container. you can take a peek at it to see my lovely css mistakes here. Could you assit me with correcting this issue as well as make it cross platform? ;) as of now i am using firefox to view the page.
The source of the css is:
body {
font-family:sans-serif;
margin:0;
}
#head {
height:100px;
}
#head .title {
color: #5BCA5B;
font-weight:bold;
font-size:24pt;
}
#head .login {
font-weight:bold;
position:absolute;
right:1em;
top:1em;
}
#tabs {
display:block;
margin:0;
padding:0;
}
#tabs ul {
list-style-type: none;
margin:0;
margin-left:1em;
padding:0;
}
#tabs ul li {
z-index:-1;
padding:0;
display:inline;
}
#tabs ul li a {
text-decoration:none;
font-weight:bold;
color:#000000;
z-index:-1;
border:10px double brown;
-moz-border-image:url("imgs/inactive.png") 10 stretch;
-webkit-border-image:url("imgs/inactive.png") 10 stretch;
border-image:url("imgs/inactive.png") 10 stretch;
border-outset:1;
margin:0;
padding:0;
}
#tabs ul li a span {
margin:0;
padding:0;
}
#panel-border {
margin:0;
padding:0;
}
#panel-border .tborder {
width:100%;
}
#panel-border .bborder {
width:100%;
background-image:url('imgs/bborder.png');
}
#panel-border .rborder {
width:17;
position:relative;
float:right;
height:100%;
right:0;
top:0;
bottom:0;
clear:right;
background-image:url('imgs/rborder.png');
}
#panel-border .lborder {
width:16;
position:relative;
float:left;
height:100%;
left:0;
clear:left;
background-image:url('imgs/lborder.png');
}
#panel {
}Thanks!