I have a table inside a couple of nested divs. One column holds an image whose width makes the total width of the page wider than the display and the horizontal scrollbar shows.
This cell is from an asp.net ajax popup (on mouseover) and is hidden via javascript, so the scrollbar isn't needed.
Is there a way via css/xhtml to make it so that the scrollbar doesn't show? I am sure that the width of the table cell is causing the problem because when I remove it, the scrollbar is gone. The image element is nested in a div. I tried overflow: hidden and manipulating the table cell widths - neither worked, at least without altering the widths of the images.
Thanks in advance.
I can't say I'm sure why you'd be getting a scrollbar with overflow:hidden, but here's the trick I use to have mouse-over popups:
HTML:
<div><a href="#" class="showtooltip">Text you want visible at all times. <div
id="tooltip">elements you want for mouse tooltip</div></a>
CSS to format links:
a:link .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:active .{
//CSS
}
Your CSS will likely be the same for all of those next up we need to set the CSS for the tooltip:
a:link .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:visible;
//CSS to properly position and size div
}
a:active . div{
visibility:hidden;
}
You can then have your ajax write to document.getElementById('tooltip')
I should have mentioned the fact that this problem only occurs in IE7 and not in FF3. Anyways, the following link illustrates the bug I ran into. Hope this helps anyone else who runs into this problem.
http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
Related
I stumbled over a strange behaviour that occurs in Chrome and Firefox when you have got an element with "position:relative;" and "overflow:hidden;" and an anchor in it with "position:absolute;".
Whenever the anchor gets focus the element above it magically jumps to the top, even though its styles and markup tell a different story.
Example: http://codepen.io/mediadivisiongmbh/pen/pJWmxp
All you need is a setup similar to this:
HTML
<div class="container">
<h1>I can fly</h1>
<a class="focus-me" href="#">Evil Link</a>
</div>
CSS
.container {
position:relative;
overflow:hidden;
/* Optional */
border:1px solid gray;
}
.focus-me {
position:absolute;
}
Thanks for your answers so far. In order to clarify the issue please take a look at this example:
http://codepen.io/mediadivisiongmbh/pen/bdRjKy
When you hover over the container, the absolute positioned element containing the anchor will transition in view. When you click on it a lightbox (in this case Magnific Popup) is opened. After you close this lightbox the anchor gets focus again and jumps into view, which looks pretty odd.
Setting the anchor to display:none by default and display:block when hovering over the container worked for solving this issue.
After more research I figured out that the problem is caused by an accessibility feature in chrome.
In my case I just needed to make sure the anchor tag is only accessible while hovering over the container element.
Therefore the solution was altering the CSS like this:
.container {
position:relative;
overflow:hidden;
/* Optional */
border:1px solid gray;
}
.focus-me {
position:absolute;
display:none;
}
.container:hover .focus-me {
display:inline-block;
}
I'm not pretty clear about what you're looking for since you have different story. But if you mean you want to prevent jump because of focus on your link, you can use tabindex="-1" on your link to makes it not accepting tab stop. Check the Updated Pen
EDIT
Well when seeing your pen, I think you need to set display: none to your evil link and set it to display: inline-block when hovering to your container. Check Updated Pen.
I have made a menu that 'popups' on hover when javascript is disabled. However this is working ok, the menu shows a scrollbar when the menu is to large to fit into the viewport (window).
When it popups on hover there are two scrollbars, one of the window and one of the menu. Looks very ugly and can confuse the user.
With javascript enabled I apply a .noscroll class to the body so there only one scrollbar.
.noscroll { overflow:hidden !important; }
Tried to do this with CSS only but can't get it to work, tried several things like:
.nav .panel:hover > body,
.nav .panel:hover > html { overflow:hidden !important; }
.nav .panel:hover #body { overflow:hidden !important; } /* body with id body */
The menu itself is fixed positioned. The reason I do it this way is to be sure the menu covers the whole window because height:100% doesn't want to cover the whole document and it's very ugly. Also, the search bar will be always visible.
How can achieve the effect I want?
Image (click on right mousebutton to view larger image):
This can't be done with current CSS rules. You can only apply rules to children of the specified element, not parents. See https://stackoverflow.com/a/1014958/1034613 for specifics. For now, you will have to stick to Javascript for that.
I usually dont have problems with css, and I'm made this nav menu myself but I just can't seem to understand why it will not show my div when I hover over an item ... I create a jsfiddle # http://jsfiddle.net/LuLTM/ with all the code as well ...
#beautyworld #beautyhealth {display:none;}
#beautyworld #beautyhealth:hover {color:black;display:block!important}
I want when hover over div #beautyworld for the div #beautyhealth to appear ... I just dont understand why my css is not working .... Could someone please advise ? Thank You
I think the problem is that you are trying to have fire a hover over something that is currently 'display:none'. Since display none collapses the element, there is nothing to hover. You heed to have it hover at a relative parent level to cause the display of the child.
For example:
#beautyworld > div { display:none; }
#beautyworld:hover > div { color:black; display: block !important; }
Here I've got a jquery menu which is working perfectly. But Ive given it a fixed width of 400px and so what happens is that if I add more than certain number of links to the main ul they will flow in the next line and that is absolutely not desired.
I tried overflow:hidden and line-height to somehow overcome the issue BUT NO RESULT anyway.
Here is the menu : http://jsfiddle.net/b5Wdc/
As you see there, the red color link flows on the next line and that is the problem.
What do should I write to hide the overflown links in this situation?
Thank you all anyway.
From our conversation in the comments on the question, it seems that your menu is completely fixed and any "extra" items should always be hidden and there is no dynamic display or wrapping required. So you can just use CSS to hide all menu items that you know won't fit in. Since a menu item has a width of 99px and the menu is 400px you know you will only ever show 4 items. This purely CSS will hide the rest:
.HeadMenu #nav > li:nth-child(n+5) {
display:none;
}
However it requires a minimum of IE8 for the nth-child CSS selector support.
Since you mentioned jQuery in the question you could accomplish the same in JavaScript if you need to support IE8 with:
$('.HeadMenu #nav > li:nth-child(n+5)').hide()
Alternatively, keep the CSS solution (as it's cleaner) and use selectivizr to bring nth-child selector support to IE8.
if you change your styles to the following i think it may work:
.HeadMenu .HeadMenuMain
{
display:block;
position:relative;
margin:0;
width:400px;
padding:0;
direction:rtl;
height:40px;
white-space:nowrap; //will make elements stay on one row
}
.HeadMenu .HeadMenuMain li
{
display:inline-block; //will make elements stay on one row with the nowrap
list-style:none;
position:relative;
}
http://jsfiddle.net/b5Wdc/2
Adding an overflow:hidden to the navigation menu will do the trick:
.HeadMenu #nav {
overflow: hidden;
}
I'm trying to use only css to turn a nested div and a normal div into something where the top one can be hovered to view more content without moving all the layout around.
Essentially:
[hover me for more]
[content-that-gets-overlapped-by-hover-content]
or see the nearly-working example on jsfiddle:
http://jsfiddle.net/tchalvakspam/vVgY2/9/
Unfortunately, when you do overflow:visible, it seems to be nearly useless because you can't give the content that overflows any background style, so it remains unreadable.
Is that right, there is no way to give overflow:visible overflowing content a background? If that is the sad state of affairs, what is the shortest amount of changes that could be done to that content to turn it into a readable hover-to-expand section?
Finally found the solution in the form of a sibling selector on the hover to give the next element after the hovered element a margin to take the place of the now-absolute hover element.
http://jsfiddle.net/tchalvakspam/MBcDW/
So the pertinent css becomes:
#fixed-height{
position:relative;
width:100%;
height:1.25em;
overflow:hidden;
background-color:lightblue;
color:red;
z-index:10;
}
#fixed-height:hover{
overflow:visible;
height:auto;
position:absolute;
max-width:20em;
}
#fixed-height:hover + #right-below{
margin-top:1.25em;
}