I've created a bubble in css3, but in some browsers (specifically Windows Safari 5.1.7) my span overflows my anchor tag, even though 1) it's positioned relative and 2) had a static width / height with a hidden overflow. In all other browsers (Firefox, IE, Chrome) it looks fine but the anchor link (hover) extends outside the bubble, to the width of the span since it is displayed block.
My question is, why is it overflowing and how can I fix it? I thought using a relative position with an absolute element sort of put it back into place, is this not correct?
Here's a JSFiddle of the problem at hand. The code looks like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
body {background-color: #ccc;}
a {display: block; -moz-border-radius: 10em; -webkit-border-radius: 10em; border-radius: 10em; border: 5px solid #eee; width: 220px; height: 220px; overflow: hidden; position: relative; text-align: center; line-height: 24px; font-size: 20px; color: #fff; background-color: #fff;}
.content{display: block; position: absolute; bottom: 0px; background-color: #000; width: 100%; padding: 20px 0 30px;}
</style>
</head>
<body>
<a href="javascript:void(0);">
<span class="content">
Test<br />
Bubble
</span>
</a>
</body>
Here's an example I keep running into on chrome, if I hover the Green (padding) or Blue (width) my mouse goes into a pointer, which is not where the link should be with overflow: hidden - it's outside the rounded corners.
SO here is what I figured out.. overflow hidden doesn't work with links, just hides it visually
http://jsfiddle.net/88UeR/
its only visual not clipping of the block level element
#a {
position:absolute;
border-radius:100px;
background-color:#72CEE0;
width:100px;
height:100px;
left:150px;
overflow:hidden;
}
so if you want to hide it completely you have to make the inside element not overflow outside the parent for anything other than to visually hide it
Related
I have a number of buttons in a div that refused to stay in a fixed position when the div scrolls, and I cannot see why. I have done this elsewhere so I should be able to do it, but I'm going around in circles today.
I have isolated enough of the application to reproduce it easily. It places a div in the centre of the screen and puts a small quit button in the top-right. I want the button (and all my others) to remain fixed relative to the div. What am I missing?
<!DOCTYPE html>
<html>
<head>
<title>Scroll</title>
<meta charset='utf-8'/>
<style>
div.dt-baseContainer {
width: 50vw;
height: 50vh;
min-width: 400px;
min-height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
position: absolute;
border-radius: 20px;
overflow: auto;
}
div.dt-container {
background-color: lightblue;
border: 3px solid royalblue;
text-align: center;
}
button.dt-quit {
border-style: solid;
border-radius: 4px;
border-color: inherit;
width: 20px;
height: 20px;
background-color: white;
color: red;
font-weight: bold;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
z-index: 20;
top: 5px;
right: 5px;
position: absolute;
cursor: pointer;
}
</style>
</head>
<div class='dt-baseContainer dt-container' id='dt_container'>
sdfsdf1<br>sdfsdf2<br>sdfsdf3<br>sdfsdf4<br>sdfsdf5<br>sdfsdf6<br>sdfsdf7<br>sdfsdf8<br>sdfsdf9<br>sdfsdf10<br>
sdfsdf11<br>sdfsdf12<br>sdfsdf13<br>sdfsdf14<br>sdfsdf15<br>sdfsdf16<br>sdfsdf17<br>sdfsdf18<br>sdfsdf19<br>sdfsdf20<br>
sdfsdf20<br>sdfsdf21<br>sdfsdf22<br>sdfsdf23<br>sdfsdf24<br>sdfsdf25<br>sdfsdf26<br>sdfsdf27<br>sdfsdf28<br>sdfsdf30<br>
<button id='dt_quit' class='dt-quit' title='Stop'>X</button>
</div>
</html>
[Edited] Of course, position:fixed; is not relevant unless it's fixed relative to the screen so I removed the mention. But I c=still cannot get this simple thing to work.
I hate having to answer my own question, but this was me being silly ... of course.
The suggestion above that my transform was the problem is a red herring. It is basically not possible to fix an element relative to its container in a scrolling flow.
The solution was to put both my scrolling div and my buttons inside an extra containing non-scrolling div. Not only does this make sense -- the container encapsulates both scrolling and non-scrolling content without having to put the latter inside the former -- but my initial code was very nearly there.
Taking my existing dt-baseContainer class and putting it on an outer div fixes the problem.
I'm pretty new to css. I figured out how to put an image in a button and how to use padding to move it around within the rectangle of the button. But as I stared adding more buttons to my page the padding on each button changed. I think this is because I need some sort of but once I started using divs I messed up the padding somehow and I can't figure out how to fix it. I tried centering (using top percentage and translate) the image within the button as well but it just moves the whole button. I need a way to make each picture on each button on my page to be centered or at least have padding so I can center it on my own for each individual image.
Here's a picture of some of my buttons.
The button on bottom is exactly how I want it, but the button on top is not centered since the image is a different size. But when I change the code of one the other button changes as well.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale =1">
<style>
.button {
background-color: #FFC627;
border: none};
border-radius: 20px;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 20px;
cursor: pointer;
height: 200px;
width: 200px;
}
.roles-and-responsibilities {
padding-top: 10px;
padding-bottom: 4px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.button:hover {background-color: #5C6670}
.buttoniactive {
background-color: #5C66703
transform: translateY (4px);
}
</style>
</head>
<body>
<div class = "roles-and-responsibilities">
I am developing a web-application which frequently uses tooltips. The application is styled using the Bulma CSS library along with the Bulma Tooltip Extension. Some elements in my application have internal scrolling (with their overflow-y property set to 'scroll' or 'auto'). Setting overflow-y to 'scroll'/'auto' automatically sets overflow-x to 'hidden (this is inevitable according to other answers).
This is causing overhanging tooltips to be cut off, as can be seen in this sandbox:
While I understand that having a visible x overflow with a scroll-able y overflow is impossible, I imagine that there is some work around/solution that will allow at least allow for the appearance of displaying an overhanging tooltip in a scroll-able element. In my case, allowing for visible overhang on the x-axis is more important (no other question/answers address/resolve this exact issue).
Any help will be greatly appreciated.
#testDiv {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 75px;
overflow-y: auto; /* Delete Line to see full tooltip */
}
.button {
margin: 10px;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
</head>
<body>
<div id="testDiv">
<button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
</div>
</body>
</html>
.
You can create another div element (.wrapper) that will have default overflow settings. It will be a container for your #testDiv and .button.
Now, Add position: relative to .wrapper.
.button now can be positioned absolutely, to just look like it's inside #testDiv element, but technically - it isn't :)
#testDiv element need to be expanded to 100% width and height, to inherit size from .wrapper
Last step - add some padding-top to #testDiv to prevent content overlap on .button element.
Look at code below:
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 75px;
}
#testDiv {
height: 100%;
width: 100%;
padding-top: 50px;
border: 1px solid black;
overflow-y: auto; /* Delete Line to see full tooltip */
}
.button.tooltip {
margin: 10px;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
</head>
<body>
<div class="wrapper">
<button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
<div id="testDiv">
content
</div>
</div>
</body>
</html>
I hope this solution will suffice :)
Try this:
.tooltip {
position: absolute;
}
I just noticed that setting z-index:-1 to non-statically positioned elements removes their hovering capabilities. Surprisingly the hovering capabilities of absolutely and fixed positioned elements varie with conditions,
Absolutely/Fixed positioned elements loose the hovering capability partially only if there is some text written after them. Hovering over near the top border doesn't work. If there is nothing after them then hovering works properly.
Relatively positioned elements loose the hovering capability completely even if there is no text after them.
Relatively positioned:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: block;
border: 5px solid black;
padding: 5px;
z-index: -1;
}
.tooltip:hover {
color:red; background-color: yellow;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me
</div>
</body>
</html>
Absolutely positioned with text after it:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: absolute;
display: block;
border: 5px solid black;
padding: 5px;
z-index: -1;
}
.tooltip:hover {
color:red; background-color: yellow;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me
</div>
RAndom text
</body>
</html>
Fixed positioned with text after it:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: fixed;
display: block;
border: 5px solid black;
padding: 5px;
z-index: -1;
}
.tooltip:hover {
color:red; background-color: yellow;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me
</div>
RAndom text
</body>
</html>
Question: Why does setting z-index:-1 remove the hovering capabilities of absolutely/fixed positioned elements, partially if there is text after them, and relative positioned elements completely?
Addendum: From the help of other users I've understood the concept. But there all still some doubts left:
Why does the whole viewport get the color of the body? The border shows that body is not all over the view port but if we give the body some color then the whole view port gets that color.
If we hover over the inner child box, having z-index:-1, then the parent container(i.e. body) is automatically hovered. Why?
You may know how z-index works?
When you use positive z-index, the element is moved to the up layer.
When you use negative z-index, the element is moved to the down layer.
Now, lets look at the following pictures:
In the preceding picture, the flow of the document is normal. As the element div is positioned relatively the height of the wrapper element is increased automatically. And the z-index is set to 1 layer up to the wrapper element. We can hover over the element as it is above the wrapper.
In the preceding picture, the z-index of the element is set to -1 which means the element layer is 1 layer down to the wrapper element. And the covering wrapper element is above the element by which we cannot hover over that element.
In the preceding picture, the flow of the document is not normal, so called out of flow. As the div element is positioned fixed or absolutely the height of the wrapper element is not increased. And the z-index is set to 1 layer up to the wrapper element and we can hover over the element.
In the preceding picture, the z-index of the element is set to -1 which means the element layer is 1 layer down to the wrapper element. And the covering wrapper element is above the element but still the element is not covered by the wrapper as its height is not increased up to the layer that's why we can still hover over the element that is positioned fixed or absolutely.
Hope! This makes clear up things to you about z-index.
If an element is transparent and the element with z-index:-1; is 'under' it. This stops the hover effects.
Z-index can you see as elevations in a building, and you watching it from birdseye. You can't reach the basement if there is a floor above it, even if its build from glass.
If no elements are above it, it can be hovered and you can 'reach te basement'.
I've found the answer myself. Thanks to user BoltClock and Bhojendra. I don't know why BoltClock deleted their answer. They were right in that the parent container obscures the child box depending upon the amount of text in the parent container. To visualize it all I had to do was add a border to body. I've given red dotted border to body in the following codes:
Relatively positioned:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: block;
border: 5px solid black;
padding: 5px;
z-index: -1;
}
.tooltip:hover {
color:red; background-color: yellow;
}
body {
border: 2px dotted red;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me; I'm underneath the body.
</div>
</body>
</html>
Absolutely positioned with text after it:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: absolute;
display: block;
border: 5px solid black;
padding: 5px;
z-index: -1;
}
.tooltip:hover {
color:red; background-color: yellow;
}
body {
border: 2px dotted red;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me
</div>
RAndom text
</body>
</html>
Fixed positioned with text after it:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: fixed;
display: block;
border: 5px solid black;
padding: 5px;
z-index: -1;
}
.tooltip:hover {
color:red; background-color: yellow;
}
body {
border: 2px dotted red;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me
</div>
RAndom text
</body>
</html>
As can be seen, the body is covering the Hover over me box.
Although I got what was going wrong with hovering. There are still some doubts which have been added to the original question.
In my html page, I have two links located on the top of the page:
<div id='my-link'>
<a class="school" href="../school.html" target="_blank">School</a>
<a class="police" href="../police.html" target="_blank">Police</a>
</div>
(When mouse click on the link, the linked page is supposed to be opened in a new browser window.)
the CSS:
#my-link{
margin-top: 5px;
position: fixed;
margin-left: 22%;
width: 20%;
}
a.school{
color: #6ffe11;
font-size: small;
text-decoration: none;
position: relative;
left: 30.5%;
margin-top:10px;
}
a.police{
color: #6ffe11;
font-size: small;
text-decoration: none;
position: relative;
left: 30.5%;
margin-top:10px;
}
a.school:hover, a.police:hover
{
color: #2f8;
text-decoration: underline;
}
I tested on firefox 3.6.16, when I open the firefox browswer window with full screen, the links are working successfully ("school", "police" pages opened successfully,
CSS hover feature is also working).
BUT, if I open the browser window size not in full screen, the links are not working at all, the "school" and "police" pages are not open,
the CSS hover feature is not working either.
The link texts are like plain texts on the page. *WHY???*
My guess is that something else on the page that's positioned is above it. Can't be certain without seeing your whole page code though.
Try adding a z-index to your #my-link div
-- edit --
Sorry, with the nice range of CSS properties you'd already used I assumed you would have heard of z-index.
Replace
#my-link{
margin-top: 5px;
position: fixed;
margin-left: 22%;
width: 20%;
}
with
#my-link{
margin-top: 5px;
position: fixed;
z-index: 100;
margin-left: 22%;
width: 20%;
}
Lots of info on z-index at https://developer.mozilla.org/en/Understanding_CSS_z-index
-- edit --
Why it works
If x is horizontal and y is vertical, as on a graph, z is towards or away from you. Using a z-index will bring something towards you. You can overlap these properties as well.
Take this as an example. Copy it into Notepad (or similar), save it and take a look at the code to understand. Alter the z-index properties of each div in the style section to see how it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Z-Index Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
div { width: 100px; height: 50px; border: 1px solid #000; }
#one { position: absolute; z-index: 10; top: 10px; left: 10px; background: #666; }
#two { position: absolute; z-index: 30; top: 30px; left: 30px; background: #999; }
#three { position: absolute; z-index: 20; top: 50px; left: 50px; background: #CCC; }
</style>
</head>
<body>
<div id="one">Furthest away</div>
<div id="two">Nearest</div>
<div id="three">In the middle</div>
</body>
</html>
Naturally in HTML, the elements later on in the code would overlay the things that appear earlier. Using positioning to move things will affect where they sit in the natural flow of the page and may be overlapped. That's how I guesses your problem when I saw your fixed property in your CSS as you'd taken the div out of the natural flow.