Hidden Elements Cause Page Overflow

  • HotSpot
  • Born
  • Born
  • HotSpot
  • Posts: 2

Post 3+ Months Ago

Greetings everyone! This is my first post :)

I have a page where I have placed 'hover-based' context menus by means of conditionally invisible <span> tags at the end of my page.

The problem is that the content inside some of the context menus exceed the length of the content that is visible on the page. This leaves a blank area at the end of my page (thats where i have placed all those invisible span tags for my context menu). I want to get rid of this blank area :?

Any info is highly appreciated. Thanks!
  • lostboy
  • Expert
  • Expert
  • lostboy
  • Posts: 511
  • Loc: Just north of Toronto

Post 3+ Months Ago

place them in a div and position the div
  • Kootenay
  • Born
  • Born
  • Kootenay
  • Posts: 1

Post 3+ Months Ago

Elements within the hidden div can also cause a page to run long with their overflow, even if the div is positioned.

If you code it like <div style="height:0;overflow:hidden;visibility;hidden;"> that should solve the problem.

Cheers, Kootenay
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Use display instead of visibility ?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

wouldn't it also then be "display:none" instead of "display:hidden" ... ?
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

righteous_trespasser wrote:
wouldn't it also then be "display:none" instead of "display:hidden" ... ?

Instead of using either of these, it might also work to just set the size of the div to 0px by 0px and then back to normal size in the hover state.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

jameson5555 wrote:
righteous_trespasser wrote:
wouldn't it also then be "display:none" instead of "display:hidden" ... ?

Instead of using either of these, it might also work to just set the size of the div to 0px by 0px and then back to normal size in the hover state.


If it's 0px by 0px there is nothing to hover over to bring it to normal state. (Just the same as "display:none;")
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Good point bogey.
I was under the impression a different element was the one triggering the event.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

Is this what you want?

Code: [ Select ]
overflow: hidden;
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Bogey wrote:
If it's 0px by 0px there is nothing to hover over to bring it to normal state. (Just the same as "display:none;")

Hmm.. good point... I guess it'd be easier to say if we had some code to look at.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

I think he means something like this example... "the content inside some of the context menus exceed the length of the content that is visible" to quote him word for word.


Code: [ Select ]
<div style="width: 100px;">
ksajfhksdfhjfdsjksajfhksdfhjfdsjksajfhksdsdlkihfskhfkjsfhglfdsahjghfdlgsdjfhgjjjf
</div>
  1. <div style="width: 100px;">
  2. ksajfhksdfhjfdsjksajfhksdfhjfdsjksajfhksdsdlkihfskhfkjsfhglfdsahjghfdlgsdjfhgjjjf
  3. </div>
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Adding a "float" would do the trick to I imagine.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

jameson5555 wrote:
I guess it'd be easier to say if we had some code to look at.


Some code may help as well though...

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 20 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.