2 replies [Last post]
suthaharmca
Offline
newbie
Last seen: 4 years 28 weeks ago
Timezone: GMT+5.5
Joined: 2009-04-22
Posts: 4
Points: 2

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*/

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 3 years 41 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

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.

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 5 years 20 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

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...