CODEWITHSUNDEEP
htmlcsshover
user1813228
user1813228

Reputation:

How to stop the movement of box on hover?

I have a box in where there is a READ MORE text. Here is the fiddle for it. On hover, the box is moving towards the right. I am wondering what is the reason behind this ? How can I stop its movement ?

Below is my css code:

.chrisdavenport-middle24-text{
   position: absolute;
    top: 290px;
    /* font-style: italic; */
    font-family: "Adelle PE";
    padding-right: 200px;
    /* font-size: 16px; */
    padding-left: 200px;
    border-style: solid;
    padding-top: 10px;
    padding-bottom: 10px;
   color: orange;
    line-height: 1.379;
    font-size: 16px;
    font-family: "Adelle PE";
   color: red;
    right: 35px;
    letter-spacing: 0.300em;
}

.chrisdavenport-middle24-text:hover {
    font-weight: bold;
    font-style: italic; 
}

Upvotes: 0

Views: 832

Answers (3)

Ibrahim Hossain
Ibrahim Hossain

Reputation: 71

Well you may use text-indent: 12px in your code.

Upvotes: 0

Johannes
Johannes

Reputation: 67768

The box isn't moving, it's just getting a little bit wider (right aligned, so the left border goes to the left a little bit). That's due to the bold and italic font taking a little more horizontal space than the regular font.

To avoid this, you can use a fixed width on the box: Erase the padding-right and padding-leftand give it text-align: center and an appropriate width setting.

Here's the according fiddle: https://jsfiddle.net/ghwzzyjy/1/

Upvotes: 1

Evan Sims
Evan Sims

Reputation: 93

The box isn't actually moving, it's just getting wider because you're changing the weight and style of the font. To resolve this bug you just need to either assign your paragraph tag a "width" property, or imply that width by giving it a "left" property, to compliment the "right" counterpart you're already using above. Doing this will constrain it's width and stop the box from changing size.

.chrisdavenport-middle24-text{
  position: absolute;
  top: 290px;
  left: 0;
  right: 0;

  padding: 10px 200px;

  font-family: "Adelle PE";
  line-height: 1.379;
  font-size: 16px;
  letter-spacing: 0.300em;
  text-align: center;

  border-style: solid;
  color: red;
}

.chrisdavenport-middle24-text:hover {
  font-weight: bold;
  font-style: italic;
}

https://jsfiddle.net/csybh5ze/3/

Upvotes: 1

Related Questions