16 replies [Last post]
priyaa_2002
priyaa_2002's picture
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-7
Joined: 2008-08-15
Posts: 20
Points: 29

Rollover on slide show buttons works in Chrome but not in IE and the Right Side button seems to overlap in Chrome but not in IE. I would greatly appreciate your help.

http://hpportfolio.zymichost.com/Portfolio/portfolio.html

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Let's start here -

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

priyaa_2002
priyaa_2002's picture
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-7
Joined: 2008-08-15
Posts: 20
Points: 29

Fixed those errors

but the problem still exists.

priyaa_2002
priyaa_2002's picture
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-7
Joined: 2008-08-15
Posts: 20
Points: 29

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

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 49 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

priyaa_2002 wrote: but the

priyaa_2002 wrote:

but the problem still exists.

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?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

priyaa_2002
priyaa_2002's picture
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-7
Joined: 2008-08-15
Posts: 20
Points: 29

I apologize

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.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 49 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

priyaa_2002 wrote: Thanks

priyaa_2002 wrote:

Thanks Guru for letting me know. Now I've validated my other pages too in Strict mode.

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I guess I am confused why you

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

priyaa_2002
priyaa_2002's picture
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-7
Joined: 2008-08-15
Posts: 20
Points: 29

Deuce as you said I removed

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>

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 49 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Are you aware that your site

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!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Read your post. I think you

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

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

priyaa_2002
priyaa_2002's picture
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-7
Joined: 2008-08-15
Posts: 20
Points: 29

I'm checking in IE 8, Mozilla

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.

priyaa_2002
priyaa_2002's picture
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-7
Joined: 2008-08-15
Posts: 20
Points: 29

>>>Are you aware that your

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

priyaa_2002
priyaa_2002's picture
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-7
Joined: 2008-08-15
Posts: 20
Points: 29

My code previously: <div

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>

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

If you are using code tags in

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

priyaa_2002
priyaa_2002's picture
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-7
Joined: 2008-08-15
Posts: 20
Points: 29

Clarification: >>>The next

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

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 49 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

priyaa_2002]&gt;&gt;&gt;Are

priyaa_2002 wrote:

>>>Are you aware that your site has it's fonts set so small that it is unreadable <<<<<<

Is this the case on all my pages or just portfolio.html?

Yeah, I see now it is an image.

Quote:

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.

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.