Mysteriously off-by-1 pixel even using width=100% ???

This took me a while to debug, one div and one fieldset both are set to 100%, but in close examination they are off by a few pixels. Below is a stripped down example.

This is the menu bar, with some buttons
Some text

So, I was like, perhaps some of these jquery-ui classes gave margin values, so I manually set the margins to all zeros. I also then set all the border sizes to zeroes.

However, still off by two pixels…

I then went through all the css attributes in the chrome debugging tool, it turns out the following unheard of attributes are set by fieldset by default.

-webkit-margin-start: 2px;
-webkit-margin-end: 2px;
-webkit-padding-before: 0.35em;
-webkit-padding-start: 0.75em;
-webkit-padding-end: 0.75em;
-webkit-padding-after: 0.625em;

Apparently -webkit-margin-start and -webkit-margin-end will override the margin values… See more info here: http://css-infos.net/property/-webkit-margin-start

And in fact, I was off by 2 pixels on each side, haha.

So I explicitly set these two to zeroes, then yup, I got both the div and the fieldset aligned. I am happy! 😉

One thought on “Mysteriously off-by-1 pixel even using width=100% ???

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s