468,530 Members | 1,603 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

Another css-popups problem

Nik
I'm trying to combine css-popups with an images-in-inline-lists gallery.

The problem I see with
http://www.niksally.f2s.com/upload/gallery/gallery.html

is that the images jog when the mouse goes over the first <imgin each
line. This appears in FF2 (and 1.0) but not in IE6. The images return
to their original position only when another <imgis mouse-overed
(moused-over??), not when the mouse leaves the first.

I've prepared a minimum test case at
http://www.niksally.f2s.com/upload/g...line_test.html - this
doesn't show the same problems, but I'd be grateful for any pointers as
to where to start looking when I try to re-construct this to my final
design.

TIA,

Nik
Nov 22 '06 #1
7 1423
Nik
Nik wrote:
>
I've prepared a minimum test case at
http://www.niksally.f2s.com/upload/g...line_test.html - this
doesn't show the same problems, but I'd be grateful for any pointers as
to where to start looking when I try to re-construct this to my final
design.
Correction: The minimised test-case does show the same jogging if the
window is narrow enough to force the list onto three lines. On my
system the is around 1000px. The jogging is not entirely consistent, as
far as I can tell.

Nik
Nov 22 '06 #2
Nik wrote:
Nik wrote:
>I've prepared a minimum test case at
http://www.niksally.f2s.com/upload/g...line_test.html - this
doesn't show the same problems, but I'd be grateful for any pointers
as to where to start looking when I try to re-construct this to my
final design.
Correction: The minimised test-case does show the same jogging if the
window is narrow enough to force the list onto three lines. On my
system the is around 1000px. The jogging is not entirely consistent, as
far as I can tell.

Nik
Your div#innerbox has an overflow: hidden; rule. What do you need that
for? What do you suppose it gives you?

If you take it out, does it fix the problem for you, as it seems to for
me? Does it cause some other problem?

--
John
Nov 23 '06 #3
Nik
John Hosking wrote:
>

Your div#innerbox has an overflow: hidden; rule. What do you need that
for? What do you suppose it gives you?

If you take it out, does it fix the problem for you, as it seems to for
me? Does it cause some other problem?
John,

Thank you for looking at this.

The innerbox overflow:hidden means that for *very* narrow windows the
images will go behind the right-hand border rather than over it. It's
appropriate for other pages that contain only a single image rather that
the inline-list. On the Gallery page it requires a window down to about
475px wide.

I have Spartanicus' resizing of images in columns [1] on my to-do list,
so I wouldn't need the overflow setting when I've sorted that.

I took out the overflow:hidden from the CSS and I still see the jogging.

Nik

[1: http://homepage.ntlworld.ie/spartani...in_column.htm]
Nov 23 '06 #4
Nik wrote:
John,

Thank you for looking at this.
Sure, glad to, Nik. I'm learning a lot.
The innerbox overflow:hidden means that for *very* narrow windows the
images will go behind the right-hand border rather than over it. It's
appropriate for other pages that contain only a single image rather that
the inline-list. On the Gallery page it requires a window down to about
475px wide.
I took out the overflow:hidden from the CSS and I still see the jogging.
So sorry to hear that. I could have sworn it was working for me.

But don't despair; I've fixed it again ;-)

Unfortunately, although I think I can describe what happens, I can't
satisfactorily explain the causes behind it all (so CSS is a lot like
life for me).

After much poking in your CSS (with the Web Dev Toolbar addon in FF) and
trial-and-error, I came up with the theory that the jumping is from
space being made for the imagetext, which you then position absolutely.
Now, it seems as though that shouldn't happen, because your
absolutely-positioned element should be out of the normal flow, and
shouldn't affect the layout of other elements. But it seemed to anyway.

Your only rule for .imagetext is display:none, but it's not absolutely
positioned, so I thought maybe if I "positioned" it (even though it's
not displayed), it might stop the jumping. This is also stupid, because
display:none ought to have no effect on the layout (I thought) and in
http://www.w3.org/TR/CSS21/visuren.html#propdef-display it clearly says,

/Please note that a display of 'none' does not create an invisible box;
it creates no box at all. CSS includes mechanisms that enable an element
to generate boxes in the formatting structure that affect formatting but
are not visible themselves. Please consult the section on visibility for
details./

But I can't be bothered with facts and rules, so I played some more, and
found some success. I came up with this CSS for your simplified example
at http://www.niksally.f2s.com/upload/g...line_test.html

li {display:inline; margin 5em auto;}
a span.imagetext {
position:absolute;
top:.2em; left:0em;
color:black;
visibility:hidden; }
a:hover span.imagetext {
position:absolute;
display:block;
top:.2em; left:8em;
color:blue;
visibility:visible; }

I ended up throwing display:none right out and using a visibility
toggle. You'll see I also positioned the imagetext in both the non-hover
and hover cases. (The colors aren't important when vis is hidden, but it
was interesting to have them during my tests.)

So in your real main page at
http://www.niksally.f2s.com/upload/gallery/gallery.html , try replacing
display:none with visibility:hidden, and adding any positioning that
seems necessary to make it work. Also add visibility:visible; to the
hover selectors.

Does *that* help you?

--
John
Nov 23 '06 #5
Nik
John Hosking wrote:
>Thank you for looking at this.
Sure, glad to, Nik. I'm learning a lot.
That's you and me both, then.
I came up with this CSS for your simplified example
at http://www.niksally.f2s.com/upload/g...line_test.html

li {display:inline; margin 5em auto;}
a span.imagetext {
position:absolute;
top:.2em; left:0em;
color:black;
visibility:hidden; }
a:hover span.imagetext {
position:absolute;
display:block;
top:.2em; left:8em;
color:blue;
visibility:visible; }

I ended up throwing display:none right out and using a visibility
toggle. You'll see I also positioned the imagetext in both the non-hover
and hover cases. (The colors aren't important when vis is hidden, but it
was interesting to have them during my tests.)

So in your real main page at
http://www.niksally.f2s.com/upload/gallery/gallery.html , try replacing
display:none with visibility:hidden, and adding any positioning that
seems necessary to make it work. Also add visibility:visible; to the
hover selectors.

Does *that* help you?
I've got the simplified version working with visibility:hidden, as you
suggested. It's at
http://www.niksally.f2s.com/upload/g...test_pass.html

I had a brief play with the 'proper version', but not enough to et it
working, nor enough to say that it won't. I think it may be important
to set the position:absolute on the a element rather than just on the
a:hover. I'll post back when I've had a proper look.

Thanks again,

Nik
Nov 24 '06 #6
Nik
John Hosking wrote:
>
So in your real main page at
http://www.niksally.f2s.com/upload/gallery/gallery.html , try replacing
display:none with visibility:hidden, and adding any positioning that
seems necessary to make it work. Also add visibility:visible; to the
hover selectors.

Does *that* help you?
Great. Amended & uploaded. IFAICT, everything now works. I haven't
tested in IE7 yet, but I'm hopeful.

If anyone fancies exploring more CSS popups, I'm confused by the following:

www.niksally.f2s.com/upload/html.html
www.niksally.f2s.com/upload/gallery.html
www.niksally.f2s.com/upload/detail.html

All the above have CSS popups below the title. These all work well
using Meyer's method.

The gallery.html file requires the use of visibility:hidden in the LH
sidebar, as kindly discovered by John in this thread.

detail.html required me to use the * html hack to give IE6 different
absolute positions for the .imagetext class pop-ups in the LH sidebar,
but worked perfectly well with the display: property.

I started these pages knowing next to nothing about CSS, and I've
learned a lot. I also think I know less than I did before I started.
Does it ever get better?!

Nik
Nov 24 '06 #7
In article <ek**********@gemini.csx.cam.ac.uk>, Nik <ne**@invalid.com>
wrote:
I started these pages knowing next to nothing about CSS, and I've
learned a lot. I also think I know less than I did before I started.
Does it ever get better?!
Get any better? Not as far as I can tell. I now know heaps less about
CSS than when I started 4 years ago. I am however a lot quicker at
making changes and following their effects.

I do have much better CSS tools now, albeit used infrequently. Plus I
sometimes think I understand more parts of what people like Russ Weakley
and John Allsopp are saying when they give presentations at conferences.

--
http://www.ericlindsay.com
Nov 24 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Baby Blue | last post: by
22 posts views Thread by Daniel Déchelotte | last post: by
6 posts views Thread by phil-news-nospam | last post: by
3 posts views Thread by deduction | last post: by
3 posts views Thread by JakDaniel | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by fmendoza | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.