Percentage inconsistencies between pages.

[Noel Forte]

I’ve heard of there being percentage inconsistencies between browsers before, but never pages, and in this case I’ve encountered exactly that.

Here’s the setup: (If someone knows of a good way to make a reduced test case of multiple pages, let me know.)

<header><!-- MENU --></header>
<main><!-- CONTENT --></main>

and the CSS:

header {
width: 20%;
position: fixed;
/* OR */
float: left;
}
main {
/* Irrelevant */
}

Basically, as long as the header is set to a percentage-based width, the percentage calculation fluctuates from page to page. I’ve tried using the devTools to remove content from the page, which seems to stop the behavior, but I don’t know whether thats because the h1 or p tags in the main element are somehow causing the pixels to nudge. Removing them causes the header to go back to the proper calculation, even though it’s floated or positioned as fixed/absolute.

Any help would be appreciated; I’ll try to make a reduced test case.

EDIT: The ‘nudge’ is by 3px every single time. Wierd, but that’s how it’s happening. Also this behavior has been cross-browser tested.

[Noel Forte]

Here’s the reduced test case:

Change the display: none at the top of the css and rerun the code. Notice that the header changes when the h1‘s are absent.

http://codepen.io/thenoelforte/pen/PwdWym

[Noel Forte]

Aw man…haha didn’t even think of that. Whoops :)

[Author]

Posts