Rollover works in chrome but not in IE

Let's start here - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhpportfolio.zymichost.com%2FPortfolio%2Fportfolio.html

but the problem still exists.

I fixed the errors. Rollover on slide show buttons works in Chrome but not in Firefox and the Right Side button seems to overlap in Chrome but not in Firefox.
http://hpportfolio.zymichost.com/Portfolio/portfolio.html

It may, but validation of the html works in so many cases that few of us are even willing to take a look unless the markup is validated. If you haven't validated both your html and css before posting your question some of us feel you haven't really tried.

Also your html does not validate to a strict document type, which is what you should be using. Transitional is not appropriate for new web pages.

I don't know why this concept is so hard for folks to understand. It't not as if it's all that difficult to validate, heck the W3C site will even do it for you so it's only a simple cut and paste. What's the big deal about it?

My sincere apologies to you guys..Its not that I didn't try..I've been trying to fix this problem by tweaking my css and reading about fixing cross browser issues. I'm not aware of how important to validate in Strict mode. Thanks Guru for letting me know. Now I've validated my other pages too in Strict mode.
Thanks again.

Please don't call me that. It's just awarded by the board software if you make over, if I recall right, a thousand posts. There is no requirement for them to be good posts and mainly all you need to do to get it is be a blowhard like me.

"Guru" indeed. Harumph.

Some of the folks with that board title qualify as real CSS gurus, but I'm not one of them.

I guess I am confused why you have a button wrapping the image.
Why not just wrap the image with an anchor?

Heck,
Do something along the lines of

<a href="#next" id="next-button">Next</a>
 
#next-button {
display: block;
width: 35px;
height: 73px;
background: url(images/next-off.jpg) no-repeat left top;
}
#next-button:hover { background: url(images/next-on.jpg) no-repeat left top; }

The next best bet is to actually make both of those images into one and then on the hover just change the background-position from left top to left bottom.

Deuce as you said I removed the <button> and now I don't see the overlapping issue. But pls help me here, why is the <button> causing that problem?

  <div id="contentArea">
	<div id="nextHolder">
   	  	<a class="btn" id="nextBtn"><img id="rollover_next" name="img_next" src="rollover_next_default.png" alt="next"></a>
    </div>
    <div id="imgHolder"><img src= "images/portfolio_pgbg.jpg" alt="grey bg"></div>
    <div id="imgArea"><img id="image" src="ptreyes.gif" alt="ptreyes.org"></div>  
	<div id="prevHolder">
    	<a class="btn" id="prevBtn"><img id="rollover_prev" name="img_prev" src="rollover_prev_default.png" alt="prev"></a>
    </div>
  </div>

Are you aware that your site has it's fonts set so small that it is unreadable for anyone with older eyes? Are you intending to make your site only useable for youngsters with perfect eyesite?

I have to zoom the site several times to make it's content viewable, but by the time that happens most of the page is off screen so I can't see it without scrolling up, down, and around? Was that intentional?

Also you seem to have a pretty bad case of "divitus" and need to learn how to write proper semantic html. Validation is necessary, but not sufficient by itself for good coding practices.

It's hard for someone like me to figure out what your problem is with the page since basically, I can't even see it. And my eyes are in pretty decent shape for a 66 year old guy. I can still read most non large print books, but I can't read your page.

Little hard to give a solution when I can't see the problem!

Read your post. I think you are missing some key words in there.
I have no clue what you're trying to ask.

I'm checking in IE 8, Mozilla and Chrome. Which browsers are you checking it in. Thanks for letting me know of the problem.

>>>Also you seem to have a pretty bad case of "divitus".<<<
Thanks for pointing this out.

>>>Are you aware that your site has it's fonts set so small that it is unreadable for anyone with older eyes? Are you intending to make your site only useable for youngsters with perfect eyesite?<<<<<<

Is this the case on all my pages or just portfolio.html? If its just portfolio.html, thats the image (snapshot of that page). When you click on that page, it should take you to the actual website..Having some error in that part. As well that's a slideshow kind of page. Got to fix that problem too.

My code previously:

  <div id="contentArea">
	<div id="nextHolder">
   	   <button id="nextBtn"><img id="rollover_next" name="img_next" src="rollover_next_default.png" alt="next"></button>
       </div>
       <div id="imgHolder"><img src= "images/portfolio_pgbg.jpg" alt="grey bg"></div>
       <div id="imgArea"><img id="image" src="ptreyes.gif" alt="ptreyes.org"></div>  
       <div id="prevHolder">
          <button id="prevBtn"><img id="rollover_prev" name="img_prev" src="rollover_prev_default.png" alt="prev"></button>
       </div>
  </div>

Code now:

<div id="contentArea"> 
      <div id="nextHolder"> 
          <a class="btn" id="nextBtn">Next</a> 
      </div> 
      <div id="imgHolder"><img src= "images/portfolio_pgbg.png" alt="grey bg"></div> 
      <div id="imgArea"><img id="image" src="ptreyes.jpg" alt="ptreyes"></div>  
      <div id="prevHolder"> 
          <a class="btn" id="prevBtn">Prev</a> 
      </div> 
  </div>

My question was, I previously used <button id="nextBtn"><img id="rollover_next" name="img_next" src="rollover_next_default.png" alt="next"></button> then I modified <a class="btn" id="nextBtn">Next</a>

If you are using code tags in your sentence, it doesn't show.
Also, if you take a look at my example, it doesn't use inline images either.
I'm not sure what you're trying to ask other than why don't the buttons work, and I am sure there is a technical explanation, but mine is - They just don't.

Clarification:

>>>The next best bet is to actually make both of those images into one and then on the hover just change the background-position from left top to left bottom.<<<

Can you pls take a look at the below images and let me know is this what you suggested.

hpportfolio.zymichost.com/Portfolio/images/rollover_port_default.png
hpportfolio.zymichost.com/Portfolio/images/rollover_next_over.png
hpportfolio.zymichost.com/Portfolio/images/rollover_prev_over.png

Yeah, I see now it is an image.

Clicking on that image does nothing, nor does clicking on the strange arrow images do anything.

By the way, please learn to use the site's editor functions. Quotes belong between propler quote tags as I've done with this messages.