This is the CSS I'm using to style a vertical scroll bar.
overflow-y: scroll;
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #COLOR_1;
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
background: #COLOR_2;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: #COLOR_2;
}
scrollbar-color: ${props => "#COLOR_2" + " " + "#COLOR_1"};
scrollbar-width: thin;
This is the result I expect (works on Chrome):
This is what I'm getting on Firefox:
How to get rid of the black line?
It comes from the top and goes all the way to the bottom.
I experienced the same thing and inspired by your comment, I did some more digging.
This appears to be a bug within Firefox. Screenshots are attached to that bug showing a similar black outline around the scrollbar as you experienced when setting scrollbar-color. It appears like it's an issue on Windows Firefox only.
A fix was pushed and appears to be slated to be released in Firefox 85.
There was a comment containing a workaround: "If you set widget.disable-native-theme-for-content=true in about:config and refresh" that the OP said fixed it, but if your app is public-facing will not be much help. I tried this workaround for my site and it did not work perfectly, it removed the black outline but added a few colored pixels at the top and bottom of the scrollbar (I believe it's related to up/down buttons which are hidden by scrollbar-width: thin)
Another workaround is to not set scrollbar-color and the black outline should go away, although that is not the ideal solution when Chrome works correctly when changing scrollbar color to match the theme of your site.
I have just encountered the strangest bug I have ever seen.
You can see a demonstration here: Fiddle
I have an iframe from google maps, wrapped in a div that has the following styles:
.container {
width: 600px;
background: red;
/* Problematic propeties */
box-shadow: 0px 40px 20px 0 blue;
perspective: 10px;
overflow: hidden;
/* ---- */
}
The only style the iframe has, other than default is display: block.
The issue is, that the iframe gets moved, depending on the value of box-shadow of its parent div. From my experiments i found out that it gets moved to the right by the: box-shadow blur - box-shadow x-position. Its a little hard to explain so i encourage you to take a look at my fiddle.
If i remove any of the css propeties that are in the "problematic propeties" comment, the issue goes away. My question is: Is there any way to fix this issue, without removing any of those propeties?
The issue is only visible in Chrome - Firefox and IE are fine.
I am updating an IE6-era website so that cosmetic differences in modern (IE8, Firefox 4 in this scenario) browsers are eliminated, or at least reduced.
We've ran into an issue with buttons, which are styled using background-color: #EFEFEF; and border: 1px. In IE6 this border setting neatly reduces the border on buttons.
However, in IE8 and Firefox 4 setting a CSS style of border: 1px completely removes the border.
I've tried using border_SIDE_color to set the color of the relevant sides of the button appropriately but this has no impact.
What approach should I use instead? This is a large legacy website, containing many buttons so I am looking for a CSS-only solution, if one exists. Forcing IE8 into compatibility mode is also not an option.
Try setting border-style: outset;. Or use the shorthand version with the other styles you're already using:
.mybutton {
border: outset #EFEFEF 1px;
}
For some reason I cannot display the dropdown menu on IE when I add a z-index in the header of any number. When I remove it, it works. However the dropdown then appears behind the container and content in Firefox and Chrome. So either I take it out or leave it in, I cant seem to satisfy all browsers. So i tried making a separate IE stylesheet without the z-index but that doesnt work either. I know the separate IE CSS is working because I changed the backgrounds but it uses the dropdown menu in the master stylesheet.
Website is www.stingrayimages.ca
Thank you for your help
Edit: So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div. Anyway to fix the dropdown menu without adding z-index to the head div?
Edit: I got the dropdown to work on IE9 firefox and chrome. Not IE 6, it just blew up.
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
z-index:1;
}
OK so I had a look and there's good news and bad ;)
the opacity filter in the #head div means that overflow: hidden is being triggered, which is why no menus (it's the unfortunate side effect of filters and overflow I'm afraid).. remove that and you can have your z-index which you need anyway
next to get the transparency (opacity) for your dropdowns you can just use rgba(255,255,255,0.9) on the #nav ul li ul rule instead of #fff; (though leave #fff before that rule for fallback for browsers that can't do rgba() yet.. read more!)
That's nearly everyone happy - now you can also do rgba() transparency for IE using the gradient filter..
so the rule I landed up with looked like this (in an IE conditional comment):
#nav ul li ul {
zoom: 1;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
/* behavior: url(PIE.htc);*/ /* yuk filter */
}
and I thought it would be good to go..
BUT the Bad News
the behavior is commented out because you can only have one or the other, transparency or rounded corners, :( apparently
I didn't do too much research though so YMMV
I also noticed a problem or three in IE7, not sure if you want to support that but in case you do.. or want to check my final code which got it to this stage I pasted it in PasteBin
that code replaces your main CSS - the #head rule and whole /*navigation*/ section
Update: more good news and a little bad!
you can have the transparency and the rounded corners thanks to CSS3 PIE's own -pie-background property, but not the box shadow as well, the way PIE deals with box shadow means it fills the div instead of just drawing on the outside so the -pie-background reading of the rgba background is transparent but shows the grey color used for the shadow!
My solution:
I added a border to make up for loss of box-shadow, it's not looking too bad, and it's working across IE's ;)
here's an update to the I conditional comment above:
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul {
box-shadow: none;
-pie-background: rgba(255,255,255,0.9);
border: 3px double #eee;
border-width: 0 3px 3px 3px;
behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->
I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless!
If you add a z-index and position to the #container as well, it should solve your problem. z-index only applies to positioned elements.
#container {
position:relative;
z-index:0;
}
It is also worth reading Overlapping and z-index, which summarises the properties and also describes the problems when using z-index and IE.
Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it. I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version.
So IE will have multiple copies of the same style being applied. Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property.
You have filter:alpha(opacity=93); in both style.css and ie-style.css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently. If you remove the filter from both stylesheets then the menu correctly displays in IE8.
If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.
Have a look at this solution : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Another solution that I used already is quite easy, but a pain in the *. You must all the parent container a specific lower z-index value than the one you want to show on top of the others.
Like so :
<parent>//z-index 1
<child>//zindex 2
<yourdropdown>//z-index3
Update 1
The menu didn't show correctly in my chrome so I fixed the #head z-index to 80 and it did way better. Do the following to get the layout the same in IE and Chrome and Firefox. Watch out though, I only tested those change on the homepage.
Add this to the .conbox class :
.conbox {
position:relative;
}
Place the logo correctly
#logo {
position:absolute;
left:0px;
top:0px;
}
Remove the #nav positioning
#nav {
margin-top:80px;
z-index:3;
}
The problem is, I can't even see any effect on the menu mouseover in IE!!
Setting z-index: -1 for elements that menu overlays and z index of men div resolved this problem for me.
#bodyWrapper
{
background: none repeat scroll 0 0 #E4F7FE;
overflow: hidden;
position: relative;
width: 100%;
padding: 0 0 60px;
z-index: -1;
}
The position of the text on the search submit button on my blog is very low in Firefox 4, but not Chrome 10 or IE9. I've tried almost everything, and nothing works except lowering the font size of the text, which isn't an optimal solution as the text will be too small.
Screenshots
Firefox 4 on Windows 7:
Google Chrome 10.0.648.204 on Windows 7:
The relevant HTML:
<form method="get" class="searchform" action="http://eligrey.com/blog">
<input type="search" placeholder="search" name="s" />
<input type="submit" value="🔍" title="Search" />
</form>
The relevant CSS rule (from http://eligrey.com/blog/wp-content/themes/eligrey.com/style.css):
.searchform input[type="submit"] {
font-family: "rfhb-lpmg";
color: #ccc;
font-size: 3em;
background-color: #959595;
text-align: center;
border: 1px solid #888;
height: 34px;
width: 42px;
line-height: 34px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition-property: border, background-color, box-shadow;
-webkit-transition-duration: 0.2s;
-moz-transition-property: border, background-color, box-shadow;
-moz-transition-duration: 0.2s;
}
rfhb-lpmg is just a custom font I made which implements U+2767 rotated floral heart bullet and U+1F50E right-pointing magnifying glass with simplistic glyphs.
I've deduced that the main trouble is the line-height property.
Both browsers attempt to vertically center all text on buttons. In combination with the height property, however, if there is not enough room to render the full standard line-height (glyph padding grows quite large with large font sizes), both browsers will pin the glyph to the top of the button, trimming the bottom.
Normally, the line-height would help adjust this, and in Chrome, in your example, this was successful. However, in the case of button and input type="submit" elements, Firefox ignores line-height altogether, so it can't be used in this way to "fix" the positioning of the character. Using the extreme example below, we can see that the text has been pushed out of visbility in Chrome, while it still stays right in the (vertical) center in Firefox.
<!doctype html>
<html>
<body>
<style type="text/css">
input {
border:1px solid black;
line-height:1000px;
height:40px;
}
</style>
<input type="submit" value="Test"/>
</body>
</html>
Firefox:
Chrome:
When a button element is left to the native style (remove the border), line-height is ignored by both browsers (weirdly, Chrome also ignores the height but Firefox does not). As soon as the button is custom-styled, Chrome picks up the line-height but Firefox does not.
So what can you do?
If you still want to make use of CSS fonts...
First of all, make sure your font renders the glyphs in the same vertical-alignment that a standard font displays a basic full-height character, like H. (It appears you've done this for the most part, since your page looks significantly better than the screenshots in the question.)
Second, you'll notice that if you use a font like Arial, and display an H (at the same font size), it's also low. This is because the built in standard line-height of the font gives it quite a bit of room above the character. This indicates that you may have some success if you can edit the font to trim this, thereby giving the character enough room to not be trimmed at the bottom by the browser.
Probably less ideal to you, but still an option, you can use other elements, either in combination with or in place of the button/submit element, to get the character into place.
Alternative option
I'm not sure what your goal is in using CSS fonts, but often it is for some form of progressive enhancement/graceful degradation. In this case, although (as you said in the comments) the special character is a standardized Unicode "right-pointing magnifying glass", it still will not have any meaning to the user if it doesn't render.
Given that the benefit of graceful degradation is to allow simpler technologies to display your website without appearing broken, the use of this character seems suspect — without CSS fonts or a native font with this character, it will render as 🔍 a ?, or simply a blank box.
A better option for graceful degradation, given this problem, would be to simply use a background-image. Make the text of the button "Search", hide the text (through CSS), and apply the background image, and then you have actual graceful degradation, and a fancy character for better browsers.
A background image could also (obviously dependent on the files themselves) have other benefits, such as faster load and render times (for instance, if a developer wanted to use a single character from a full-character-set font).
FF4 sets it's own styles on input elements. You can check all of them if you paste this in your URL field:
resource://gre-resources/forms.css
Alternatively you can see this styles if you check Show user agent CSS from Style tab dropdown if you have Firebug instaled.
Check solution here: How to reset default button style in Firefox 4 +
I came to the same conclusion as Renesis, though I wasn't sure whether Firefox wasn't respecting line-height or vertical-align. Here is the outline to a different solution that allows you to continue to use your fancy glyph. Since you are using pixel-sizes for your button, try something along these lines (simplified html). This might be overkill, and a background-image would almost certainly be more appropriate, but anyway.
The simplified html:
<div class="searchform">
<input type="search" placeholder="search" name="s" />
<span><input type="submit" value="🔍" title="Search" /></span>
</div>
And the simplified css:
// hide the border and background for the submit button
.searchform input[type="submit"] {
border: none;
background: transparent;
}
// give the span the properties that the submit button has now
span {
position: relative;
width: 30px; // or whatever
height: 30px; // or whatever
}
// absolutely position the submit button
.searchform input[type="submit"] {
position: absolute;
margin-top: -15px; // half the span height
margin-left: -15px; // half the span width
top: 50%;
left: 50%;
bottom: 0;
right: 0;
}
I had been facing a similar problem when using CSS inside buttons. The text was offset by 1 pixel in firefox, and rest of the browsers it was just fine. I used "padding" property specific to Firefox, in the following way
The original code in which the input button's text was one pixel lower in Firefox
.mybutton {
height:32px; background-color:green;
font-size:14px; color:white; font-weight:bold;
border:0px; -moz-border-radius:16px; border-radius:16px;
}
and after adding the Firefox specific padding after the above css, it was perfect in Firefox
#-moz-document url-prefix() {
.mybutton { padding-bottom:1px; }
}
In your case, may be you need a bit more padding-bottom, and probably padding-top in negative too (-1px or -2px).
I came across this when I was looking for a solution to this problem, but since I never really found anything other than a hint at changing the padding bottom I wanted to share that I found adjusting the padding-bottom for just firefox worked great.
Every other browser allowed for enough line-height control to adjust the text positioning.
/* This gets picked up in firefox only to adjust the text into the middle */
#-moz-document url-prefix() {
input[type="button"],
input[type="submit"],
button.btn {
padding-bottom: 6px;
}
}
I had something like this happen earlier this week - I found out that you have to apply certain ccs elements to the 'parent' element instead of the 'child'. So basically try some of the css like vertical-align: in the .searchform div.
Meanwhile, I'm having trouble with my search icon at smartemini.com. It works in aaaaallllll browsers except ie9. :(
I ran into the same.
I was able to solve my issues, pushing padding from the bottom (!)
padding: 0 0 2px 0; /* total height: 36px */
height: 34px;
or, in a bigger picture, if you fancy consistent input['..'] and anchor button, use distinct overriding tweaking for the latter for full control.
/* general button styling for input and anchor buttons */
.buttonXS, .buttonS, .buttonM, .buttonL {
display: block;
font-size: 14px;
line-height: 14px; /* just a precaution, likely ignored in FF */
padding: 0 0 2px 0; /* total height: 36px */
height: 34px;
...
}
/* distinct vertical align for anchor buttons */
a.buttonXS, a.buttonS, a.buttonM, a.buttonL {
padding: 12px 0 0 0; /* total height: 36px */
height: 24px;
}
(the 'T-shirt-sizes' lead to different background-offsets and widths elsewhere)
What you're seeing here is how differently browsers render text inside button elements when space is tight. Chrome centers the test vertically, while Firefox top-aligns it.
On top of that, you're using a home-made font, that might have some latent issues when it comes to vertical-height/leading/etc.
I note that when I add any other character to the input's value - the magnifying glass drops down even further in Firefox. This suggests that tweaking the font somehow (like vertical-position, or cropping away top/bottom white-space) might help.
If that fails you should change your <input type="submit"/> into a <button type="search" title="Tooltip">Label</button> element, and see if styling the button is any easier than styling the input.
If the problem still remains, you'll need to switch tactics and wrap your button in a <div class="btnwrap" />.
.searchform .btnwrap {
display: inline-block;
overflow: hidden;
height: 32px;
border: 1px solid #888;
/* plus the border-radius styles */
}
.searchform button {
/* all the original button styles, except the border */
height: 50px;
margin: -9px 0; /* (32-50)/2 = -9 */
}
(BTW, You can alternatively inner-wrap button text in a <span/> and do similar negative-margin hack to that, although I suspect that getting the vertical-centering is easier with the button inside adiv.)
That said, you really should just use a good old fashioned background image replacement - it will both render and load faster. :-)
Good luck!
This problem only happens on Firefox 4/Win7 with DirectWrite enabled render mode (which is enabled by default). Firefor4 GDI render mode is working properly.
It might caused by the vertical-align attribute is baseline. But the baseline of U1F50D sin't on the lowest point. Maybe you should try to move the font points a little higher, set the lowest point's y point to 0.
lots of anwsers here... i think this is the simplest way to do this :
.searchform input[type="submit"]
{
height: 35px;
line-height: 35px;
font-size: 2em;
}
Hope this helps =D
I have found that a combination of padding and line-height does the trick. As stated Firefox ignores line-height.
Make sure you set a larger bottom padding than top padding. Fiddle around with it a bit and you will be able to vertically align the text in Firefox.
You will then see that this pushes the text too close to the top of the element in Webkit. Now use a large line-height to align it properly in Webkit and voila!
I have tested this on a Windows 7 machine running Firefox 7, Chrome 16, Safari 5.1 and IE9.