Hi,
I’ve been trying to modify a Blogger template in CSS. I know the basics of the code,but could not make one from scratch,so i ended up modifying an existing theme.
I’ve been having problems with the layout in IE,the upper menu doesn’t show right,it sits either behind the main body or it creates a huge gap between the header,logo and the main body.Also,the header image isn’t transparent in some versions of IE.
If someone knows something about this kind of errors in CSS(when elements either overlap or aren’t positioned right for IE,creating a huge gap) help me out.
This is the address of the page: http://freshgeneration.blogspot.com/ .
I would really appreciate some help :D. Thanks
PS:This is the code that i think is giving me the trouble(When i modify it to show right in IE,it doesn’t show right in Firefox or Opera):
#navbar, #navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
.navigation{
text-align:center;
padding:15px 0px;
}
.navigation a{
background:#EEE;
padding: 3px 7px;
line-height:10px;
text-align:center;
border:1px solid #FFF;
color:#333333!important;
}
.hilipage{
background:#CCCCCC!important;
}
.navigation a:hover{
border:1px solid #CCC;
}
.topnavi{
width:500px;
height:30px;
float:left;
margin:0px;
padding-top:100px;
overflow:visible;
position: relative;
}
.topnavi ul{
list-style:none;
margin-top:98px;
margin-right:75px;
float:left;
}
.topnavi li{
float:left;
padding-left:5px;
width:80px;
height:30px;
}
.topnavi a{
width:80px;
height:22px;
overflow:visible;
text-align:center;
display:block;
padding-top:8px;
outline:none;
font-size:10px;
text-transform:uppercase;
color:#FFF;
background:url(http://img179.imageshack.us/img179/3...rrrrronom8.png) no-repeat 0 0;
}
.topnavi a:hover{
color:#FFF;
background:url(http://img179.imageshack.us/img179/3...rrrrronom8.png) no-repeat 0 100%;
text-decoration:none;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#5e5e5e;
overflow:visible;
background:#7C6F5C url(http://img68.imageshack.us/img68/4392/backkkkqs7.png);;
text-align:center;
margin:0;
}
a {
color:#67A400;
text-decoration:none;
}
a img {
border:none;
}
.wrap {position: relative;
width:950px;
text-align:left;
margin:0 auto;
padding:0;
}
#header {
overflow:visible;
height:226px;
background: transparent url(http://img126.imageshack.us/img126/2...alatarenc0.png) no-repeat;
margin:0px 0px;
}
#header .mainlogo{
width:420px;
height:241px;
text-indent:-99999px;
float:left;
cursor:pointer;
background: transparent url(http://img178.imageshack.us/img178/1097/logosm6.png) no-repeat 0 0;
margin:-10px 0 0;
overflow:visible;
}
.blogdescription {
width:261px;
height:22px;
background:url(http://dftheme.googlepages.com/dedicated_text.jpg) no-repeat right bottom;
padding-left:31px;
padding-top:55px;
text-indent:-9999px;
display:block;
float:left;
}
.right {
width:230px;
float:right;
}
.left {
width:955px;
float:left;
display:block;
/*background:#1A1A1A url(http://dftheme.googlepages.com/main_tl.gif);*/
background:#1a1a1a;
background-repeat:no-repeat;
overflow:auto;
margin-top:-5px;
padding-left:10px;
}