I have been working on a project that involves custom scroll bar here is the code
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body id="main">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
</body>
the problem is it is only working on chrome how can i make it work on every browser. i have searched all over the internet but still cannot fine any reliable solution.thanks in advance
Sorry friend firfox, Opera Mini & Edge not supported scrollbarstyle
YOU can check it here
check it
-WebKit- applies to Chrome and safari, not sure if other browsers support custom scroll bars but I think they don't
Related
I am styling input[type=range] using CSS, and done with thumb and track.
All of three(-ms, -moz, -webkit) browser have proper prefix.
But, I don't know what vender prefix is suit to style progress on Webkit browser, such as Chrome.
On Internet Explorer and Microsoft Edge, -ms-fill-lower works great.
On Firefox, using -moz-range-progress solved the problem.
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 350px;
}
/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: -7px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ddd;
}
/* moz://a Firefox */
input[type=range]::-moz-range-track {
/* width: 150px;
height: 5px; */
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
}
input[type=range]::-moz-range-progress {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
/* Microsoft */
input[type=range]::-ms-track {
height: 2px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: 1px;
}
input[type=range]::-ms-fill-lower {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
input[type=range]::-ms-fill-upper {
background: #ccc;
border-radius: 10px;
}
input[type=range]:focus::-ms-fill-lower {
background: #44ddff;
}
input[type=range]:focus::-ms-fill-upper {
background: #ddd;
}
<input type="range" />
This example will work as I expected on Microsoft Edge, moz://a Firefox, and Internet Explorer, but looks differently on Chrome.
I already read Styling input range for webkit with pure CSS , and tried on mine,
but it works strangely when multiple input[type=range]s are on one document.
So, the question is,
Is there any proper vender prefix for styling track that thumb is already passed, only using CSS?
To the best of my knowledge, this isn't possible. Below is a snippet from Chrome showing the Shadow DOM elements for <input type="range" />:
<input type="range">
#shadow-root (user-agent)
<div style="-webkit-appearance:inherit">
<div pseudo="-webkit-slider-runnable-track" id="track">
<div id="thumb">
</div>
</div>
</div>
</input>
In general, you might want to take a look at range.css, it's a cross-browser code generator for custom range sliders. However, it doesn't provide a way to style the ::-moz-range-progress region. Other example's I've found, including this Codepen snippet, use the deprecated and no-longer-functional deep shadow-piercing selector. For a fully cross-browser solution, you'll have to make your own element.
I am having an unexpected 1px margin under a div residing in a fixed container. This issue only occurs in Edge (possibly in IE as well). After some testing, I was able to reproduce the bug with a bare bones example.
This picture, which you can reproduce running the snippet below, is composed of 3 square divs inside a fixed div. Firefox
In Edge, you can "fix" this issue by either disabling the property top: 50% in the container div, or by disabling border-*-right-radius: 6px in the divs inside it. Naturally, this isn't a fix, because I need both these properties to effectively implement this design.
How can I fix this? I tried adding borders the same color as the background, but the background is not opaque.
Edit: If you can't see it right away in IE/Edge, try to select the container div and slowly increase the value of the top property. In IE11, changing it from 5% to 6% already made the problem obvious again.
.box {
background-color: rgba(0,0,0,0.15);
height: 70px;
line-height: 70px;
text-align: center;
border-right: 1px solid rgba(0,0,0,0.2);
}
.box:hover {
background-color: rgba(50,50,100,0.15);
}
.box:first-child {
border-top-right-radius: 6px;
border-top: 1px solid rgba(0,0,0,0.2);
}
.box:last-child {
border-bottom-right-radius: 6px;
border-bottom:1px solid rgba(0,0,0,0.2);
}
.main {
width: 70px;
position: fixed;
left: 0;
top: 5%;
}
<div class="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Try to use border on parent div: http://jsfiddle.net/gtf0fa8n/1/
Border radius on parent does not brake inner divs rendering in IE
.main {
border: 1px solid rgba(0, 0, 0, 0.5);
border-left: 0;
border-radius: 0 6px 6px 0;
overflow: hidden;
}
.box {
background-color: rgba(0, 0, 0, 0.3);
height: 70px;
line-height: 70px;
text-align: center;
}
.box:hover {
background-color: rgba(50,50,100,0.15);
}
Just give boxshadow of 1px with same color on bottom.
box-shadow: #2a2e37 0px 1px 0px;
I'm using bootstrap 3 - for this topic especiall the sticky-footer makes problems on mobile phones and devices (e.g. Chrome # Samsung Galaxy 4, IPad).
I'm using a div container (wrap_con) to push the footer down to the end of the page. So my html code looks like this:
<body>
<div id="wrap_con">
page content
</div>
<div id="my_footer">
two container (<div class="container">) are implementing the footer here
</div>
I'm using bootstrap 3 with following own extensions:
#wrap_con {
background-color:white;
font-color:black;
color: #000000;
font-family: 'Droid Sans',sans-serif;
font-size: 14px;
border: 0px solid white;
height: auto;
margin: 0 auto -150px;
/* margin: 0 auto 0px; */
min-height: 100%;
padding: 0 0 150px;
/* padding: 0 0 0px; */
}
#my_footer {
height: 150px;
color: #ffffff;
font-size: 10px;
border: 0px solid white;
border-style: none;
}
#my_footer .container:first-of-type {
background: transparent url(footer_bg_white.gif) repeat;
width: 100%;
border: 0px solid white;
height: 80px;
padding-top: -30px;
}
#my_footer .container:last-of-type {
background: transparent url(footer_bg.gif) repeat;
width: 100%;
height: 80px;
border: 0px solid white;
}
So in praxis two container should always stick on bottom of the page and implement the footer. This works great in all desktop browsers but if it comes to view the site on a mobile browser the footer is not on the bottom of the page. There is a distance of about 75px between the footer and the bottom of the page.
add this to your footer, on a media-query for mobile.
position:fixed;
bottom:0;
left:0;
Did you try it? #joe
I have some CSS and it works fine on Windows, but when I view it on OSX it's not quite right.
So that is the way it should look, wonderful :
And that is how Firefox 15 on OSX displays it :
The CSS:
nav#main ul>li.current {
height: 59px;
}
nav#main ul>li.current:before {
background: url('../img/top_shadow.png') no-repeat;
content: '';
display: block;
height: 7px;
margin: -7px 0 0 0;
}
nav#main ul>li.current:after {
background: url('../img/bottom_shadow.png') no-repeat;
content: '';
display: block;
height: 7px;
margin: 8px 0 0 0;
}
nav#main ul>li.current a {
background-color: #77b9de;
color: #3e3e3e;
height: 53px;
margin: -4px 3px -8px -3px;
padding: 3px 3px 0 10px;
}
Any ideas as to why this is happening? I should point out as well, that if I move the background color to the <li> instead of the <a> it still does the same.
http://jsfiddle.net/eHhGa/
I added a quick version of it to a jsfiddle to see how the whole code looks.
I solved the issue, basically overflow:hidden; was taking effect on the container when the browsers height got below 500px and firefox was being strict about it.
I'm trying to replicate the CSS 'Vignette' effect, detailed on Trent Walton's site.
.vignette1 {
box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
float: left;
}
.vignette1 img {
margin: 0;
position: relative;
z-index: -1;
width: 320px;
height: 247px;
}
It works well in isolation, but has problems on my production site, where the background settings for a parent div override the z-index on the image - live jsFiddle demo here.
The second approach - mentioned in the original article's comments and included in the demo - works well, but my image has to be wrapped in the tag - it can't be below it.
page has a solid white background, you're giving the image a z-index of -1, so it's going underneath that div. There are several workarounds, depending on how your final design is going to look, but if you just make #page transparent it works:
http://jsfiddle.net/tA8EA/
Or you can also set page to position realtive and give it a lower z-index than the image:
http://jsfiddle.net/PEgBv/
In the end I found the' Overlay & Inset Method', the second of Jordon Dobsons's techniques to be the most effective and least reliant on negative z-indexes:
/* Border & Vignette Setup */
figure{
position: relative;
display: block;
line-height: 0;
width: 500px;
height: 333px;
margin-bottom: 2em;
border: 1em solid #fff;
-webkit-box-shadow: 0 .1em .3em rgba(0,0,0,.25);
-moz-box-shadow: 0 .1em .3em rgba(0,0,0,.25);
}
figure::before{
content: "";
position: absolute;
top: -1em;
bottom: -1em;
left: -1em;
right: -1em;
}
figure::before,
figure img{
outline: 1px solid #ccc;
}
figure.vignette img{
z-index: 1;
position: relative;
display: block;
width: 100%;
height: 100%;
}
/* Overlay & Inset Method */
figure.overlay.inset::after{
/* Mozilla Settings */
-moz-box-shadow: inset 0 0 150px rgba(0,0,0,.75);
/* Webkit Setting */
-webkit-box-shadow: inset 0 0 150px rgba(0,0,0,.75);
}
(jsFiddle demo using original layout)
I've post an answer with dynamic image list loading here. Instead of under-z-indexed image there's just DIVs with background-image and image dimensions set.