CODEWITHSUNDEEP
css
JonH
JonH

Reputation: 33143

Large whitespace caused by hidden li items?

I've got a menu that pops out of a list item. Something to this effect:

 <li>
          <ul class="topmenu">
              <li class="submenu">
                  <a class="otherIT" href="#" title="Common IT Tasks"><img src="./images/ittasks.png" alt="Common IT Tasks" /></a>
                  <a class="otherIT" href="#" title="Common IT Tasks">Other - Common IT Tasks</a>
                  <p>Most common IT tasks.</p>
                    <ul class="subsubmenu">
                        <li>
                            <a href="http://myURL.aspx/logticket.aspx" target="_blank" title="Log a ticket.">Log a ticket</a>
                        </li>
                        <li>
                            <a href="./batches/drives.bat" title="Run drives.bat file.">Map drives</a>
                        </li>
                        <li>
                            <a href="./batches/unlock.bat" title="Unlock a user's account.">Unlock a user</a>
                        </li>
                    </ul>
              </li>
          </ul>
      </li>

Immediately underneath this li item I have this:

 <li class="break">
        <a href="#" title="Back to top" class="backtotop" style="font-size:x-small;">Back to top</a> 
      </li>

When I don't hover over the li item it gives me this effect:

enter image description here

When I hover over this li item it gives me this effect:

enter image description here

Great the menu works, my issue is the gap between the word "Back to top" with the li item, it is fairly large. I believe it is due to the invisible li items of the list. For anyone interested, the CSS is something to this effect:

ul.topmenu, ul.topmenu ul {
  display: block;
  margin: 0;
  padding: 0;
}

ul.topmenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding-right: 1.5em;
}

ul.topmenu li ul {
  visibility: hidden; }

  ul.topmenu li.submenu:hover ul {
  visibility: visible;
}

Simple classic visibility is hidden unless you hover, however, the whitespace between the word "Back to top" with the list item is too large.

Upvotes: 0

Views: 1558

Answers (4)

Mohammad Masoudian
Mohammad Masoudian

Reputation: 3491

visibility : hidden only makes the element invisible, but does not remove it from the page flow. display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way)

ul.topmenu li ul
{
    display: none;
}

ul.topmenu li.submenu:hover ul
{
    display: block;
}

Upvotes: 1

federicot
federicot

Reputation: 12341

Use the CSS display: none rule instead of visibilty: hidden, because you want your tag to not be displayed at all, you don't want a blank space allocated in it's place (see). From the W3 docs:

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.

Also, what does the W3 validator say about your HTML?

Upvotes: 0

Ennui
Ennui

Reputation: 10190

visibility: hidden only makes the element invisible, but does not remove it from the page flow.

display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way).

Upvotes: 3

vmg
vmg

Reputation: 10566

visibility:hidden do not show element, but still reserves space for it.

Try display:none

Upvotes: 0

Related Questions