Hi guys please help me with this IE problem..
my website http://www.glassfish.com.sg/portfolio.html
in firefox i can see the portfolio image clearly but not at all with IE

HTML :

<div id="webdesign">
                                  <a href="webdesign.html" class="highlightit"><img src="images/website.jpg" width="350" height="150" border="0" /></a>                                  </div>

CSS:

#webdesign{
float:left;
width:350px;
height:150px;
}
.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

I couldn't see this in the actual site reference, try removing the height and widths in the html. also check your css code for "img" references maybe you defined something earlier on...

try removing the height and widths in the html

Why ? It is ALWAYS a good practice to put the dimensions of an image in the HTML, you NEVER want to force the browser to figure out the dimensions!

Couple of things I see:
-IE doesn't support the hover pseudoclass on anything but the <a> tag.

-You are triggering IE6's doubled-float margin bug when you float those boxes left then give them a left margin - IE6 doubles that margin. You'll need conditional comments and a separate css file that contains ONLY the fixes needed for IE. To squash this bug, you need to add display:inline to those boxes.

- You have an unclosed <span> tag in your menu - validate your code

you mean the problem is on menu??

#menu{
    float:right;
    width:500px;
    height:120px;
    padding-top:55px;
    background-color:#1799B0;
    
}

ul#blue { 
    margin:0; 
    padding:0; 
    list-style-type:none;
     }

ul#blue li { 
    position:relative; 
    float:left; 
    border-top:4px solid #efefef; 
    margin-right: 15px; 
    padding-right: 5px; 
    padding-top: 5px;}

ul#blue .current { 
    border-top:4px solid #33CCFF;}

ul#blue li:hover { 
    border-top:4px solid #33CCFF;}

ul#blue li a { 
    padding:0px 0px; 
    text-decoration:none; 
    font-family: impact,sans-serif;
    color: #FFFFFF;
    font-size: 18px;
    color:#FFFFFF;}

ul#blue li a:hover { 
    color:#33CCFF; 
    border:none; }

ul#blue li span{ 
    display:none; 
    position:absolute; 
    top:20px; 
    left:2px; 
    width:160px; 
    font:normal 9px Verdana, Georgia, "Ravvi", Times, serif; 
    line-height: 15px; }

ul#blue li a:hover span {
    margin-top: 7px; 
    display:block; 
    color: #ffffff;}

No, but having unclosed tags can have unexpected effects.