This CSS works in IE8 and newer (and in Chrome), but not in IE7. Specifically, the tooltip just doesn't appear when I hover over the div. What do I need to change for IE7 (and IE6)?
.headertooltip, .headertooltip:visited
{
color: #0077AA;
float: left;
height: 40px;
text-decoration: none;
width: 20px;
}
.headertooltip div
{
background-color: black;
color: #fff;
left: 50px;
padding: 5px 10px 5px 40px;
position: absolute;
text-decoration: none;
top: 82px;
visibility: hidden;
width: 900px;
z-index: 10;
}
.headertooltip:hover div
{
position: absolute;
visibility: visible;
}
UPDATE:
I've updated the code to use mouse events to show the div/tooltip, but that still isn't working in IE7. That makes me think the problem lies in my markup/CSS.
I tried to create a sample in jsFiddle. It doesn't work, but you get the idea. Hovering the mouse over the little black box on the left (which I added just so you can see the target) should make the tooltip appear.
http://jsfiddle.net/szyN4/
IE6 has minimal support for the :hover pseudo class, and IE7's is incomplete.
Try and change the .headertooltip:hover div to .headertooltip div:hover to please the oddities of IE's bubbling mechanism. It may solve your issue (you'll have to include it in a conditional stylesheet for IE7 only, of course).
You may also use JavaScript to sidestep this by implementing mouseenter and mouseleave. See a posted answer of mine on IE's innovation regarding mouse events for a quick reference.
References
CSS support table on quirksmode
mouseover and mouseout on quirksmode
Related
I have a button with an element inside it that receives box-shadow:
button {
padding: 0;
border: 0;
margin: 0;
overflow: visible;
-webkit-appearance: none;
background: white;
}
.shadow {
display: inline-block;
vertical-align: middle;
height: 40px;
width: 40px;
border-radius: 20px;
background: #dddddd;
box-shadow: 0 0 20px black;
}
<button>
<span class="shadow"></span>
<span>Some Text</span>
</button>
In Safari, this shadow gets cut off at the edge of the <button> element and looks like this:
As you can see I tried -webkit-appearance: none and overflow: visible already. I've also found that this issue does not occur if I change the button to a div, but this is meant to be an interactive element so for accessibility reasons it's not a good idea.
In searching for this issue I haven't found much help so far but I'm wondering if anyone might know of any recent workarounds or Safari CSS hacks that could help with this.
I did some more searching (for non-box-shadow-related clipping on buttons in Safari) and found a simple solution.
Adding position: relative to .shadow lets the element extend beyond the bounds of the <button> tag in Safari. It sounds like this would also work for text overflowing and such.
I am having a confused day.
If you look at at this page, and view its source code: http://tinyurl.com/npawot5
You will realise that it has a CSS in its header to deal with a single form field.
The problem is that before making modifications to the CSS, I was seeing an image on the page. But now, the image is lost in the background, and you are only seeing the form field in Chrome etc, but not internet explorer.
So no image in any browser, and no form in internet explorer.
Anyone has an idea what can be causing this mess?
Thanks
#bv_Image1 {
overflow:hidden; <--remove
}
img {
opacity: 0; <--remove
}
Internet explorer versions 9 or less have weak or none support for rgba colors. Use hex colors instead. Be sure that you have browser and document mode compatible (press f12 in internet explorer and see).
If you want to create gradients for all browsers (again ie8 or less have weak or none support) use this link and be sure to enable ie9 support.
collorzilla
You can't nest CSS the way you are. And you can't do the :after pseudo selector on &. It seems like you may be trying to use compiled CSS, but it is not being parsed.
.coming-soon {
height: 105px;
left: 50%;
margin-left: -172px;
margin-top: 35px;
overflow: hidden;
position: absolute;
top: 30%;
&:after { /* This is not allowed and shouldn't be nested here */
border-radius: 100%;
box-shadow: 0 -10px 10px 0 rgba(0,0,0,0.3);
content: "";
left: 15px;
position: absolute;
height: 10px;
top: 109px;
width: 320px;
}
}
I have a text which on hover displays another (otherwise hidden) text elsewhere, like this:
HTML
<div class="design">hover me<span>to show this</span></div>
CSS
.design {
position: absolute;
z-index: 2;
color: #404040;
}
.design:hover {
cursor: pointer;
}
.design span {
position: absolute;
display: none;
}
.design:hover span {
display: block;
top: 47px;
left: 45px;
font-family: Arial;
font-size: 13px;
color: #000;
}
How can apply transition effects to the text which is hidden or shown depending on the hover? Apparently transition conflicts with display:none and :block, but using visibility doesn't seem to work either.
edit: jsFiddle - http://jsfiddle.net/vwsgJ/
First method
I have managed to achieve what you wanted using opacity, according to (I think) MDN (Mozilla Developer Network) you can't transition display. I also rearranged your css slightly:
http://codepen.io/hwg/pen/xFDIl - Working Code.
CSS:
.design span {
position: absolute;
opacity:0;
transition: opacity 1s;
display: block;
top: 47px;
left: 45px;
font-family: Arial;
font-size: 13px;
color: #000;
width:0;
height:0;
margin-left:-1000px;
}
.design:hover span {
opacity:1;
/*transition: all 1s;*/
width:30px;
height:auto;
margin-left:0;
}
Note that codepen.io uses prefix-free, see http://caniuse.com/css-transitions for browser support, prefixes may have to be added.
Edit- to avoid the OP's problem below, add: width:0; height:0; to the un-hovered element, and a pixel width/height such as width:30px; height:auto; on hover. (See example) There is if you hover over precisely that area you see the hover effect, but in practice this would be very rare in my view, also this can be solved by the use of margin left if needed.
Note: this stops the transition on mouse out.
New Method
To avoid the problem mentioned above, the property pointer-events:none can be added to the span. This removes the need to have any negative margins, or custom widths or heights.
See http://codepen.io/hwg/pen/BojpK
However, this is not supported in IE-anything, see css 'pointer-events' property alternative for IE for maybe more help.
Otherwise I don't think the OP's aim can be completely met.
I have an issue regarding a div with overflow: hidden. It is positioned relative and it's child div is positioned absolute. On hover, the parent div changes from overflow:hidden to overflow:visible. This enables the child div to display properly.
The issue: although everything else works just great, when the mouse is no longer over the parent div (thus overflow is now hidden again), bits of the child div are still shown in their place. They are not actually displayed, because if I select some text or objects near them the dissapear completely. It's as if the page needs a "refresh" of some kind.
Has anyone else come accross this? I'm kind of stuck on this...
UPDATE: I made a jsfiddle with the issue and realised it's only occuring on webkit based browsers (Chrome and Safari). I still have no idea why, though...
<div class="list-name">
<ul>
<li class="truncated">
<a href="">
Hover me to see all the magic thext I'm hidding
</a>
</li>
</ul>
</div>
It would seem that an extra overflow:hidden added to the hyperlink solves the issue. Check it out in this fiddle.
That looks like a bug in rendering, not why it works like that. Developer tools show it like mouse is still hovered above the element. Possibly there some element became to wide/high and mouse out event can't happen. But if you remove position:relative;, position:absolute; and replace top/left with margin-top/margin-left - everything works nice to me:
http://jsfiddle.net/Nt5bN/13/
CSS:
.list-name ul {
margin: 50px;
padding: 0;
list-style: none;
}
.list-name li {
display: block;
float: left;
width: 60px;
height: 29px;
overflow: hidden;
background: #eee;
}
.list-name a {
width: 300px;
display: block;
float: left;
}
.list-name li.truncated:hover {
overflow: visible;
}
.list-name li.truncated:hover a {
margin-top: -3px;
margin-left: -8px;
background: #fff;
z-index: 9999;
padding: 2px 0 2px 7px;
border-radius: 3px;
border: 1px solid #ddd;
}
My default page works fine in ie but Firefox it has problems with the a:link.
At my page http://www.printer-ink-toner.co.uk and half way down is a link to my status on ebay.
For Firefox this link does not work and for ie it does. I can reproduce this behavior on my development PC also.
The link is contained in a float div block called "centercol50pct" which has CSS of
.centercol50pct {
position: relative;
float: left;
width: 380px;
margin:0px 5px 0px 0px;
}
If the float:left; is removed it works fine. changing any other parameter does not have an effect on the problem.
In addition the search drop downs do not work in Firefox either. I assume it is related but thought I would try and solve the more simple 'a link' problem first
Thanks
Nigel
The centrecolLowerblock div was covering up the above content, therefore making the link unreachable.
Change
#centrecolLowerblock {
position: relative;
top: 20px;
}
to
#centrecolLowerblock {
clear: both;
position: relative;
top: 20px;
}
Also your dropdowns are not working due to the same problem (an element is overlapping them). Try changing.
h3.h3_Largeblue {
color: blue;
font-size: 20px;
}
to
h3.h3_Largeblue {
clear: both;
color: blue;
font-size: 20px;
}
That should sort the problem's :)