CSS Fix

[papillonstudios]

I need to know what i have to do make this website view properly in IE.

 

http://healthycomputersgroup.ca

 

it works in all browsers (FF,Chrome,Safari) but it doesnt work in IE.

 

I would also like to know why my png images are not display with transparencies(viewed this website with IE

 

here all my CSS

/* Healthy Computers Group CSS */
body {
background-color:#063;
color:#FFF;
}

.wrapper {
width:1000px;
padding-top:15px;
padding-left:5px;
padding-right:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
  	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
  	/* For IE 5.5 - 7 */
  	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

background: rgba(255, 255, 255, 0.5);
border:2px #FFF solid;
}

.header {
margin-left:auto;
margin-right:auto;
width:890px;
}

.navbar {
height:25px;
border:1px #FFF solid;
background: rgba(255, 255, 255, 0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-left:5px;
margin-right:5px;
}

.content {
background: rgba(255, 255, 255, 0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-left:5px;
margin-right:5px;
height:500px;
border:1px #FFF solid;
margin-top:15px;
padding:10px;
color:#000;
}

#sddm {	
margin:2px;
padding: 0;
z-index: 30;
}

#sddm li {	
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
}

#sddm li a {	
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 80px;
color: #000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
text-align: center;
text-decoration: none;
}

#sddm li a:hover {	
background: rgba(255, 255, 255, 0.5);
border:1px #FFF solid inset;
}

#sddm div{	
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
width:100px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid #5970B2;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#sddm div a {	
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: rgba(255, 255, 255, 0.5);
color: #000;
font: 11px arial;
}

#sddm div a:hover {	
background: rgba(255, 255, 255, 0.7);
color: #000;
}

,footer {
margin-top:25px;
padding:0;
}

,footer p {
color:#FFF;
width:auto;
height:10px;
margin:0;
padding:0;
}

.footer a {
color:#FFF;
text-decoration:none;
font-weight:bold;
}

.category {
float:left;
padding:20px;
margin:25px;
border:1px #FFF solid;
background: rgba(255, 255, 255, 0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.category h2 {
margin:0;
font-size:18px;
}

.category img {
margin-top:5px;
}

a {
color:#000;
text-decoration:none;
}

a:visited {
text-decoration:none;
color:#000;
}

 

[haku]

Which IE - there are three that are in large-scale usage right now.

 

Your .png problem needs a pngfix for IE6. I use this one: http://www.dillerdesign.com/experiment/DD_belatedPNG/

[papillonstudios]

so far i have tested with IE8, i know that IE6 will be the same but im not sure about IE7 and thanks for the PNG fix

[papillonstudios]

*BUMP*

[haku]

Step 1) Fix your HTML errors

Step 2) Don't set side paddings/margins on an element with a fixed width. Use two divs instead, set the width on the outer one, and the margin/paddings on the inner one.

[papillonstudios]

im fixing the problems on my own.