Member Avatar for asif49

My webpage works fine in google chrome but when I open it in internet explorer there is one div box which always ends up differently than it does on google chrome.

I align them perfectly in chrome so the end of the box's lines meet then when i open it in IE the right box appears to have moved down by about 10px :( i have no idea how to fix this as it doesn't move down in chrome.

Additional info... I've used -300px to align this box, can this be messing everything up?

Suggestions please... or alternate ways of aligning that box?

Edited by asif49 because: n/a
  • 3 Contributors
  • 3 Replies
  • 89 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Nick Evan

Dani AI

Generated

Quick diagnosis for : using big negative margins and fixed pixel offsets to "nudge" a box is brittle. Different engines round subpixels, apply default body margins, and handle percentage calculations slightly differently, so what lines up in Chrome can sit a few pixels off in IE. Also check that the page is rendering in standards mode (missing/old DOCTYPE or IE compatibility mode will change layout rules).

Practical fixes that avoid the fragile offsets:

  • Reset the browser defaults (for example body { margin: 0; }) so you are not fighting built-in spacing.
  • Stop relying on large negative margins or fixed left offsets to place columns. Use a layout method that guarantees equal tops: float the columns and clear the wrapper, use inline-block with vertical-align: top, or use modern CSS layout like Flexbox or Grid for predictable alignment. If the decorative top/bottom images must sit over the columns, put them inside a positioned wrapper and use absolute positioning relative to that wrapper instead of negative margins. See MDN on percentages and layout behavior for why percent offsets can be surprising: MDN: Percentages in CSS. For modern two-column layouts, Flexbox is simpler and more robust: MDN: Flexbox.

Quick troubleshooting steps: open IE Developer Tools (F12) and inspect the computed box model for both boxes to see which margin/padding/offset differs. Verify the DOCTYPE and check for an X-UA-Compatible header so IE is not in quirks/compatibility mode: . If supporting old IE only, apply minimal IE-specific fixes after identifying the exact rule that differs rather than patching with large negative offsets. Thanks to and for getting this into the right forum.

Recommended Answers

All 3 Replies

Member Avatar for asif49

They are straight with a ruler then when i open it in IE the right box appears to have moved down by about 10px i have no idea how to fix this as it doesn't move down in chrome.

Here's how I align them:

.left_top { 
margin-top:-93%;
margin-left:1.8%;
background-image:url('/images/top.jpg');
background-repeat: repeat-y;
height:28px;
width:500px;
}

.right_top {
	margin-left:560px;
	margin-top:-341px;
        margin-bottom:auto;
	background-image:url('/images/top.jpg');
	background-repeat: repeat-y;
	height:28px;
        width:500px;
}
.content_left {
margin-left:1.8%;
padding-left:5px;
padding-right:4px;
padding-top:5px;
width:491px;
height:300px;
background-color:#e7f2e5;
}

.content_right {
    padding-left:5px;
	padding-top:5px;
	padding-right:4px;
	width: 491px;
	height: 300px;
    margin-left:560px;
	background-color:#e7f2e5;
}
.left_bottom {
margin-left:1.8%;
background-image:url('/images/bottom.jpg');
background-repeat: repeat-y;
height:8px;
width:500px;
}

.right_bottom {
    height:8px;
    width: 500px;
    margin-left:560px;
    background-image:url('/images/bottom.jpg');
}

PLEASE HELP!

Member Avatar for ko ko

This is PHP forum. So, no one won't answer your question. Move to HTML, CSS forum.

Member Avatar for Nick Evan

Move to HTML, CSS forum.

Done. Next time please use the "flag bad post" button to alert a Moderator that a thread is in the wrong forum. It saves me the time of reading each and every thread on Daniweb :icon_smile:

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.