I am facing a problem with a list inside a div. The thing is, I have a div with a list inside. This limits the amount of div intens that will appear to the user. When the limit is exceeded will see a scroll inside this div, for the user to view other intens, this same div has a rounded edge (border-radius) at the bottom. When I move the mouse over the LAST ITEM LIST, it removes the effect of border-radius of div. Who can help me here is a file jsFiddle Here
.limit {
height:300px;
width:500px;
background-color:red;
overflow: scroll;
/*overflow: hidden;*/
overflow-x: hidden;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6x;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6x;
}
Much appreciated in advance!
it's caused by
li { ... position:relative; ... }
remove that from li and apply it to a nested element (ie li > .somediv) and make this one transparent... no borders, backgrounds, etc.
update: a nicer workaround http://jsfiddle.net/YcYHd/
Add outline:1px transparent solid to the scrolling element.
Apparently this seems to prevent the bug
hope this helps
Related
CSS setting a table height or width makes some table rows <tr> and table data <td> unclickable or unable to highlight or unresponsive.
<style>
.tbl-content{
position:absolute;
height:; /* if you set a height table data or rows become non-responsive*/
width:; /* if you set a width table data or rows become non-responsive*/
overflow-x:auto;
margin-top: 0px;
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
th:first-child{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
}
th:last-child{
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
}
tr:hover {
background-color: #464A52;
}
</style>
this answer was gotten from https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/#comment-3400
I asked and answered this cause it took me a whole day to solve this issue and the solution was not on StackOverflow yet
CSS pointer-events
The CSS style pointer-events can be set to none so that it will not receive hover/clicks events, instead, the event will occur on anything behind it. However, there is no luck making it work on browsers IE 10 and below. See compatibility table.
CSS pointer-events by caniuse.com
Since the link is just partially covered at the bottom by the div, I decided to give pointer-events: none a try.
.some-horizontal-container {
pointer-events: none;
}
However, all child elements will receive no hover/clicks as well. To fix that, we need to turn pointer-events back specific to these elements.
.some-horizontal-container a.btn{
pointer-events: all;
}
The better way
There was a severe drawback when I disable the pointer events for the widget I am working on especially with touch events. I found a better way where it works for all scenarios.
Instead of disabling and enabling the pointer events, I used the visibility style instead.
visibility:hidden; for the div that overlays the clickable element under it, then visibility: visible; for the child elements of the overlay where it should be clickable.
These child elements do not cover anything under it and they are just small buttons.
That’s it!
I found a very weird bug today while developing a new site, I really don't know why in the hell it's happening, but I think someone might know.
I made a navigation menu fixed to the top-right part of the page, within it, a big div made round from a lot of border-radius.
It was working very fine and normal untill I added to the right bar a facebook page plugin.
When the bottom of that div goes over the title of the page in the plugin, the border-radius disappears. It stays a square div while it's there, goes back to round if I scroll the page and stays round until it's "touching" that very specific part of that page plugin.
I really don't have a clue about why, here's some code for better understanding:
.nav {
position:fixed;
width:100%;
text-align:right;
z-index:9999;
}
.face {
position:absolute;
width: 20%;
background:#F93;
top:5px;
right:10px;
border-radius:9999px;
overflow:hidden;
}
.face:before {
content: "";
display: block;
padding-top: 95%;
}
.face a img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
.menu{
display:inline-block;
background:#FFF;
padding:1em;
width:50%;
text-align:left;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
margin-top:3%;
}
.menu a {
padding:0 0.5em;
border-radius:4em;
}
And also:
<div class="nav">
<div class="menu">
menumenumenumenu
</div><br/>
<div class="name">
<h2>name</h2>
</div>
<div class="face">
<img src="i/image.png"/>
</div>
</div>
By the way, it seems to happen only on webkit browsers, on firefox it looks very normal, didn't even test in internet explorer.
EDIT: Just tested on Internet Explorer and SURPRISINGLY it did work very well, this is now very very weird
EDIT2: Some Screenshots for even more clarification:
Before touching the title:
After it gets on that very specific spot:
Further down:
Anytime it's over the title it's not round, elsewhere it's fine.
EDIT3: I found out that there was another place the bug was happening; I have a jquery slider on the page; I had an Opacity effect on hover on some controls, when these opacity was being animated, it reproduced the disappearing border-radius problem, and then went back to normal by itself; Removing opacity CSS rule from the neutral state made the bug stop happening while hovering the slider, but it keeps hapenning while that div is over the facebook plugin
There may be more going on here because of the Facebook plugin, but it sounds like this is a problem of not taking into account Webkit CSS rules. If that's the problem, I'm surprised that Firefox isn't giving you trouble. The standard way to style rounded corners with cross-browser support is to give border-radius, then -moz-border-radius and -webkit-border-radius:
.menu {
...
border-radius: 100px 0px 0px 100px;
-moz-border-radius: 100px 0px 0px 100px;
-webkit-border-radius: 100px 0px 0px 100px;
...
}
.menu a {
...
border-radius: 4em;
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
}
Ok, I found a fix for the problem, that I can only think I didn't thought before because I was too tired. ^^'
First of all, I found out that this bug was even weirder than I thought, thinking back how the opacity on another element seemed to affect it, I tried changing the image opacity, then, I found out that the div that contained it was in fact, still round.
Even though the image was being cut by the overflow:hidden; it wasn't being cut by the border-radius of the parent div.
I fixed it by putting border-radius on the image too, so now it is round even when over that plugin, the problem is gone now.
I hope someday this gets found by some webkit developers and the identify and fix that bug, it was really weird.
Thanks Henry for the help too!
TL;DR
Fixed by using border-radius on both parent div and image.
I'm trying to keep three squares vertically aligned. The third element is a twitter widget. I'm running Ubuntu 12.04 and the two squares seem to shift downwards in google chrome. All other browsers seem to render this correctly (with them all inline).
I've tried removing white space, looking deeper into my source, etc., but even this simple jsfiddle seems to have the same issue.
What's up?
http://jsfiddle.net/bwzGC/
HTML
<div id="info-block">
<div id="twaewsit-content">
<span class="header">This Week # EWSIT</span>
</div>
<div id="ue-content">
<span class="header">Upcoming Events</span>
</div>
<div id="twit-content" style="border:none !important;">
<a class="twitter-timeline" href="https://twitter.com/EWSITGOGREEN" data-widget-id="362066477261680640">Tweets by #EWSITGOGREEN</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
CSS
#info-block {
padding:20px 0 20px 0;
width:100%;
text-align:center;
}
#info-block > div {
height:250px;
width:30%;
max-height:250px;
overflow-y:hidden;
display:inline-block !important;
border:1px solid #e8e8e8;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font:normal normal normal 12px/16px "Helvetica Neue",Arial,sans-serif;
}
#info-block > div > .header {
display:block;
padding:8px;
font-weight:bold;
font-size:14px;
text-align:left;
border-bottom-style:solid;
border-bottom-color:#e8e8e8;
border-bottom-width:1px;
}
One option is to add vertical-align: bottom; to #info-block > div
#info-block > div {
height: 250px;
width:30%;
max-height:250px;
overflow-y:hidden;
vertical-align: bottom;
}
http://jsfiddle.net/bwzGC/2/
I came across something similar the other day and looked into the causes a little.
As Adrift pointed out this is due to the vertical-align of the inline-block elements. Specifically it seems to be related to the baseline value which inline-block elements use by default and the fact you also have overflow-y:hidden set.
There seems to be a rendering difference between Webkit browsers (I see the boxes pushed down in Chrome, Safari and Opera 15) and others (Firefox and Opera 12 have the boxes aligned to the top) when vertical-align:baseline and overflow:hidden are applied. Removing the overflow-y css gives me the same results (boxes pushed down) in both Firefox & Chrome.
Per the W3C CSS 2.1 Specification:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
So it seems like Gecko is rendering according to the specification in this case whereas Webkit is not.
Float the 3 divs left and you will be fine
EXAMPLE
#twaewsit-content,#ue-content,#twit-content{
float:left !important;
}
In the site I'm making I'm adding a feature that adds bulletins, little staff notices, at the top of the home page. My idea was that I have a profile section floated to the left, a little dateline at the top showing (of course) the date, and some tags.
The problem arises with the dateline section. The dateline is to the right of the profile at the top of the bulletin. There is a border-bottom for the dateline, and this border stretches all the way across the bulletin, being drawn over the floated div.
I made an example fiddle here, you can see the problem. For some background info, all bulletins will be inside the div.bulletin_frame, the "main div" if you will. Within that there will be div.bulletin s. I have it configured so that they all have a solid border at the top except for the first one, so that there's a border between them all. (see the stylesheet)
Thanks!
CSS:
div.bulletin_profile
{
padding: 5px;
margin-right: 5px;
text-align: center;
float: left;
border-bottom: 1px gray solid;
border-right: 1px gray solid;
border-bottom-right-radius: 5px;
}
div.bulletin_dateline
{
padding: 5px;
font-family: monospace;
border-bottom: 1px gray solid;
}
div.bulletin_body
{
padding: 5px;
}
The borders aren't drawn over the div, they're behind it. The divider simply has no background.
To change this, simply add a background to .bulletin_profile:
div.bulletin_profile {
background:rgb(240,240,240);
}
In the following image I have a form which has rounded corners but if you look closely, there is some sort of ugly overlap on the bottom corners (some sort of white corner)
I tried using a bigger border-radius on the background and taking away the background, but looks like it isn't the background but the element itself, since that didn't do anything.
This is my css code for the bottom of the form (the gray area around the button)
.formss #button_div{
clear:both;
height: 60px;
width: 100%;
border-top:1px solid #ddd;
margin-top:5px;
padding-top: 10px;
text-align:center;
background:rgba(51,51,51,0.8);
-moz-border-radius-bottomleft: 19px;
-moz-border-radius-bottomright: 19px;
-webkit-border-bottom-left-radius: 19px;
-webkit-border-bottom-right-radius: 19px;
border-bottom-left-radius: 19px;
border-bottom-right-radius: 19px;
}
I have experienced this problem before, I guess keep doing something wrong but I dont know what.
EDIT: jsFiddle --> http://jsfiddle.net/Z6pwR/4/
I dont know why the text inputs are going outside the form in the fiddle
I can't explain why your solution isn't working properly, but if you remove the overflow: hidden property from #agregar_instituto_div and add it to the children / the form, the problem is gone.
You need to set set a value for the ".widearea" border. The standard browser input border is causing that problem.
jsfiddle.net/Z6pwR/5/