Hai
I'm designing a webpage and the URL is http://suthahar.wen.ru
I have a problem with the[#main_body,#main_right] DIV bgcolor..the bgcolor is perfect in Firefox but in IE6 the color differs..click the above link to see the difference in both browsers..plz give any suggetions to get rid of this problem.
and here is my CSS Code:
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body
{
font-size:70%;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
background:#040404;
}
#banner {
width:898px;height:229px;
background-image: url(../images/top%20banner.png);
background-repeat: no-repeat;
margin:0 auto;
}
#menu_left {
width:884px;height:47px;
margin: auto;
}
//HERE ARISE THE PROBLEM
#main_body {
width:884px;height:485px;
background:#1B1919 url(../images/body_left.png);
background-repeat: no-repeat;
margin:0 auto;
}
#main_right{
width:884px;height:485px;
background-image: url(../images/body_right.png);
background-repeat: no-repeat;
background-position: right;
}
#inner_left {
width:515px;height:429px;
background:#3B3636 url(../images/inner_body_left.png);
background-repeat: no-repeat;
position:absolute;
left: 391px;
top: 305px;
}
#inner_right {
width:515px;height:429px;
background-image: url(../images/inner_body_right.png);
background-repeat: no-repeat;
background-position: right;
position: absolute;
left: 391px;
top: 305px;
}[/b]
#box1_left {
width:295px;
height:105px;
background:#3B3636 url(../images/box1_small_left.png) ;
background-repeat: no-repeat;
position: absolute;
left: 59px;
top: 421px;
}
#box1_right {
width:173px;
height:105px;
background-image: url(../images/box1_small_right.png);
background-repeat: no-repeat;
background-position: right;
position: absolute;
left: 181px;
top: 421px;
}
#box2_left {
width:295px;
height:105px;
background:#3B3636 url(../images/box1_small_left.png) ;
background-repeat: no-repeat;
position: absolute;
left: 59px;
top: 547px;
}
#box2_right {
width:295px;
height:105px;
background-image: url(../images/box1_small_right.png);
background-repeat: no-repeat;
background-position: right;
position: absolute;
left: 59px;
top: 547px;
}
#intro
{
background-image: url(../images/ats_logo.png);
background-repeat: no-repeat;
background-position: right;
position: absolute;
width:306px;
height:107px;
left: 57px;
top: 302px;
}
#contact_us_img
{
background-image: url(../images/contact-us_image.png);
background-repeat: no-repeat;
background-position:left;
position: absolute;
width:306px;
height:132px;
left: 57px;
top: 294px;
}
#mail_img
{
background-image:url(../images/Email_logo.png);
background-repeat: no-repeat;
background-position:left;
position: absolute;
width:32px;
height:52px;
left: 10px;
top: -2px;
}
#mailtext
{
position: absolute;
width:302px;
height:19px;
top: 3px;
left: 52px;
}
#form{
position: absolute;
width:141px;
height:120px;
left: 16px;
top: 28px;
}
#chat
{
position: absolute;
width:141px;
height:120px;
left: 81px;
top: 446px;
}
#title{
font-size:150%;
font-family:Arial, Helvetica, sans-serif;
color:#FF6600;
font-style:italic;
}
#img{
margin:0;
padding:0;
border:none;
margin-top:8px;
margin-left:13px;
}
#img1{
margin:0;
padding:0;
border:none;
margin-top:8px;
margin-left:13px;
}
#text
{
width:160px;
height:104px;
position: absolute;
top: 425px;
left: 182px;
}
#text1
{
width:160px;
height:91px;
position: absolute;
top: 561px;
left: 180px;
}
#text2
{
width:478px;
height:350px;
position: absolute;
top: 320px;
left: 406px;
}
#title1{
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
color:#FF6600;
font-style:italic;
}
#imglink
{
width:248px;
height:75px;
position: absolute;
left: 81px;
top: 673px;
}
#bottomnav
{
width:300px;
height:97px;
margin:0 auto;
left: 365px;
position:absolute;
top: 746px;
width: 520px;
}
#bottomnav a
{
color:#0000FF;
text-decoration:none;
}
#bottomnav a:hover,#bottomnav a:active
{
color:#FFFFFF;
}
#copyright
{
width:130px;
margin:0 auto;
}
#imgroll
{
width:495px;
height:117px;
position: absolute;
left: 408px;
top: 612px;
}
/*Image shake*/
.shakeimage
{
position:relative
}
/*IMAGE ENLARGE*/
#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}
#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}
#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}
#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}
/*END IMAGE ENLARGE*/
Looks like a PNG
Looks like a PNG transparency issue, have a look at http://www.twinhelix.com/css/iepngfix/ or just google IE PNG Transparency.
Right Vade... I had the same
Right Vade... I had the same problem on my site, so I just ended up saving the images as high-quality JPGs...