Member Avatar for dwlamb_001

Good day,

I am having an issue with IE 5.x and the following web page. For some reason the area of text is narrow as though the maximum possible resolution is 800x600. I say this because testing this page at 800x600 yields a similar result in all browsers tested that IE 5.x browsers produce at 1024x768. Testing IE 5.x at resolutions higher than 1024x768 will generate a desired result.

Because I want the 3 picture based icons in one line across, the minimum width of the overall wrapper needs to be 690 - 700 px. In its present state, the wrapper is 75%. At 1024x768 this should be enough to yield the minimum amount required.

I am aware of the deficiency in IE browsers doubling left margins when displaying CSS and liquid lay-outs. Those fixes have been tried to no avail.

If by chance you're unaware of it, there's a great resource for installing multiple versions of IE here.

Thanks for your time and have a Great Day!

  • 4 Contributors
  • 3 Replies
  • 129 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

As reported, the layout behaves correctly in modern browsers but collapses in older IE. That pattern points at two well-known IE-era causes: the page running in quirks mode (so the box model and percentage computation differ) and old IE calculating floats/margins differently. 's observation about how IE treats surrounding styles relative to declared sizes is on target, and 's idea of a fixed container is a practical fallback.

Troubleshooting checklist:

  • Confirm a standards DOCTYPE is the very first line of the document to avoid quirks mode.
  • Add a temporary outline to the wrapper and the icon elements to see actual computed widths in IE (helps isolate padding/border shrinkage).
  • Reduce the page to a minimal test case (wrapper + three icons) to see if a specific rule triggers the issue.

Practical fixes that worked for old IE builds:

  • Use min-width for modern browsers and an IE-only stylesheet (conditional comment) to force a fixed minimum for IE5/6, since those browsers ignore min-width.
  • Prevent the old-IE float/margin quirk by making floated icons display:inline in the same rule as the float.
  • If the box-model is the cause, adjust the IE fallback to subtract padding/border (or simply force a larger width in the IE-only CSS).

Example snippets (put the IE-specific rule inside an IE-only conditional stylesheet):

/* modern */
#wrapper { width:75%; min-width:700px; margin:0 auto; }
.icon { float:left; margin-right:10px; display:inline; }
<!--[if lte IE 6]>
<style>
#mainwrapper { width:700px; } /* force minimum for old IE */
</style>
<![endif]-->

Notes: test in a real old-IE engine (not only emulators), and preference should be toward progressive enhancement—keep the fluid layout for modern browsers and serve a narrow fallback to legacy IE if supporting it is required.

Recommended Answers

All 3 Replies

Member Avatar for cpeeyush1

ya this is a browser dependent problem
but you can solve this if you give a tag container to all your contents then give a fixed size to this container using external css
-PC(INDIA)

Member Avatar for wickedsunny

yes i agree to cpeeush

Member Avatar for MidiMagic

The problem is the order that IE displays size styles and surrounding styles.

Other browsers display the sizes INSIDE the surrounding styles (margin, border, padding).

IE crams the surrounding styles inside the sizes. So the sizes must be made larger, to make room for the surrounding styles (unless the surrounding styles are 0).

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.