Member Avatar for tefflox

Hello, please visit the following page in firefox, which should look right: http://listenlight.net/dev

then visit the same page using IE6: which places the "archive | notes" element on the far left. How can I fix this so it works right (element 25% from right margin) in IE6?

Thank you kindly. This is a wonderful forum!

  • 2 Contributors
  • 6 Replies
  • 81 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by FC Jamison

Dani AI

Generated

Two things are most likely in play here: how IE6 handles positioned elements (an absolutely positioned child is placed relative to the nearest positioned ancestor) and IE6 layout bugs (the infamous "hasLayout" issue) that make text alignment and percentage offsets behave differently than modern browsers. already found a working table hack, and is right to warn about using tables for layout — a proper CSS fix will be more robust and accessible.

Quick checklist and fixes to try (apply in this order):

  1. Make the wrapper a positioned container so percentage offsets are relative to it: #wrapper { position: relative; }.
  2. Position the archive block absolutely from the right: position: absolute; right: 25%;. Ensure the wrapper has an explicit width (or is full width). Percentages are calculated against the positioned ancestor.
  3. If text-align: right; on the paragraph inside the positioned element does not work in IE6, force hasLayout on the element with zoom: 1; (IE-only trigger), or give it an explicit width/height. This fixes many IE6 alignment glitches without using a table.
  4. As an alternative, float: right; combined with a margin can achieve similar placement when absolute positioning is not desired.
  5. Confirm a standards DOCTYPE is present so IE6 is not in quirks mode.

Example CSS to test quickly:

#wrapper { position: relative; width: 100%; }
#archive { position: absolute; right: 25%; top: 10px; text-align: right; zoom: 1; }
#archive p { margin: 0; }

Note: zoom: 1 is a harmless, widely used IE-only fix to trigger hasLayout. Use conditional rules if you want the patch limited to IE6.

Recommended Answers

All 6 Replies

Member Avatar for FC Jamison

Your server is down...

Didn't I see this question posted somewhere else? I could swear I've seen it before...where the archive|notes sits on the right margin in IE.

I found it...about 7 posts down. Katarey solved this problem for you already...what happened?

Member Avatar for tefflox

Oh! Hey I'm sorry but yes, I had asked earlier, but this time the page is live instead of uploaded here. Except not live when you looked, as my host had scheduled this hour of downtime. I may have removed the /dev files earlier, having fixed the problem by setting a 100% width table inside a separate div with absolute positioning. Thank you :-)

Your server is down...

Didn't I see this question posted somewhere else? I could swear I've seen it before...where the archive|notes sits on the right margin in IE.

Member Avatar for tefflox

The former solution did not work as I had needed. I made a div#info for the css and finally found that putting a table inside it fixed the problem. I don't know if this would be called a hack, but I couldn't get a lone paragraph to align right in IE6 inside the new div, yet it works fine in Opera, Firefox, and Safari. (?)

Member Avatar for FC Jamison

I am against using tables as a design tool...but if it works for you...go for it.

Member Avatar for tefflox

I have heard that this may be a matter of style, though I am open to suggested reading...

Member Avatar for FC Jamison

Tables are frowned upon in the design world when used for anything but displaying tabular data.

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.