Member Avatar for rfrapp

I believe that one of the pages of the site that I'm creating is shifted slihtly to the left. I may be going crazy, but I'm pretty sure that's what's happening. The page that I believe is shifted is: http://armyants.us/members.php?steam=All If you guys could help me out here, then that's be pretty awesome. Thank you for your time!

  • 4 Contributors
  • 3 Replies
  • 121 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by EvolutionFallen

Dani AI

Generated

A quick checklist and reliable fixes to stop a single page from sitting a few pixels left of the rest.

As noted by and expanded by , small differences in the rendered box model or page chrome can create that “shift.” Useful first steps are to compare the two pages in the same browser with developer tools open and look at the computed box model for the main container. Temporary visual helpers and a consistent reset will usually reveal the culprit quickly.

Try this minimal CSS while debugging and as a permanent fix if desired:

/* remove browser body gap and use a consistent box model */
html, body {
  margin: 0;
  padding: 0;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* force a vertical scrollbar so pages don't jump when some are taller */
html {
  overflow-y: scroll;
}

/* visible debugging aid — remove when done */
.debug-outline {
  outline: 1px dashed rgba(255,0,0,0.6);
}

Other checks that often locate the issue: confirm a valid HTML5 doctype; validate the page for unclosed tags; compare computed widths (including borders and padding) between the working pages and the shifted page; look for absolutely positioned or transformed elements that extend off-canvas; and test with CSS temporarily disabled to see whether a stylesheet rule is responsible. If the page’s resource tags are placed unusually, ensure CSS loads before layout-affecting scripts to avoid flashes or layout differences (as hinted in earlier replies).

If the problem persists after these steps, running the HTML through a validator and taking side-by-side screenshots while toggling the debug outline will usually expose the stray rule or element. For reference on box model behavior and the box-sizing solution, see the MDN guide on box-sizing: box-sizing on MDN. For quick markup validation use the W3C validator: W3C Validator.

Recommended Answers

All 3 Replies

Member Avatar for simplypixie

Looks fine to me (Chrome on Mac). Have you thought it may just be the scrollbar making it appear this way?

Member Avatar for <M/>

It looks fine, what browser did you preview this on?

Member Avatar for EvolutionFallen

The only differences I see are these:
Your border-left and border-top are 1px wide on this page. On other pages they are 2px.
On other pages you have padding: 0 10px 10px; for the main content div. On this one there is no padding. That may make it look like your content inside the div has shifted left, because it's not being pushed as far from the border.
Keep in mind that if you do add padding and border width, you need to remove it from the width so the overall size of the container is still the same:
Current overall width: 1001px -> (width: 1000px, border-left: 1px)
If you add padding: 0 10px 10px, this will add 10px on the left and right, so:
1000px - 10px [padding-left] - 10px [padding-right] - 1px [for changing border-left to 2px] = 979px [your new width]

On a side note, you have <link> and <script> tags in the body of your HTML. These should be inside the <head>, not <body>. The script could go in body, but there's probably no need for it to be in this case.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.