The scroll bar isn't showing up in the website even after putting
{
overflow-y:scroll;
}
in the body or html css
Link
Would be glad if some one could help me on this
Check your style.css and remove these lines. Other than that it works fine on non-webkit browsers
I hope it helps...
in your styles.css comment this code to make scrollbar visible on chrome
body::-webkit-scrollbar {
/* display: none; */
}
Related
Hello!
I put this into my css file for changing the look of the scrollbar.
It works in nearly every browser as intended, but not in firefox:
::-webkit-scrollbar{
width: 10px;
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb{
background-color: #353b48;
}
What do I need to make in work in Firefox too? ^^
The ::-webkit-scrollbar selector is not supported in Firefox:
https://caniuse.com/?search=%3A%3A-webkit-scrollbar
You can still customize the scrollbar though! See these:
Custom CSS Scrollbar for Firefox
Custom CSS Scrollbar for Firefox
Firefox doesn't support "-webkit-scrollbar", but it still supports a custom scrollbar.
scrollbar-color: #f1f1f1 white;
scrollbar-width: thin;
Just add that to your code.
Source
i'm using a bit of CSS to hide a div off-screen (and then jquery to animate it in) using this :
body {
overflow: hidden;
}
.hide {
position: absolute !important;
left:100vw !important;
}
On desktop, the div is being properly hidden, and no scrolbar appear, but on mobile, it is possible to scroll to the right and see this div.
Browsers not having the issue : Chrope/Edge/Firefox (All latest version as of today) on Win10
Browsers having the issue : Safari iOS (ios 9.x), Dolphin for android (latest) and firefox mobile (also latest)
See code here : https://jsfiddle.net/nfpwccvj/4/
Is there a way to solve this ?
Thanks.
You forgot to close the body }? Or it's just this example with this mistake?
First of all left:100vw is not Cross-Browser supported, best practice for full width is width:100%. If you want to hide something on mobile, you need to use media query.
.hide {
display:block;
}
#media (max-width:480px) {
.hide {
display:none;
}
}
I am using the following html code to hide the registration buttons on www.eventbrite.com:
**
<style>
#ticketInfo {
display: none !important;
}
#TicketReg {display: none !important;
}
#see_whos_going .panel_head2 {
margin-top: -27px;
}
#OrderReg {display:none !important;}
</style>
This works fine on desktop, but does not seem to work on mobile devices e.g. iPhone. I am a coding novice, so any sugestions would be much appreciated!
Any ideas?
The mobile optimized view of the Eventbrite event pages don't render the HTML/CSS that are added to the custom header by the customer/event organizer (unlike the desktop version where you can essentially add your own CSS to overwrite any style element).
I have searched everywhere but can't seem to find an answer to this. When playing videos in fullscreen the html navigation sits over the video in IE, Chrome and Firefox but not in Safari from both a Mac and a PC.
The site is http://www.david-bartlett.com Please look at the showreel page or the excerpts.
I'm a relative newbie I'm afraid, is this a css thing or a videojs issue ? Any ideas about how to fix it would be gratefully received.
Cheers.
The problem is the z-index property in DB.css line 80:
#nav li {
margin:0;
padding:0;
position:relative;
float: left;
list-style:none;
line-height: 30px;
z-index:3000; /* this line causes the bug */
}
I'm not sure about other browsers, but in Firefox, it's ok to simply remove that line.
I am working on a website, the site is http://fredsrewards.loyaltylane.com/fredsshopper. There is a navigation menu at the top of the page. The links don't work in Chrome or Firefox but they do work in IE9. The site uses a few javascript files. I have tried changing things in the CSS and HTML but nothing works. The site was built using MVC 3. Any advice would be greatly appreciated. Thank you in advance.
It's because you have another div (phar_panel) on top of the navigation.
You can fix it by setting:
#m_box {
/* rules you already have */
position: relative;
}
#phar_panel {
/* rules you already have */
width: 230px;
height:31px;
right:30px;
position: absolute;
}
#phar_panel img {
/* rules you already have */
left: 230px;
position: absolute;
}
Also, be careful, you have more than one element with the same id (navigation) in your page!