IE6 Frustrations - Absolutely Positioned Elements

[Adrienne]

This page validates XHTML-Strict and the CSS validates as well.

Opera and Netscape 7.0 display it correctly. There should be a film strip
on the left side, bordered in red, a list of links at the top bordered in
yellow, a graphic in the top left hand corner with a dashed purple border,
and content bordered in black.

However, all IE gives me is the content, and its placement is way off. It
does not give me any of the other elements.

The url (it's in testing) is http://66.117.11.37/teststrip2.asp

I would appreciate someone taking a look to see what I am doing wrong that
IE will not render correctly.

TIA

--
Adrienne Boswell
Please respond to the group so others can share
http://www.arbpen.com

[Steve Pugh]

Adrienne <ar********@sbcglobal.net> wrote:

This page validates XHTML-Strict and the CSS validates as well.

Opera and Netscape 7.0 display it correctly. There should be a film strip
on the left side, bordered in red, a list of links at the top bordered in
yellow, a graphic in the top left hand corner with a dashed purple border,
and content bordered in black.

However, all IE gives me is the content, and its placement is way off. It
does not give me any of the other elements.

The url (it's in testing) is http://66.117.11.37/teststrip2.asp

I would appreciate someone taking a look to see what I am doing wrong that
IE will not render correctly.

Have a look at http://steve.pugh.net/test/adrienne.html

Here's what I did:
1.Removed the XML declaration on the first line as this puts IE into
quirks rather than standards mode.

2. Removed the two (!) float: left; styles from #left. Combining float
and position: absolute; is unlikely to do anything good.

3. Changed the margin-left on #content. IE has a bug and doubles the
left margin on (some?) floated elements. Also by defining the width of
#left in px and the margin of #content in % you ensured that they
would overlap at small window widths.

So I set the margin to 75px for IE and 150 px for Opera and Netscape
(by using the body > #content { ... } which IE doesn't understand).

It now displays mostly the same in IE6, O7 and N7 (all on WinXP)
however you may still have problems in IE5.x which I don't have
availble to test.

BTW when the font size is increased in the browser the text spills
over the film strip background. If it's too late to consider a
redesign I'd make the filmstrip more or less the same colour
throughout and the text a contrasting colour. Will help at slightly
larger sizes but at much larger sizes the text will spill out
horizontally. Matching of foregound and background elements can never
be precise so best to design in as much leeway as possible.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Adrienne]

Gazing into my crystal ball I observed Steve Pugh <st***@pugh.net>
writing in news:ro********************************@4ax.com:

Adrienne <ar********@sbcglobal.net> wrote:

This page validates XHTML-Strict and the CSS validates as well.

Opera and Netscape 7.0 display it correctly. There should be a film
strip on the left side, bordered in red, a list of links at the top
bordered in yellow, a graphic in the top left hand corner with a dashed
purple border, and content bordered in black.

However, all IE gives me is the content, and its placement is way off.
It does not give me any of the other elements.

The url (it's in testing) is http://66.117.11.37/teststrip2.asp

I would appreciate someone taking a look to see what I am doing wrong
that IE will not render correctly.

Have a look at http://steve.pugh.net/test/adrienne.html

Here's what I did:
1.Removed the XML declaration on the first line as this puts IE into
quirks rather than standards mode.

2. Removed the two (!) float: left; styles from #left. Combining float
and position: absolute; is unlikely to do anything good.

3. Changed the margin-left on #content. IE has a bug and doubles the
left margin on (some?) floated elements. Also by defining the width of
#left in px and the margin of #content in % you ensured that they
would overlap at small window widths.

So I set the margin to 75px for IE and 150 px for Opera and Netscape
(by using the body > #content { ... } which IE doesn't understand).

It now displays mostly the same in IE6, O7 and N7 (all on WinXP)
however you may still have problems in IE5.x which I don't have
availble to test.

BTW when the font size is increased in the browser the text spills
over the film strip background. If it's too late to consider a
redesign I'd make the filmstrip more or less the same colour
throughout and the text a contrasting colour. Will help at slightly
larger sizes but at much larger sizes the text will spill out
horizontally. Matching of foregound and background elements can never
be precise so best to design in as much leeway as possible.

Steve

Steve, thank you so much. It was driving me crazy.

--
Adrienne Boswell
Please respond to the group so others can share
http://www.arbpen.com