Is there any way of getting rid of the scroll track entirely? Or making it overlay the content rather than pushing it aside? Like iOS/Lion scrollbars?
The following gets pretty close, but even though the track is transparent, the content of the scrollable region is pushed over and the page background shows through.
::-webkit-scrollbar {
width:8px;
height:8px;
-webkit-border-radius: 4px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(053, 057, 071, 0.3);
width: 6px;
height: 6px;
-webkit-border-radius:4px;
}
Hmm, I thought I answered this one previously, maybe not:
Hide the overflow on the body
wrap the entire content of the site or whatever you're scrolling with a div,
Incude css properties for the
div (overflow:scroll or overflow-y:scroll).
Now you can set the track css to any opacity using rgba(0,0,0,0.3) because the scroll is not part of the body.
Another tip for customizing firefox scroll bar if you want to experiment is to:
Do the overflow thing and to overlay the scrollbar (via z-index) with a transparent div of whatever color you like,
Position the div over the entire scroll section (probably something like position:absolute; right:0; if you're using the scroll for the entire window)
Use pointer-events: none; on the divs css to make it semi-transparent.
It will give the firefox scroll a little color/ texture. (May be ideal to force the scroll to the right for comparability)
I've not tried it yet but it's do-able
Related
I am trying to create a vertical menu but struggle with an overflow problem. Or actually with the problem of not overflowing.
In the static shape all the Buttons should have the same width.
When hovering over one of the buttons I want to move the text and the right border of the button 4px to the right (which means also the container width increases by 4px).
I tried to do this by adding 4px padding to the left within the anchor container, which should make the container overflow 4px to the right.
When hovering over "Zagreb" it should look sth like this:
_________
|Split.........|
|________|__
|...Zagreb........|
|___________|
|Zadar.......|
|________|
|Makarska|
|________|
But it doesn't overflow, instead see what happens:
http://jsfiddle.net/6vxsh61h/1/
SOLUTION
Ok I got it fixed with the margin-right: -4px trick.
http://jsfiddle.net/6vxsh61h/5/
add to the a:hover rules
a:hover {
margin-right: -4px;
}
Just adding that one rule to the jsfiddle you posted has the effect you wanted as I understand it
Increase width on hover, e.g.
a:hover {
width:105%;
background: rgb(120,216,230);
box-shadow: 0px 0 5px 1px grey !important;
}
Demo: http://jsfiddle.net/6vxsh61h/4/
You made your <a> elements block elements, which is fine, but by default, they will be automatically setup with border-box-esque box-sizing. This means that they will be autosized to fit the width of the container, minus the padding that you define. This way, they will always fill the width of the container.
To fix this, you only need to define a width:
a
{
width: calc(100% - 20px);
}
JSFiddle
I want the gray background to continue all the way to the height of the current window. I tried setting height to 100% of #default-wrapper-body, but that doesn't appear to do anything.
See it live here: http://www.zorgbeurs.nl and even more prominent here: http://www.zorgbeurs.nl/aanmelden
I've also added an image, the areas in the right boxes should run to the bottom of the page, on all pages, not just the homepage.
This is happening because the browser can't detect the height of the footer for one reason or another, also your not use a wrapper on all elements, a quick fix would be to add the following CSS to your stylesheet:
#footer_footnote_wrapper {
height: 80px;
border-bottom: 1px solid #DCDCDC;
}
html, body {background:#f3f3f3;}
html, body, form, #default-wrapper-body { height: 100%; }
… does the trick, see here: http://codepen.io/zitrusfrisch/pen/ouEdI
Better move the form inside the #default-wrapper-body to prevent all forms being stretched to 100% height though.
I think the cookiebar div is causing your white stripe at the bottom, it has background:none; and when its visible the background looks fine, all the way to the bottom.
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }
I have an absolutely-positioned DIV that I need to trap onclick events for. It turns out that, in IE7, the DIV seems to have no 'footprint' for things like clicking and even cursor. For example:
div {
width: 200px; height: 200px;
position: absolute;
border: 10px solid black;
cursor: pointer;
}
In IE7, that DIV has no 'footprint': it doesn't react to onclick(), and its cursor doesn't change to the pointer. Curiously, it DOES handle both those over its border - hence the large border in this example. Setting a background-color:
div { background-color: #fff; }
fixes the problem. But, in this case, that's not possible - I need the DIV to have a transparent background.
I've come across this bug in the past, but I cannot for the life of me remember the IE hack to fix it.
Try using a transparent background image.
I would suggest using a 2x2 or bigger .gif that is all transparent pixels. Set it to repeat on x and y and IE shouldn't have an issue with the clicks.
background: transparent url(path/to/spacer.gif) repeat left top;
/* Not all of that is necessary, but I have a tendency to define it anyway. */
Had the same problem and didnt found a better solution than the transparent gif. Note that this problem also occured in IE8 for me. You don't have to use a 2x2 px gif, 1x1 px is enough.
I have been struggling to find out why this rollover is not behaving as it should in IE8.
Go here: http://baked-beans.tv in IE8, you'll see that the rollover only works on the lower half of the thumbnails.
Btw, this is not activated by an <a> tag but by a :hover for the <div>.
What I can't figure out is why it works on only the lower half of the div, below the image, but not on the image (the image is not z-indexed so thats not the issue)
As soon as I change the background-color to anything else besides transparent, it works 100%. So this just blows my mind... why the bottom half, but not the top half, and only when I set bg-color to transparent?! Gotta love Internet Explorer.
This works as it should on every other browser (the entire square acts as a rollover)
Here's the CSS:
.cat_rollout {
position: absolute;
float:left;
top:0;
left:0;
min-height:274px;
min-width:274px;
font-size: 0;
background-color: transparent;
}
.cat_rollout:hover {
background-image: url(images/rollover.png);
min-width:254px;
min-height:242px;
padding-left: 20px;
color: white;
font-size: 21px;
font-weight: normal;
line-height: 24px;
padding-top: 34px;
}
Try faking a background image or setting it to a blank.gif instead of making it transparent.
background:url(blank.gif);
See http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/
The problem is that for some time (a week? two weeks?) IE has changed the way it interprets background-color. It seems that you cannot say, that the color is transparent, rather the whole background. So you should change background-color: transparent into background: transparent. Very nasty.
The same problem has been witnessed, where hovering on a transparent element's blank area doesn't make css rules related to hover take effects. The problem is fixed with giving the element the following style.
background-color: rgba(0, 0, 0, 0.001);
You could also try changing the hover selector to :
.thumb_container:hover .cat_rollout {...}
so that the parent containment div is the element reacting to the hover.
You can use an 1x1 transparent gif as a datauri if you'd rather.
background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
Up to you which one you'd prefer, this works and is an alternative to the selected answer.