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.
Related
I'm having a problem getting a SPAN (or DIV) inside a button to go to the full height of the button in Firefox (Version 20).
http://jsfiddle.net/spiderplant0/BwwuV/
It works fine in IE10 and Chrome.
Other than just calculating the height for each button and setting it explicitly in px, does anyone know if there is a solution to this?
#id1_container {
display: block;
text-decoration: none;
cursor: pointer;
box-shadow: none;
background: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100px;
height: 100px;
padding: 0;
border: 1px solid green;
}
#id1_container > * {
display: block;
height: 100%;
width: 100%;
background: pink;
}
<button type="button" id="id1_container"><span>hello</span></button>
You need to wrap the button in a div in order for the height to take effect.
<div>
<button type="button" id="id1_container">
<span>hello</span>
</button>
</div>
Working example
To be completely honest with you, the reasoning behind this is still a bit unclear to me, I'm trying to figure it out myself. All I know is this is the only way to fix your issue without a hack like others have suggested.
Since you haven't reset margin and padding for span, it looks like the problem for me. As #Rockafella suggests, using an absolute positioned span would work, hence it appears not ideal for me since your span has 100% width and height. So, try to use an CSS reset code before your markup, like the one offered by Eric Meyer # http://meyerweb.com/eric/tools/css/reset/
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;
}
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
Take the following example:
This is a textarea, with a background image (the grey bar) and a relative positioned div after the textarea with a top offset to move the text in place.
The Markup:
<textarea cols="40" rows="6" class="some_textarea">Hello</textarea>
<div class="message_text">This is a message</div>
The CSS:
.some_textarea {
background: transparent url(gray_bar.png) repeat-x 50% 100%;
width: 99%;
padding: 5px;
margin: 0;
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
border: 1px solid #C3C3C3;
}
.message_text {
display: inline;
color: #999;
font-size: 10px;
position: relative;
top: -21px;
padding: 0 6px;
}
The problem is that Firefox is the only browser that doesn't agree with the offset, and results in this very small pixel pushing annoyance:
What is causing this? How can I fix this for consistency? What non-clunky workarounds exist if it can't be fixed?
UPDATE
http://jsfiddle.net/UnsungHero97/maHkr/7/
How about something like this...
http://jsfiddle.net/UnsungHero97/maHkr/2/
What I did was wrap your textarea/message combo in a relatively positioned div and then absolutely positioned the message to the bottom left. You can play round with the exact positioning/margins/paddings to get it looking good across the browsers.
I hope this helps.
Hristo
use jQuery(window).load() instead of jQuery(document).ready()
I have a div with overflowing content. I want the overflowing content to be VISIBLE on all browser. Works nice except for IE7...
I have been trying for a while and was not able to find any info on showing the overflowing content, so I'm hoping someone can help:
Here is the code:
<div class="ui-btn-inner">
<p>hlasd asdasd asdasd lkasdas dalksd ahljklnlnad asljdhasdnas dalsdkjas I am invisible... </p>
</div>
and CSS
.ui-btn-inner {
border: 3px solid red;
padding: 0 !important;
position: relative;
text-align: center;
}
.ui-btn-inner {
height: 22px;
margin-bottom: 22px;
background-color: transparent;
width: 100%;
top: 0;
left: 0;
overflow: visible;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40FFFFFF,EndColorStr=#12FFFFFF);zoom: 1;
}
And as JSfiddle - JS Fiddle where is my overflow in IE7
Thanks for help!
The problem is being caused by your filter:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40FFFFFF,EndColorStr=#12FFFFFF);
Unfortunately this is just the way IE7 handles the use of filters and there is no fix for it.
You might consider using a conditional comment to target IE7 only to remove the filter.
The default value for 'overflow' property is 'visible'. I think just removing the 'overflow: visible;' style would help.