CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chrome
mingos
mingos

Reputation: 24502

Padding set by jQuery changes an element's width

I have a website that has a few buttons on the home page: http://www.bniolsztyn.pl (in Polish, sorry).

There are a couple blue buttons with the following markup:

<div class='more-link'>
    <a href='#'>Read more...</a>
</div>

Their styling is:

div.more-link a {
    padding: 8px 20px;
    color: #d0d0d0;
}
div.more-link {
    width: 100%;
    height: 12px;
    padding: 6px 0;
    margin: 4px 0;
    text-align: center;
    background: url(/sites/all/themes/bni/img/button.png) center repeat-x;
    background-color: #1a3754;
    background: -moz-linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5190cf),color-stop(48%,#27527e),color-stop(52%,#1a3754),color-stop(100%,#234a71));
    background: linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
    border: 1px solid #5190cf;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
}

The inner <a> tag has a fixed 20px padding on both sides:

alt text

Using jQuery, I make it occupy the entire parent div:

alt text

The jQuery code is as follows:

$(document).ready(function(){
    $('div.more-link a').each(function(){
        var container = $(this).parent().width();
        var link = $(this).width();
        var pad = Math.floor((container - link) / 2);
        $(this).css({
            paddingLeft: pad + 'px',
            paddingRight: pad + 'px'
        });
    });
});

Now, everything works fine in Firefox, Opera and Internet Explorer. However, Chrome seems to react to the jQuery code in a peculiar way: it reduces the width of the <a> tags and, as a consequence, displacing the button text to the right:

alt text

At first, I thought it was a box-sizing issue, but it doesn't seem to be so. Disabling the inline padding added by jQuery brings the element's width back to normal (both left and right padding values must be set in order to see the quirk).

I'm using Chrome 8.0.552.215 and jQuery 1.4.4.

Is this a known problem with Chrome or is it a "What a Terrible Failure" on my side? Is there anything wrong with the code? Can you reproduce the error?

Upvotes: 3

Views: 3423

Answers (1)

LittleTreeX
LittleTreeX

Reputation: 1239

I'm not convinced that you need JQuery to pull this off. Are you simply attempting to center the <a> text within the container "button" <div>? If so, you can do this with CSS:

div.more-link a {
  color: #d0d0d0;
  display:block;
  line-height: 24px;
}
div.more-link {
  width: 100%;
  height: 24px;
  margin: 4px 0;
  text-align: center;
  background: url(/sites/all/themes/bni/img/button.png) center repeat-x;
  background-color: #1a3754;
  background: -moz-linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5190cf),color-stop(48%,#27527e),color-stop(52%,#1a3754),color-stop(100%,#234a71));
  background: linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
  border: 1px solid #5190cf;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
  box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
}

Notice I simply removed the padding from both elements, adjusted the height of the div, and added display:block;, and line-height:24px; to the <a>.

EDIT: To be clear, the above code will also make the entire "button" clickable.

Upvotes: 1

Related Questions