Member Avatar for Magic8Computing

when i view an internal web page i have created in IE it doesnt do the same as it does in FireFox.

I have an iFrame that loads a page by default that page has the two div listed below called to centre the text both vertically and horizontially and it appears that firefox does that as there is a margin around the chart but IE does not instead everything is at the top

please help somebody

#processmapsx{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
	}

#processmapsy{
	background-color: transparent;
	margin-left: -491px;
	position: absolute;
	top: -245px;
	left: 50%;
	width: 982px;
	height: 490px;
	visibility: visible
	}
  • 2 Contributors
  • 3 Replies
  • 115 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by zortec

Dani AI

Generated

Browsers differ in how they resolve percentage positions and containing blocks, and IE7 in particular will behave unexpectedly if the page is in quirks mode or the positioned ancestor does not have an explicit height. was on the right track asking about sizing, and ’s two-div “1px anchor + negative offset” pattern is fragile across engines because it depends on how the containing block height is computed.

Checklist to try (in order)

  • Ensure a standards DOCTYPE so IE7 runs in standards mode.
  • Put the CSS inside the document that the iframe actually loads (not only in the parent).
  • Give the positioned container a definite height (or make html/body 100%) so percentage top is well defined.
  • Reset default body margins (margin:0) — small differences can shift the anchor.
  • If you need IE7 support, provide an explicit fallback since transforms aren’t available there.

A robust, cross-browser pattern (modern + IE fallback):

html, body { height: 100%; margin: 0; padding: 0; }

.wrapper { position: relative; height: 100%; }

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* modern browsers */
  /* IE7 fallback: use negative margins equal to half the element's width/height */
  /* margin-top: -(half-height)px; margin-left: -(half-width)px; */
}

Extra notes

  • If IE still misbehaves, add a hasLayout trigger (for IE6/7) such as zoom:1 on the positioned ancestor.
  • If changing the iframe content isn’t possible, perform the centering in the parent by calculating offsets with JavaScript.
  • Test after each change so you can see which fix actually resolves the mismatch.

Recommended Answers

All 3 Replies

Member Avatar for zortec

What version of IE are you using?

I would put in a dimension for the height attribute of the iframe tag.

Ex. height: 50%

Member Avatar for Magic8Computing

I am using IE 7

And the iFrame has a height set to 490

Member Avatar for zortec

It does have one set in #processmapsy but not #processmapsx, just a thought.

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.