Popup positioning on MSIE

[Warren Post]

I´m trying to implement a:hover popup images like Eric Meyer did at
<http://meyerweb.com/eric/css/edge/popups/demo2.html>. My take is at
<http://www.cafecopan.com/dev/20050523/>. Mozilla 1.6 and Opera 7.53
display as intended: upon hovering over the text on the right, a
corresponding image pops up on the left, covering the default image. MSIE,
however, places the images on the right, over the text. Does anyone have
any idea what I am doing wrong?

TIA,
--
Warren Post
Santa Rosa de Copán, Honduras
http://srcopan.vze.com/

[Els]

Warren Post wrote:

I´m trying to implement a:hover popup images like Eric Meyer did at
<http://meyerweb.com/eric/css/edge/popups/demo2.html>. My take is at
<http://www.cafecopan.com/dev/20050523/>. Mozilla 1.6 and Opera 7.53
display as intended: upon hovering over the text on the right, a
corresponding image pops up on the left, covering the default image. MSIE,
however, places the images on the right, over the text. Does anyone have
any idea what I am doing wrong?

Well, you set position:relative on the div.content, and then
position:absolute on the image inside that div. This will position the
image absolute, relative to its positioned parent.
The parent has a left padding of 350px, and IE handles paddings
differently. The position of the image is now 4em to the right of the
padding of 350px.

Why so complicated?
Just set the content at 350px from the left instead of giving it a
padding, and then position the image at -350px (or whatever works out
to be 350px - 4em; 300px to the left seems about right)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Carly Simon - You're So Vain

[Warren Post]

Thanks, I´ll give that a try.

Why so complicated?

Good question. This is one of those projects that has sprawled as it has
grown, and my code isn´t exactly clean anymore. All observations welcome,
including ¨your code sucks¨.

--
Warren Post
Santa Rosa de Copán, Honduras
http://srcopan.vze.com/

[Els]

Warren Post wrote:

Thanks, I´ll give that a try.

Please quote the relevant part(s) of the post you're replying to, we
don't all memorize all the posts we read and write all day in numerous
groups :-)

Why so complicated?

Good question. This is one of those projects that has sprawled as it has
grown, and my code isn´t exactly clean anymore. All observations welcome,
including ¨your code sucks¨.

[<http://www.cafecopan.com/dev/20050523/>]

I'd just use a strict doctype, including the declaration url, and
decide between HTML and XHTML. If your doctype says HTML, don't use
/> at the end of the image tags.

And change Café Copán in the alt text also to Caf&eacute;
Cop&aacute;n, like you did everywhere else.

Other than that, your code seems fine to me :-)

If the CSS code isn't clean anymore like you said, I usually start
over. I'll have in my head (my own head, not the page's) the most
important rules, which I'll write again first, and then I build it up
fresh, so I don't get the blocks of CSS where I have forgotten why
exactly I gave something a certain height, width, margin or padding.
I do this using Firefox, and when all looks well, I check the other
browsers. Besides ending up with cleaner code, and having a second
chance to not forget to comment a couple of rules that are there for a
less obvious reason but still really are needed, I also learn from
discovering some things for the second time.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Warren Post]

On Fri, 03 Jun 2005 00:57:42 +0200, Els wrote:

Why so complicated?
I was trying to get everything (header, navbar, and content) to line up 4
ems along the left of the viewport. I prefer ems to pixels for this
because it makes the design more forgiving of differnt font and viewport
sizes, but I see your point and I like the simplicity of your solution.
Just set the content at 350px from the left instead of giving it a
padding, and then position the image at -350px (or whatever works out to
be 350px - 4em; 300px to the left seems about right)

Done; see result at <http://www.cafecopan.com/dev/20050604/>. I´ve left
the former example in place for comparison. Your suggestion solves the
problem but introduces a new one: div.content has shifted to the right but
retains the width it would have had had it not been shifted. The result is
that the right side of div.content extends beyond the right side the body.
For illustrative purposes I´ve added background: blue to div.content so
you can see what I mean. If your viewport is wide and your font size is
small, the problem may not be immediately obvious.

In Mozilla 1.6 and Opera 7.53, a horizontal scrollbar appears so you can
scroll beyond the right edge of the body and see the rest of div.content.
Yuck! MSIE 6.0 truncates the part of div.content that goes beyond the
body, which doesn´t look as bad but has even worse consequences for
useability.

So how can I set div.content to never extend beyond the right of the body?

And thank you. I appreciate your time and thoughts.

--
Warren Post
Santa Rosa de Copán, Honduras
http://srcopan.vze.com/

[kchayka]

Warren Post wrote:

<http://www.cafecopan.com/dev/20050604/>

div.content has shifted to the right but
retains the width it would have had had it not been shifted.

That's because you relatively positioned it with a left offset of 300px.
Relative positioning doesn't work as you probably imagine it should.
It's often misunderstood.
<URL:http://www.w3.org/TR/CSS21/visuren.html#propdef-position>

Don't set left:300px, set margin-left:300px.
Change any right to margin-right while you're at it. Adjust to taste.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Els]

Warren Post wrote:

Just set the content at 350px from the left instead of giving it a
padding, and then position the image at -350px (or whatever works out to
be 350px - 4em; 300px to the left seems about right)
Done; see result at <http://www.cafecopan.com/dev/20050604/>. I´ve left
the former example in place for comparison. Your suggestion solves the
problem but introduces a new one: div.content has shifted to the right but
retains the width it would have had had it not been shifted.

That's what Kchayka pointed out in the other post; position:relative
may do something different than you expect. It shifts the entire
element to the right in this case. To compensate on the right side,
you need a right margin (/not/ a negative one!) of the same width as
you set the value of the left property.

So, if you just change right:-300px; (you can't set both left and
right values on a relative positioned element) to margin-right:300px;,
you're fine :-)
(I'd make it margin-right:350px; to look better)
And thank you. I appreciate your time and thoughts.

You're welcome.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Warren Post]

On Sat, 04 Jun 2005 20:08:16 +0200, Els wrote:

So, if you just change right:-300px; (you can't set both left and right
values on a relative positioned element) to margin-right:300px;, you're
fine :-)

Thank you, that was exactly it. I was confusing right: with margin-right:.

--
Warren Post
Santa Rosa de Copán, Honduras
http://srcopan.vze.com/