- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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.
Aw man…haha didn’t even think of that. Whoops :)