Hidden images take up space?

H

harry

Using IE 5.5 (sp2) ONLY!

My page is layed out using a table. The bottom row contains 8 images
(buttons) that are hidden/ made visible depending on what the user does.

the trouble is even though the page is initially displayed showing 4 images
the other other hidden ones seem to take up some space & increases the row
height as it wraps around.

CSS style -

..hidden{
visibility:hidden;
}

Image code (+ another 7 more ) -

<span id="actionlist" class="hidden">
<a accesskey="n" tabindex="-1" href="#"
onFocus="blur();searchActions();"></a>
<img alt="Return to escalated action list" src="buttons/newsearch.gif"
onClick="searchActions();"></img>
</span>

Hide/show js functions -

function showObject(id)
{
getElement(id).style.visibility = 'visible';
}

function hideObject(id)
{
getElement(id).style.visibility = 'hidden';
}

function getElement(id)
{
return document.getElementById(id);
}

Any ideas how to make them compact? - tried changing them to DIV's but makes
it even worse!

thanks

harru
 
S

SpaceGirl

harry said:
Using IE 5.5 (sp2) ONLY!

My page is layed out using a table. The bottom row contains 8 images
(buttons) that are hidden/ made visible depending on what the user does.

the trouble is even though the page is initially displayed showing 4 images
the other other hidden ones seem to take up some space & increases the row
height as it wraps around.

CSS style -

.hidden{
visibility:hidden;
}

Image code (+ another 7 more ) -

<span id="actionlist" class="hidden">
<a accesskey="n" tabindex="-1" href="#"
onFocus="blur();searchActions();"></a>
<img alt="Return to escalated action list" src="buttons/newsearch.gif"
onClick="searchActions();"></img>
</span>

Hide/show js functions -

function showObject(id)
{
getElement(id).style.visibility = 'visible';
}

function hideObject(id)
{
getElement(id).style.visibility = 'hidden';
}

function getElement(id)
{
return document.getElementById(id);
}

Any ideas how to make them compact? - tried changing them to DIV's but makes
it even worse!

thanks

harru


Well you're not supposed to close IMG tags;

<img alt="Return to escalated action list" src="buttons/newsearch.gif"
onClick="searchActions();"></img>

....should be:

<img alt="Return to escalated action list" src="buttons/newsearch.gif"
onClick="searchActions();">

.....or (in XHTML):

<img alt="Return to escalated action list" src="buttons/newsearch.gif"
onClick="searchActions();" />
 
S

Steve Pugh

harry said:
Using IE 5.5 (sp2) ONLY!

Are you? That's nice. Presumably you mean that this is some sort of
intranet project and all the users will be using IE 5.5? Otherwise
this is just useless data about your own browser.
My page is layed out using a table. The bottom row contains 8 images
(buttons) that are hidden/ made visible depending on what the user does.

the trouble is even though the page is initially displayed showing 4 images
the other other hidden ones seem to take up some space & increases the row
height as it wraps around.

CSS style -

.hidden{
visibility:hidden;
}

Read the CSS spec.
visibility: hidden does not remove the element from the page, it just
makes it invisible but still there taking up space.
Use display: none; instead.
Image code (+ another 7 more ) -

<span id="actionlist" class="hidden">
<a accesskey="n" tabindex="-1" href="#"
onFocus="blur();searchActions();"></a>

What's the point of this totally empty link? It can't be clicked on,
it can't be tabbed to, most users don't know about accesskeys...
<img alt="Return to escalated action list" src="buttons/newsearch.gif"
onClick="searchActions();"></img>

If you're only aiming this at IE5.5 then why send it XHTML? Even if
you're using XML tools, when sending the page to tag soup browsers
like IE you should follow the rules in Appendix C of the XHTML 1 spec
(as far as they can be followed).

Steve
 
D

David Dorward

harry said:
My page is layed out using a table.

Oh dear. http://www.allmyfaqs.com/faq.pl?Tableless_layouts
The bottom row contains 8 images
(buttons) that are hidden/ made visible depending on what the user does.

the trouble is even though the page is initially displayed showing 4
images the other other hidden ones seem to take up some space & increases
the row height as it wraps around.

Of course they take up space:

The 'visibility' property specifies whether the boxes generated by an
element are rendered. Invisible boxes still affect layout (set the
'display' property to 'none' to suppress box generation altogether).

-- http://www.w3.org/TR/CSS2/visufx.html#visibility
 
H

harry

Sorry Steve, yes it is an Intranet app & the style guide states app's must
conform to WAI - each button (or image) must have a shortcut key.

This is the only way I've found to do it - it allows for example "alt + n"
to call searchActions(), as theres nothing to tab on to searchActions()
isn't called just by tabbing around the controls & I like to call js
functions before the submit in case I want to check something 1st!

Thanks for replying to all anyway, sorted out my problem now!

cheers
 
D

David Dorward

harry wrote:

Please read http://www.allmyfaqs.com/faq.pl?How_to_post before responding.
Sorry Steve, yes it is an Intranet app & the style guide states app's must
conform to WAI - each button (or image) must have a shortcut key.

The WAI says:

9.5 Provide keyboard shortcuts to important links (including those in
client-side image maps), form controls, and groups of form controls.
[Priority 3]
For example, in HTML, specify shortcuts via the "accesskey" attribute.

It does not say that all links must have access keys. In fact, using letters
for accesskeys is considered harmful by many.

http://www.cs.tut.fi/~jkorpela/forms/accesskey.html

And on the subject of WCAG, it looks very much like some of your content
will be inaccessible for uses with user agents that are processing CSS but
not JavaScript.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,479
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top