The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Percentage inconsistencies between pages.

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #197507
    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.

    Noel Forte

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.