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
