Print Page - Bugs for IE6, IE7 fixed on Bliss Template

Hello everybody, there are some CSS bugs in the actual template. Well...i solve them using some CSS hacks ...unfortunately i think this is the only solution. The only think you need to change is the admin.css file. Here is the new CSS file ( IT WORKED IN IE6, IE7 and Firefox 2.XX):

Code:

body {
padding: 0;
margin: 0;
font-family: Verdana;
color: #444444;
font-size: 10px;
}
td {
font-family: Verdana;
color: #444444;
font-size: 10px;
}
a {
padding: 0;
margin: 0;
font-family: Verdana;
text-decoration: none;
color: #444444;
font-size: 10px;
}
.border {
border: 1px solid #777777;
}
.dark {
background-color: #B5CCD8;
font-family: Verdana;
color: #444444;
font-size: 10px;
}
.medium {
background-color: #C5DCE8;
font-family: Verdana;
color: #444444;
font-size: 10px;
}
.light {
background-color: #D5ECF8;
font-family: Verdana;
color: #444444;
font-size: 10px;
}
#main_left ul {
padding: 0;
margin: 0;
width: 150px;
background-image: url(../images/links_main_bg.jpg);
background-repeat: repeat-y;
list-style-type: none;
font-family: Verdana;
color: #444444;
font-size: 10px;
}
#main_table {
padding: 0;
margin: 0;
vertical-align: top;
}
#top {
background-image: url(../images/top.jpg);
background-repeat: no-repeat;
background-position: top;
height: 7px;
width: 732px;
}
#bottom {
background-image: url(../images/main_top.jpg);
background-repeat: no-repeat;
height: 5px;
width: 732px;
}
#links_top_left {
width: 5px;
height: 30px;
background-image: url(../images/links_top_left.jpg);
background-repeat: no-repeat;
background-position: top right;
}
#links_top_right {
width: 5px;
height: 30px;
background-image: url(../images/links_top_right.jpg);
background-repeat: no-repeat;
background-position: top left;
padding-right: 19px;
}
#links_bottom_left {
width: 5px;
background-image: url(../images/links_bottom_left.jpg);
background-repeat: no-repeat;
background-position: top right;
padding-left: 19px;
}
#links_bottom_right {
width: 5px;
background-image: url(../images/links_bottom_right.jpg);
background-repeat: no-repeat;
background-position: top left;
padding-left: 19px;
}
#links_bottom_table {
width: 684px;
vertical-align: top;
}
#links_top_table {
width: 262px;
vertical-align: top;
}
#links_top_table ul {
background-image: url(../images/links_top_bg.jpg);
background-repeat: repeat-x;
margin: 0;
padding: 0;
padding-top: 5px;
height: 30px;
list-style-type: none;
font-family: Verdana;
color: #444444;
font-size: 10px;
}
#links_top_table li {
display: inline;
padding: 5px;
font-family: Verdana;
color: #444444;
font-size: 10px;
background-color: #C5DCE8;
margin-left: 3px;
}

#links_bottom_table ul {
background-image: url(../images/links_bottom_bg.jpg);
background-repeat: repeat-x;
margin: 0;
padding: 13px 0 5px 0;
list-style-type: none;
font-family: Verdana;
color: #444444;
font-size: 10px;
}
#links_bottom_table li {
display: inline;
padding: 5px;
font-family: Verdana;
color: #444444;
font-size: 10px;
background-color: #C5DCE8;
margin-left: 3px;
}
#links_main_bottom {
background-image: url(../images/links_main_bottom.jpg);
background-repeat: no-repeat;
_background-position: 50% 0%;
background-position: top left;
margin: 0;
padding: 0;
height: 8px;
width: 160px;
padding-bottom: 10px;
}
html > body #links_main_bottom {
background-position: top left;
*background-position: 50% 0%;
}
#main_left li {
text-align: left;
padding: 5px;
margin-left: 8px;
margin-right: 7px;
background-color: #C5DCE8;
margin-top: 3px;
}
#logo {
height: 51px;
width: 441px;
float: left;
background-image: url(../images/logo.gif);
background-repeat: no-repeat;
background-position: left;
padding-right: 2px;
}
#page {
padding: 0;
margin: 0;
width: 732px;
}
#content {
background-image: url(../images/main_bg.jpg);
background-repeat: repeat-y;
padding-top: 4px;
}
#main {
background-color: #FFFFFF;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
border: 1px solid #CCCCCC;
padding-top: 14px;
width: 712px;
}
#main_left {
background-image: url(../images/links_main_top.jpg);
background-repeat: no-repeat;
_background-position: 50% 0%;
background-position: top left;
width: 160px;
padding-top: 5px;
vertical-align: top;
font-family: Verdana;
color: #444444;
font-size: 12px;
}
html > body #main_left {
background-position: top left;
*background-position: 50% 0%;
}
#main_right {
width: 530px;
padding-left: 4px;
padding-bottom: 16px;
vertical-align: top;
font-family: Verdana;
color: #444444;
font-size: 10px;
}
#footer {
background-image: url(../images/main_bottom.jpg);
background-repeat: no-repeat;
background-position: bottom;
text-align: left;
padding: 6px;
padding-left: 16px;
padding-bottom: 10px;
font-family: Verdana;
color: #AAAAAA;
width: 732px;
font-size: 10px;
}
#footer_left {
text-align: left;
}
#footer_right {
text-align: right;
padding-right: 10px;
}
h2 {
font-family: Verdana;
color: #BB8811;
font-weight: normal;
font-size: 24px;
padding: 0;
margin: 0;
padding-left: 10px;
padding-bottom: 10px;
}

_{#links_main_bottom {
   background-image: url(../images/links_main_bottom.jpg);
   background-repeat: no-repeat;
   _background-position: 50% 0%;          //HERE IS A HACK MODIFICATION FOR IE6
   background-position: top left;
   margin: 0;
   padding: 0;
   height: 8px;
   width: 160px;
   padding-bottom: 10px;
}
html > body #links_main_bottom {         //HERE IS A HACK FOR IE7
   background-position: top left;
   *background-position: 50% 0%;
}

#main_left {
   background-image: url(../images/links_main_top.jpg);
   background-repeat: no-repeat;
   _background-position: 50% 0%;         //SAME BUG IN IMAGE ALIGNMENT FOR IE6
   background-position: top left;
   width: 160px;
   padding-top: 5px;
   vertical-align: top;
   font-family: Verdana;
   color: #444444;
   font-size: 12px;
}
html > body #main_left {            // SAME BUG IN IMAGE ALIGNMENT FOR IE7
   background-position: top left;
   *background-position: 50% 0%;
}}

Take a look at original admin.css file of the Bliss template. I have changed it because the image alignment declared in the CSS does not work on IE browsers. I dont know a better way to fix this....just with these hacks. Cya...

HERE IS A PRINTSCREEN OF THE BUG --> http://picasaweb.google.com/mariston/Hack/photo#5169158327149048786

Help Center Live Community

Development => Themes => Topic started by: neverstop on February 18, 2008, 09:11:10 PM