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 buttonsSome 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% ???”
Thanks! very helpful, I was having the same problem.