Member Avatar for wishiniisfishin

I thought of a work around about the time I posted this... Sorry for jumping the gun. My site seems to work fine in every browser except IE. The problem lies in the left sidebar(sidebar1). When in IE the image I have at the top of sidebar1 goes down about half an inch. You can see the difference looking at the site in another browser. The site is fatmanapproved.com. Any help would be greatly appreciated.

  • 2 Contributors
  • 1 Reply
  • 123 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by ctyokley

Dani AI

Generated

Quick, focused diagnostics and fixes for the IE-only vertical offset reported by . was on the right track about neighbouring boxes affecting layout; the suggestions below expand that into concrete checks and small CSS fixes that isolate and resolve IE rendering differences.

Recommended steps to isolate the cause:

  1. Confirm standards mode (valid DOCTYPE) and that IE is not running in Compatibility View or an old document mode via the F12 tools. Quirks/compatibility modes change margins and box behavior.
  2. Use IE’s developer tools to inspect the computed box model for the header, nav and sidebar. Add temporary outlines to reveal which element’s box is larger or shifted.
  3. Eliminate inline-image baseline offset by forcing block flow or top-alignment. Example fixes:
#sidebar1 img { display: block; margin: 0; padding: 0; }
#sidebar1 img { vertical-align: top; }
#sidebar1 { line-height: 0; }
  1. If floats are used, check for an uncleared float or the classic IE double-margin bug on floated elements. A clearfix or explicit clearing on the parent can prevent siblings from being pushed down.

IE-specific notes and quick fixes:

  • Older IE versions sometimes need "hasLayout" triggered. Applying zoom:1 (or position:relative) to the container often stabilizes layout:
#sidebar1 { zoom: 1; /* legacy IE layout trigger */ }
  • Build a minimal test page (header + nav + sidebar + the image) to reproduce the offset. Narrowing to a tiny example usually reveals whether the issue is margins, floats, inline image baseline, or a DOCTYPE/compatibility problem.

Useful references: MDN on CSS vertical-align (vertical-align on MDN) and the effects of quirks vs standards mode (Quirks mode and standards mode). These explain why the simple display:block or vertical-align:top fixes are often effective.

Member Avatar for ctyokley

I'm assuming your using div tags. If so check for spaces also check the size of div tags. if one of the div tags if to long, it will push down the others. in this case it is anything above your sidebar like the header or nav bar.

If you aren't using div tags, then ignore everythign i just said.

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.