Custom Scrollbars in Firefox - html

From what I understand and having had searched Google quite recently, it appears custom scrollbars are still not implemented in Firefox.
The issue I am running into is the fact that three of my coworkers all have the custom scrollbars in Firefox, yet I still have the default scrollbar.
I read the recent release notes for the versions they have (53 and 54) but say nothing about scrollbars. When checking the Mozilla developer page (https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar), it shows the scrollbar page was updated on Aug 1, 2017 - so I am wondering if partial support was included in a release, or if something else is happening here.

.scroll_container {
background-color:#000000;
width:421px;
height:420px;
color:#999999;
border:2px solid #000000;
border-radius:10px;
overflow:hidden;
text-align:justify;
}
.scroll_content {
position:relative;
width:400px;
height:414px;
top:-17px;
padding:20px 10px 20px 10px;
overflow-y:auto;
}
a {
color:#C800C8;
font-size:1.2em;
float:right;
}
.top_bottom_mask {
position:absolute;
overflow:hidden;
width:17px;
height:10px;
}
.left_right_mask {
position:absolute;
width:0px;
border:1px solid #000000;
}
.corner_top_mask, .corner_bottom_mask {
position:relative;
left:-2px;
border:6px solid #000000;
height:20px;
width:13px;
border-radius:16px;
}
.corner_top_mask {
top:-3px;
left:-4px;
}
.corner_bottom_mask {
top:-18px;
left:-4px;
}
<div class="scroll_container">
<div class="scroll_content">
<h2>CSS Scrollbar Style</h2>
Many designers dislike the way scrollbars look in browsers, and wish there was a way to make them look at least somewhat more appealing, possibly even blending in with the rest of the web page.<br /><br />
Some browsers support different ways to customize colors, none of which (to my knwledge) are W3C compliant. Also none of them seem to work in Firefox at all, which is another downside for many of us.<br />
There's also an option to use JS or jQuery scripts for completely custom scrollbars, many of which have problems when it comes to dynamic content and sometimes even images loading within those scrolling containers.<br /><br />
I'm just a novice enthusiast myself, so the following example may very well be even worse than some of the methods mentioned above. It's also a bit messy to begin with, but it doesn't use any scripting, it's done using css standard styles, and not too difficult to understand.<br />
Basically, all I do is mask part of the existing browser scrollbar, to hide up and down buttons, left and right edges, and round up the top and bottom track for a little extra visual effect. You can do without those and keep them square instead.<br /><br />
To achieve this effect, you need 2 containers. The outer container, set to desired dimensions to fit into your web page layout. This container includes the inner container (with content) as well as masking divs.<br />
The inner container is where you put all of the content. This one is pushed up, over the edge of outer container, far enough to hide the up button (top:-17px), and its height is greater than that of outer container, so the bottom button goes out of the frame as well. After that you need to adjust padding so the actual content doesn't go out of frame as well.<br />
Last thing to do is properly position the masking divs to hide the undesired parts of the browser scrollbar.<br /><br />
To visually check what actually happens, move to CSS part of the screen and change border colors from 'solid #000000' to 'solid #FF0000' for example for classes <i>.left_right_mask</i>, <i>.corner_top_mask</i> and <i>.corner_bottom_mask</i>.<br /><br />
http://www.digital-madness.com
<br /><br /><br />
</div>
</div>
<div class="top_bottom_mask" style="left:413px; top:10px;">
<div class="corner_top_mask"></div>
</div>
<div class="left_right_mask" style="left:413px; top:11px; height:418px;"></div>
<div class="left_right_mask" style="left:428px; top:10px; height:418px;"></div>
<div class="top_bottom_mask" style="left:413px; top:420px;">
<div class="corner_bottom_mask"></div>
</div>
<div style="position:absolute; top:10px; left:450px;">
Browser support:
<ul>
<li>Google Chrome</li>
<li>Firefox</li>
<li>Safari</li>
<li>Opera</li>
</ul>
From the technical point of view, this also works in IE. the only problem are those grotesque up and down buttons, which are twice as big as any other browser uses. Not the most pleasing quality of that browser to be honest.
</div>

Related

Absolutely positioned div not positioned correctly on mac/ios but fine on windows

Had this issue for a couple days now but I can't for the life of me figure out what's causing it. A few google searches have pointed me a collapsing margin bug but I thought I'd get a definitive answer or at least get pointed in the right direction.
I have a div that is positioned absolutely within a relative div. This div is position varies from mac to pc.
The below screen shot is on a mac
The below screen shot is on a windows pc
This same issue happens on iOS devices as well, and is consistent across browsers.
<div style="position:relative;" id="section3">
<div class="highheader" style=" font-size:42px;position:absolute; top:-8px; left:25px; color:black;" id="categoryname">VIDEO HIGHLIGHTS</div>
Above is a text snippet of the code. For some reason it just appears to be interpretting the top:-8px absolute value differently from machines. It's the same for every div I've set up like this. There is a version of this code up on my server where this issue is happening.
www.atomichael.com/mmaplus
Anyway I hope the information provided iss helpful enough, if it isn't please don't hesitate to ask for more details!
I really am stumped on this so any help would really be appreciated. Thank you.
Fonts are not standard. Also, you can add padding, height, or line-height for some adjustments, or even adjust your position. I would start with the font. See:
http://www.w3schools.com/cssref/css_websafe_fonts.asp
Just set top:0px and it will work fine for the following divs
<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px; color:black;" id="categoryname">VIDEO HIGHLIGHTS</div>
<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px; color:black;" id="categoryname">LATEST NEWS</div>
<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px;" id="categoryname">PLUS BABES</div>
<div class="tileheader" style=" font-size:42px;position:absolute; top:0px; left:25px;" id="categoryname">LATEST POSTS</div>
Other option is to create a class and apply different css for chrome and for safari
Probably this hack can work
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
top:-8px;
}
/* Safari only override */
::i-block-chrome,.myClass {
top:0px;
}
}
This is taken from here

PNG Images distorted muddy in IE7

I'm building a site that is almost complete. The problem I am having is with IE7 and displaying images that look very distorted/muddy.
First how it looks in all the other browsers I tested, including IE8.
Removed due to link limit on new accounts
And then the muddy one from IE7
Muddy/Distorted Image
After doing some googling it looks like it has to do with the pixel transparency in PNG images on IE7.
First I tried setting a solid background color in the actual background file. This did not work as the image was still very muddy and distorted.
Next I tried specifying a fixed width and height but still the same result. Not sure what else to try at this point.
Any suggestions I am willing to try.
Here is the code pertaining to the element.
.feature {
padding-top:10px;
border-top:solid 1px #ccc;
width:440px;
margin:0 auto;
padding-bottom:5px;
}
.featureimg {
float:left;
width:190px;
}
.featureimg img {
max-height:90px;
max-width:190px;
vertical-align:middle;
}
.featuretext {
float:right;
text-align:left;
width:250px;
}
<div class="feature">
<div class="featureimg">
<img src="images/certipur.png" alt="" />
</div>
<div class="featuretext">
<div class="featurehead red">
Sealed with comfort and confidence
</div>
<p>
TEXT BLOCK
</p>
</div>
<div class="clear">
</div>
</div>
Here is the link to original file http://imgur.com/z2SoV
In case you still care: http://imgur.com/9H9nFHe
I tried using BrowserStack.com to check for the image using IE7 and it didn't look muddy at all. I guess it your VM display settings but i think it shows up perfectly fine. :)

HTML Div tag not showing in Mozilla FireFox

I have three div tags wraps on my website and in those wraps i have multiple other div tags aligned under each other. When I started working on the right column div tag wrap and when i had put my inner div tag in that one it didnt show on FireFox although I coded it the same as the left and center one.
Code of the right column divtag wrap:
<div id="right_column_wrap">
<div id="advertisement_panel">
<img src="images/advertisement_h1.png" />
<p class="advertisement_panel">Want your website featured here? Mail us at info#Ranklist-Top100.com</p>
</div>
</div>
CSS Code:
#right_column_wrap{
width:312px;
height:auto;
margin:0 auto;
text-align:center;
float:right;
}
#advertisement_panel{
background:url('http://www.ranklist-top100.com/skins/ranklist/images/advertisement_panel-bg.png') no-repeat top;
width:312px;
height:710px;
float:right;
}
.advertisement_panel{
font-family:Arial;
font-size:15px;
color:#FFF;
}
I hope I supplied you guys with enough information =)
Miro is right. Your image gets blocked by 'adblock plus' - this will quite probably be the same for the majority of your users.
Try to use that background file locally and name it something different from 'advertisement_panel'.
I see nothing wrong in Firefox - example.
But i have to turn off adblock plus, because it blocks that image.

Make a div appear as though the bottom left and right corners are lifting off the page a little using box shadow?

Does anyone know of a tutorial on how to do this, or does anyone have a little example?
example: http://hazelmade.com/projects.html
The 'lifted corners' example on this CSS drop-shadows without images demo page shows it's possible without using images. It relies on CSS3 support, specifically box-shadow and transform but this is to be expected from a pure CSS solution.
Full details of the technique can be found in the main article by Nicolas Gallagher.
The shadow on that site is a custom made image tailored to the specific width of those elements.
If you wanted to follow a similar technique that they did, you could just add a child image absolutely positioned below the div...
jsfiddle example: http://jsfiddle.net/gbFNk/
HTML:
<div id="example">
content here...
<img id="shadow" src="http://hazelmade.com/images/drop_shadow.png" />
</div>
css:
#example {
width:796px; //your tailor made shadow needs to be this long
height:100px;
position:relative;
background:grey;
}
#shadow {
position:absolute;
bottom:-15px; //this is the height of the custom image.
}
Alternatively, if you need a drop shadow like that with varying width you make 2 shadows (one for each corner) and do something like the following:
HTML:
<div id="example">
content here...
<div id="dropshadow">
<img class="left_shadow" src="leftshadow.png" />
<img class="right_shadow" src="rightshadow.png" />
<div style="clear:both"></div>
</div>
</div>
css:
#example {
width:796px;
height:100px;
position:relative;
background:grey;
}
#dropshadow {
width:796px; //needs to be the same width as the parent div
position:absolute;
bottom:-15px; //this still needs to be the height of the custom images.
}
#dropshadow img.left_shadow {
float:left;
}
#dropshadow img.right_shadow {
float:right;
}

weird IE bug?

I've spent too much time trying to get this to work on IE 7. It's working on ff and the only errors coming up on validator are missing alt tags for images (9 errors).
The entire site works except for this one part, and so I'm wondering if there's a weird float bug that I'm unaware of.
I have a div with an image inside of it. Under the image I have 3 divs that contain images. There is a slight gap between the image at the top of the div and the divs under it
Here's my code:
<div class="header_banner">
<img src="html_images/banner.jpg" />
<div class="header_left"></div>
<div class="header_main" id="header_menu">
<ul>
<li>Home</li>
<li>Studio</li>
<li>School</li>
<li>Events</li>
<li>Shop</li>
</ul>
</div>
<div class="header_right"></div>
</div>
Here's the CSS:
.header_banner
{
float:left;
width:531px;
}
.header_left
{
float:left;
background-color:#003399;
background-image:url('../html_images/header_left.jpg');
background-repeat:no-repeat;
background-position:48px;
width:55px;
height:33px;
}
.header_right
{
float:left;
background-image:url('../html_images/header_right.jpg');
width:7px;
height:33px;
}
.header_main
{
float:left;
background-image:url('../html_images/header_main.jpg');
background-repeat:repeat-x;
width:426px;
height:33px;
}
I wouldn't be surprised if I'm just missing something, but I've read through it 3 times now.
Any ideas? (I've setup a background-color to see exactly where the gap is)
Thanks
I would recommend using a reset stylesheet (or insert reset styles into the top of your stylesheet). It can help you avoid all sorts of issues like the one you are seeing.
You're right; it's probably an Explorer bug. Here's some more info: http://www.positioniseverything.net/explorer/floatIndent.html
It seems to be an issue with how IE handles margins. See if defining a margin (0px in this case) helps.
Have you tried adding style="display:block;" to your img element?
I also remember reading that whitespace after an tag can cause problems. Try adjusting your markup by removing the whitespace:
<div class="header_banner"><img src="html_images/banner.jpg" /><div class="header_left"></div> etc..