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;
}
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 have an issue with this site made under Wolf CMS.
I dont know what happened, but the menu child items are not
showing anymore!. Cant understand why when I add CSS to allow
the display and style it, it doesn't work!
I dont see JavaScript code affecting it..maybe I'm missing something
can somebody advice??
http://goo.gl/PE238a
All the code via CSS i try to apply wont make any effect...
I cant figure out why my css wont render what I need to see...
#team-nav li {
background: none repeat scroll 0 0 red !important;
height: 100px !important;
left: 1px !important;
position: absolute !important;
top: 1px !important;
width: 100px !important;
}
I tried to position absolute and opacity 10 but wont work :(
At the wayback machine http://goo.gl/hYhuHB
i can see the working menu in a captured page of the site....
but there is so much addded code that I get confused..
You need to add the following style to your #nav
#nav {
position: relative;
z-index: 3;
float: left;
margin: 0;
border-bottom: solid 1px #ccc;
width: 700px;
padding-top: 100px;
overflow: initial;<-- Added
}
Since your overflow is hidden and you #nav is position:relative; the submenu which overflows your #nav cannot be displayed. Try the above code that works like a charm. You can also add overflow:visible;
NOTE: Your mobile.css inherits the values of your screen.css. #menu, #nav{overflow:hidden} so your screen.css has to change with #nav{overflow:visible}
I have a list which has round elements in it. They have a image in the background and on hover the other div is supposed to become visible as an overlay. It works so far, however there is still a visible border, indicating that the hovered div is not perfectly overlaying the other rounded element.
HTML:
<ul>
<li>
<div class="hover"></div>
</li>
<li>
<div class="hover"></div>
</li>
<li>
<div class="hover"></div>
</li>
</ul>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
height: 140px;
}
li {
width: 140px;
height: 140px;
margin: 0;
padding: 0;
display: inline-block;
border-radius: 70px;
background: url(http://www.nationalflaggen.de/media/flags/flagge-thailand.gif);
}
.hover {
border-radius: 70px;
width: 140px;
height: 140px;
}
.hover:hover {
background-color: rgba(255,255,255,.9);
}
I added a fiddle since I really don't know how to make them perfectly overlapping.
Thanks for your help.
UPDATED THE FIDDLE:
http://jsfiddle.net/pL9Aa/1
Looks like a sub-pixel problem -- the browser does a bunch of math to determine the smoothness of a curve using square pixels. And sometimes it doesn't render how you might expect.
You can simply remove the border-radius rule from the :hover pseudo class if you are keeping it transparent.
.hover {
width: 140px;
height: 140px;
}
Fiddle
If it needs to be round, I would override your image using the same element, instead of a nested element, like so:
li:hover {
background: white;
}
Fiddle2
You could add:
li:hover {
background:none;
}
to ensure that the background on the li is gone.
It's weird though - does look like a rendering bug.
Assuming that you are going to have text or other content in the overlay, it's worth noting that setting the background to be slightly transparent (e.g. rgba(255,255,255,0.8)) makes the rendering error less noticeable.
Just change #hovers border-radius: 62px;
If your hover is only meant to cover the element, you do not need to put a border-radius on the hover element. Simply removing that line will resolve your issue:
.hover {
width: 140px;
height: 140px;
}
http://jsfiddle.net/pL9Aa/3/
If in the production envirionment you can actually use a background color, you could also use a box-shadow
demo: http://jsfiddle.net/j4NFB/
.hover:hover {
background-color: #FFF;
box-shadow: 0 0 0 1px #fff;
}
I know I have seen this somewhere before, but I am trying to create a black fixed navbar with a marker that is transparent cut-out triangle. I need help getting the triangle cut-out to be transparent to the background, so when you scroll the page, you can see through to the content beneath:
I have a standard list/anchor navigation with a javascript to move the .current class depending upon the page section:
<div class="navbar">
<ul>
<li class="current"><a>home</a></li>
<li><a>products</a></li>
<li><a>services</a></li>
<li><a>contact us</a></li>
</ul>
</div>
styled with the following CSS:
.navbar {
width: 100%;
position: fixed;
background: black;
float: left;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
a {
padding: 10px 20px 20px;
}
.current a {
background: transparent url('../img/wedge-red.png') center bottom no-repeat;
}
The only way I can think to do it is to add extra divs on either side of the ul and assign the background to them, and then use a transparent png with a cutout as the background of the li a's.
Is there a way to do this without getting really ugly like that, and adding extra divs?
Try CSS pseudo elements!
Add 2 free DOM elements before and after an existing element in the DOM. Ideal in cases when you don't want to add stuff to your markup to satisfy styling needs.
CSS Markup
.item:before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: silver;
}
.item:after {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: gray;
}
HTML
<div class="item">Content</div>
Check this JSFiddle for a demo.
Make sure you set content: "" and display:block in order to see them.
Here's what I ended up with -- extending the borders and cropping them with overflow: hidden; (a little hacky, but it works and doesn't add elements to the DOM):
.navbar {
width: 100%;
height: 60px;
position: fixed;
overflow: hidden;
}
ul {
border-left: solid black 2000px;
border-right: solid black 2000px;
position: absolute;
top: 0;
left: 50%;
margin-left: -2000px;
}
The above worked nicely for my purposes, and behaves in a responsive environment.
The other answer on this page, using :before and :after pseudo elements didn't work for my purposes. It ended up being too fussy, the pseudo elements wouldn't align properly, and kept wrapping to the next line when the browser window was resized. That solution as suggested works with fixed-width elements, not percentages as was specified in the original question.
I have a scrollable div on a page that ends up rendering past the bottom of div and sometimes leaves stick characters behind that don't scroll. This happens in IE7 and IE8 in compatibility mode.
Here is the HTML code from the DOM:
<DIV id=ctl00_MainContent_ViewPort class=AgreementViewPort><IMG class=PortSeal src="/images/Seal.png">
<DIV class=DocumentTitle>Document Title</DIV>
<OL>
<LI>Condition #1</LI>
<LI>Condition #2<SUP>1</SUP></LI>
<LI>Condition #3</LI>
<DL>
<DT><SUP>1</SUP> some foot-noted definition.</DT></DL></DIV>
Here's the applied CSS style:
color: #000;
font-family: arial, tahoma, sans-serif
font-size: 12pt;
height: 300px;
margin: 5px;
overflow: scroll;
padding : 5px;
width: 600px;
This renders fine under IE8, Firefox, and Chrome.
Any suggestions?
Just by looking I'd suggest putting the image in its own DIV. This way you can control any overflows.
Also add the following to your CSS:
clip:rect(0px,600px,300px,0px);
We've solved the mystery.
If you want to poke at the issue directly, here's where it can be seen live. Note: After we push the fix, this link won't repro.
On the LI element in the page level CSS, I removed the following style attributes
li
{
margin-bottom: 10px;
position: relative;
left: 10px;
width: 500px;
}
And replaced them with:
li
{
margin: 0px 0px 10px 25px;
}
On the OL element in the page level CSS, the width attribute was moved.
ol
{
padding-left: 10px;
width: 500px;
}
And I feel like something of an idiot. The moral of the story, and this has been discussed elsewhere is that IE7 scrollable divs and the CSS position attribute do not play well together.