Help with CSS based gallery

Hi,

I'm developping an image gallery based on CSS (no Javascript so far).
You can see it here:

http://www.myfilestash.com/userfiles/myed/index.html

It only works well in Opera, Firefox, Safari and IE7 however I have
two problems:

1. Doesn't work on IE6. Has you imagine I'm looking for full browser
compatibility (don't laugh :P);

2. When you put your mouse over the "Zoom" button, the big picture
stays below the other "zoom" buttons (check out the link).

Does anyone has any idea for a solution. I've already tried th z-index
without success. I really need to get this thing working.

Thank you.

In article
<1186396882.154157.59890 (AT) 57g2000hsv (DOT) googlegroups.com>,
mark.it.here (AT) gmail (DOT) com wrote:

http://www.myfilestash.com/userfiles/myed/index.html

It only works well in Opera, Firefox, Safari

In Safari at least one of the girls has two zoom boxes for
earings.

--
dorayme

On 6 Ago, 11:47, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
1186396882.154157.59... (AT) 57g2000hsv (DOT) googlegroups.com>,

mark.it.h... (AT) gmail (DOT) com wrote:

http://www.myfilestash.com/userfiles/myed/index.html

It only works well in Opera, Firefox, Safari

In Safari at least one of the girls has two zoom boxes for
earings.

--
dorayme

Thanks Dorayme,

I guess I didn't explain myself very well... that "zoom box earings"
problem happens in all browsers. That's one of the problems I'm trying
to solve. I guess that if I get it to work on one it will work in all
others. However, on IE6, the zoom boxes don't appear at all.

--
Rui

In article
<1186398568.841182.175200 (AT) 19g2000hsx (DOT) googlegroups.com>,
mark.it.here (AT) gmail (DOT) com wrote:

On 6 Ago, 11:47, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
1186396882.154157.59... (AT) 57g2000hsv (DOT) googlegroups.com>,

mark.it.h... (AT) gmail (DOT) com wrote:

http://www.myfilestash.com/userfiles/myed/index.html

It only works well in Opera, Firefox, Safari

In Safari at least one of the girls has two zoom boxes for
earings.

--
dorayme

Thanks Dorayme,

I guess I didn't explain myself very well... that "zoom box earings"
problem happens in all browsers. That's one of the problems I'm trying
to solve. I guess that if I get it to work on one it will work in all
others. However, on IE6, the zoom boxes don't appear at all.

--
Rui

I realise this might not be welcome but I feel an urge to advise
you. Don't worry about such trickery. If you want to provide a
way to let folk see things bigger, just make the pics links that
go to the bigger. I have spent a whole day getting rid of all the
javascript pop-ups in a section of a website I am updating, and
simply providing enlargements in the context of the site itself
and so I cannot at this late hour let you think it is ok to be
wasting time on all this. You will regret it later. If you want
people to see beautiful girls bigger, the simplest technology
that works in all browsers is at hand to help you.

I don't think a lot of authoprs realise how irrititating it is to
have stuff coming up and blocking other stuff out. The internet
is a confusing place for a lot of people. The sort that seek out
these models photographed in a certain (actually sexless) manner
to look at are not likely to be too brainy to start with. Don't
confuse them further. Provide for simple pleasure by simple means.

--
dorayme

I don't think a lot of authoprs realise how irrititating it is to
have stuff coming up and blocking other stuff out. The internet
is a confusing place for a lot of people. The sort that seek out
these models photographed in a certain (actually sexless) manner
to look at are not likely to be too brainy to start with. Don't
confuse them further. Provide for simple pleasure by simple means.

--
dorayme

I did thought about that. The example shown is a magazine, the site
I'm making is about magazines, so the public is not really just about
guys that look at sexy models. It will reach a much wider audience.
Those 5 pictures are also just what will be shown about the magazine's
pages, it's not really a large gallery, that's why I thought about
that solution. Those concerns you refered, like blocking content, all
make perfect sense, I agree with them and where taken on consideration
while developing the site. In this case, however, it would be a nice
"trick" to give the extra bonus to the site user without the need of a
"Click to see", "Click to close" cycle. Those are just like a sneak
peak at the magazine's content to help them make a decision to buy.
They don't have to leave the page, allow a popup or click anything at
all, if they want to see, just mous over the zoom. The idea behind the
small "zoom" button was to not "fire away" the big images when the
mouse rolls over the thumbnails (that would be really annoying), after
testing this solution we found that it was nice.

Thanks for your ideas.

--
Rui

mark.it.here (AT) gmail (DOT) com wrote:

http://www.myfilestash.com/userfiles/myed/index.html

It only works well in Opera, Firefox, Safari and IE7 however I have
two problems:

1. Doesn't work on IE6. Has you imagine I'm looking for full browser
compatibility (don't laugh :P);

IE6 doesn't do :hover on elements besides <a>. However, I see that your
CSS includes rulesets for .popup_left, but the HTML doesn't include that
style. So much for my quick answer. :-( What happens if you
specifically say "a.popup_left" in the CSS everywhere you have
".popup_left"? (Sorry I don't have time to research this better for you.)

Wait a minute: *what* doesn't work? It seems to work okay on my IE6.
What's the specific problem, exactly?

2. When you put your mouse over the "Zoom" button, the big picture
stays below the other "zoom" buttons (check out the link).

Your buttons:
..poptrigger { z-index: 100; }
Your large images:
..popup:hover { z-index: 50; }

100 > 50

(although I kind of like the earring effect... :-) )

BTW: Your page has no <title>, a non-quirks mode doctype might help you,
you're mixing in XHTML tag closers on an HTML page, and you don't need
to "comment out" your embedded CSS. LBNL: Your CSS has validation errors
(top: 30.

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

Your buttons:
.poptrigger { z-index: 100; }
Your large images:
.popup:hover { z-index: 50; }

100 > 50

Hi,

I've already changed this values and it still doesn't work how it was
supposed (or as I intended). You can check out the link I already
uploaded the changes.

Thanks anyway.

--
Rui

Your popup images extend below the viewport in my browser, and when I
attempt to scroll down to see the whole image, it disappears.

I guess I'll have to make the large pictures a bit smaller, sorry.

..and just as annoying when the mouse passes over the Zoom button, while
on the way to click the Back button.

We did try two options. One with a mouse-over on thumbnail and other
with mouse-over on small button. We decided that the small button
wouldn't get in the way, at least not that often so that it would get
annoying.

If more people come out with your opinion, we will eventually change
the "mouse-over" to a "click". However, the overlapping problem
remains.

Thanks.

--
Rui

mark.it.here (AT) gmail (DOT) com wrote:

Your buttons:
.poptrigger { z-index: 100; }
Your large images:
.popup:hover { z-index: 50; }

100 > 50

Hi,

I've already changed this values and it still doesn't work how it was
supposed (or as I intended). You can check out the link I already
uploaded the changes.

Thanks anyway.

Well, no, as I write this, the published code has not been changed. No
z-index changes, no doctype change, no validation. Did you forget to
upload the changed code?

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

On 6 Ago, 16:00, John Hosking <J... (AT) DELETE (DOT) Hosking.name.INVALID>
wrote:

mark.it.h... (AT) gmail (DOT) com wrote:
Your buttons:
.poptrigger { z-index: 100; }
Your large images:
.popup:hover { z-index: 50; }

100 > 50

Hi,

I've already changed this values and it still doesn't work how it was
supposed (or as I intended). You can check out the link I already
uploaded the changes.

Thanks anyway.

Well, no, as I write this, the published code has not been changed. No
z-index changes, no doctype change, no validation. Did you forget to
upload the changed code?

--
John
Pondering the value of the UIP:http://blinkynet.net/comp/uip5.html

I did a remake of the page and uploaded.

Actually it is working in IE6... so no problem there.

There's only that thing of the zoom button appearing in front of the
large images.

If I place the "a." before the popup styles, the buttons disappear. So
no solution there.

Now it's there, I checked.

Thenk you.