HTML5 Site Design - Image/Button moves in Chrome and Opera when attempting to click on it, Student in need of help please. Options

[ChristineL]

Hi, I designed this site as a course project for a client - SusanaDantas.com. At the time of completion (April 2014), it passed the W3C CSS and Markup Validation and everything was in the correct position and functioned correctly in IE8, 9, 10, Chrome, Firefox, Opera and Safari.

However now in Chrome and Opera, when attempting to click on the "Book a Skin consultation today!" button, as soon as the cursor gets close to it the button moves horizontally to the left.

I've searched for answers and solutions and contacted my course instructor but at this time I still don't know what I can do to correct this problem so any and all suggestions and help is appreciated.

I'd really like to know why it would have been functioning correctly for a number of months but now it isn't and how to fix it.


HTML5 Code

CODE

<div><a href="contact.html"><img class="bookconsultbtn" src="images/button.png" width="230" height="40" alt="Skin Consultation Button" /></a></div>

CSS Code

CODE

div#centeredonpage
{
  width: 960px;
  margin: 0 auto;
}  

.bookconsultbtn
{
  position: absolute;
  margin-top: 15px;
  margin-left: 180px;
  
      -webkit-transition:width 2s; /* For Safari 3.1 to 6.0 */
  -webkit-transition:height 2s; /* For Safari 3.1 to 6.0 */
  transition:width 2s;
}  

.bookconsultbtn:hover
{
  box-shadow: 0 0 14px rgb(245, 130, 32);
  width: 240px;
  height: 50px;
}

Thank you!

[Christian J]

as the cursor gets close to it the button moves horizontally to the left.

The CSS increases the image width and height when you hover over the image. In a narrow browser window this width increase causes a horizontal scrollbar in Firefox. Alas I don't have a recent Chromium/Blink based browser, maybe they've simply changed their CSS interpretation in a recent upgrade.

Does it help if you specify something like

CODE

.bookconsultbtn
{
right: 0;
}

?

Actually I can't find what's positioning the image on the right side to begin with.

This post has been edited by Christian J: Aug 16 2014, 05:49 PM

[ChristineL]

Hi, I just tried your suggestion. It shifted the button from the original position to the left about 1.5", and up to the very top so there is no white space above it. It also pushed the navigation and and everything below that down.

[ChristineL]

Tried a few other suggestions and it's working now. Thank your for your time and help! : )