467,907 Members | 1,450 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,907 developers. It's quick & easy.

IE6 Frustrations - Absolutely Positioned Elements

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
Jul 20 '05 #1
  • viewed: 1910
Share:
2 Replies
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/>
Jul 20 '05 #2
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
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Travis Spencer | last post: by
3 posts views Thread by Claude Schneegans | last post: by
3 posts views Thread by John A Grandy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.