Hidden images take up space?

Discussion in 'HTML' started by harry, May 15, 2004.

  1. harry

    harry Guest

    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
     
    harry, May 15, 2004
    #1
    1. Advertising

  2. harry

    SpaceGirl Guest

    "harry" <> wrote in message
    news:MFmpc.116$...
    > 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();" />
     
    SpaceGirl, May 15, 2004
    #2
    1. Advertising

  3. harry

    Steve Pugh Guest

    "harry" <> wrote:

    >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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, May 15, 2004
    #3
  4. harry wrote:

    > 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

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
     
    David Dorward, May 15, 2004
    #4
  5. harry

    harry Guest

    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

    "Steve Pugh" <> wrote in message
    news:...
    > "harry" <> wrote:
    >
    > >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
    >
    > --
    > "My theories appal you, my heresies outrage you,
    > I never answer letters and you don't like my tie." - The Doctor
    >
    > Steve Pugh <> <http://steve.pugh.net/>
     
    harry, May 15, 2004
    #5
  6. harry wrote:

    Please read http://www.allmyfaqs.com/faq.pl?How_to_post before responding.

    >> > <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...


    > 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.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
     
    David Dorward, May 15, 2004
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Doug

    make a div take up space

    Doug, Aug 21, 2004, in forum: HTML
    Replies:
    1
    Views:
    494
  2. Shuo Xiang

    Stack space, global space, heap space

    Shuo Xiang, Jul 9, 2003, in forum: C Programming
    Replies:
    10
    Views:
    2,914
    Bryan Bullard
    Jul 11, 2003
  3. Christian Seberino
    Replies:
    21
    Views:
    1,680
    Stephen Horne
    Oct 27, 2003
  4. Ian Bicking
    Replies:
    2
    Views:
    1,030
    Steve Lamb
    Oct 23, 2003
  5. Ian Bicking
    Replies:
    2
    Views:
    730
    Michael Hudson
    Oct 24, 2003
Loading...

Share This Page