I want to change the scrollbar color in Firefox. How can I do that?
Changing the scrollbar color in Firefox is not as trivial as it is in Internet Explorer and Opera. Firefox only allows the style of the scrollbar to be set by the theme. This is a good thing. Lots of users don't like having the look and feel of interface widgets randomly changed at the whim of a designer. Changing the look of interface pieces can be even more of a problem for visually impaired visitors who may be using a high contrast theme.
That said, if the scrollbar is contained within a <div> in your page, you can create a custom scrollbar and make it functional using JavaScript. This jQuery plugin looks like it would do the trick pretty nicely: http://jscrollpane.kelvinluck.com/
I think this is more or less what you want to do: http://martinsmucker.com/demo/scroller.html
Here's how it works:
Inside the document's <head>, we have to reference several stylesheets and scripts (which you've probably already downloaded from http://jscrollpane.kelvinluck.com/.
This is where a vast majority of the magic happens:
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding:0;
}
#container {
height:100%;
width:100%;
margin: 0;
padding:0;
overflow: auto;
}
</style>
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll-pane').jScrollPane();
});
</script>
This assumes that the css and js files are located in the same directory as your html file. We start by linking to the provided stylesheet.
Then, add a bit of CSS to prevent the normal scrollbars from showing. Set the margin and padding of html and body to 0, and set the height to 100%. All of our content will be wrapped in a div with an id of "container". This container fills the page exactly (height: 100%; width:100%;) and it steals the scrolling so that we can customize the scrollbar (overflow: auto;).
Then we reference all of the appropriate scripts. Here I'm using the copy of jQuery hosted by Google, and again I'm assuming that all of the local scripts are in the same directory as the html file. The last little bit of jquery finds all of the divs with the "scroll-pane" class and adds the appropriate elements and scroll functionality to them.
The html is then very simple.
<body>
<div class="scroll-pane" id="container">
All of your content for the page goes here.
</div>
</body>
If you've done everything right, your page should look like my example.
Chrome and Safari do support the coloring of the scrollbars. Place the following code in your css and see the magic happen:
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #969696;
-webkit-border-radius: 1ex;
}
::-webkit-scrollbar-thumb {
background: #2B2B2B;
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #1A1A1A;
}
The only thing missing is for firefox to support this feature.
Since version 64 Firefox allows limited styling of scrollbars:
.my-scrollable {
scrollbar-color: red blue;
scrollbar-width: thin;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
It is not possible directly via CSS.
But if you can use jQuery, jscrollpane may help you.
you can't. as you can see here, this is only possible fpr IE5+ and Opera7.2+.
EDIT: with a bit of javascript it could be possible to build you own "html-scrollbars" that could be styled like you want them - but i don't think you should do that, writing this just to be detailed.
Well, I have heard someone saying "It's Impossible"...
But I don't believe in the impossible.
In the follwing example I only want to stylize the <ul> list in the main sidebar. Simply try this solution for Firefox scrollbar stylizes:
<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>
The Css will be:
.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}
.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}
.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}
Here are the final results:
(Note: The first image is the default scrollbar color).
This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)
Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars
are shown in the window. This attribute is "replaceable"
in JavaScript. Read only
Firefox also has the following vendor specific properties:
overflow: -moz-scrollbars-none
other valid values are -moz-scrollbars-horizontal and -moz-scrollbars-vertical.
for Firefox or cross browser you can use :
jQuery custom content scroller
more simple and easy to use
here sample i implement in magento and tested on firefox, opera, chrome and safari : http://i.stack.imgur.com/wnRCL.png
In Firefox V103 coloring scrollbar works with:
html, body{scrollbar-color: #f33942 #000;}
Related
I have followed instructions verbatim using border:none and background:transparent, but a border still shows in the my text areas. I am using a background image to customize the look, but can not seem to remove the border.
website in question
http://www.officeyoganyc.com/
markup
<div class="fieldHolder">
<div class="attributeinput1"><input type=text name=email value="email" size="16">
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div>
</div>
css
.fieldHolder
{
width: 137x;
height: 24px;
background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
margin-left: 209px;
margin-top: 162px;
}
.attributeinput1
{
border: none;
color: #000000;
background: none repeat scroll 0 0 transparent;
color: #000000;
height: 22px;
margin-left: 5px;
margin-top: 5px;
width: 170px;
}
This selector:
.attributeinput1 {
Only styles the <div>. You want the <input /> inside the <div>:
.attributeinput1 input {
By the way, the input tag is self-closing:
<input ... />
Your site might look funky in IE if you omit the />, as it might be treated as the beginning of a block element.
Also, one more thing (just a nuance in HTML), the language= attribute in the <script> tag is depreciated (i.e. unsupported and old). You can safely omit:
language="Javascript"
in your <script> tags.
If you use Google Chrome or Firefox, there is a really useful tool you can use. In Firefox, it's called Firebug. In Google Chrome, it's called something like Inspector.
They both allow you to "inspect" the webpage's layout and see what CSS properties affect what elements.
Here's what I mean. Look at the right-hand-side:
I used this to confirm that your CSS wasn't being applied properly. To activate it, right click on any part of a webpage and click "Inspect".
Hope this helps!
You have too many attributes for your background and border definitions.
This should work.
.attributeinput1 input {
border:0;
background:none;
}
If not then try
.attributeinput1 input {
border:0!important;
background:none!important;
}
I've got a CSS conflict that's preventing me to set the width of a div and I'm really struggling to see where it is.
Can someone give me a hand?
It's this div here:
body.node-type-campaign #com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
A link to the page: http://www.wdm.org.uk/test-campaign
Thanks!
Remove the inline-style width:auto; from <div id="com_col_two">
Have you tried just:
#com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
And remove all the added properties on the <div> tag?
You have a lot of classes applied to the elements in your page.
Also, have you tried using Firefox with Firebug. I'm sure a lot of people would recommend using that.
Check out FF's Web Developer Toolbar or Chrome's Developer Tools: both have a CSS view which shows you which style definition affects this specific element (it is triggered by rightclick->Inspect element).
Sometimes I get a broken background in Chrome. I do not get this error with any other browser.
This is the simple CSS line responsible for the background color of body:
body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
This is exactly how I get this problem. I click a link included in an Gmail's email and I get something wrong (no background). I then refresh the page and the background is colored completely.
How do fix this problem?
Never heard of it. Try:
html, body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
font-family: ...;
}
Ok guys, I found a solution,
. It's not great but does the trick with no side effects.
The HTML:
<span id="chromeFix"></span>
(put this below the body tags)
The CSS:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }
What this does to solve the issue:
It forces Chrome to think the page's content is 100% when it's not - this stops the body 'appearing' the size of the content and resolves the missing background bug. This is basically doing what height: 100% does when applied to the body or html but you don't get the side effect of having your backgrounds cut off when scrolling (past 100% page height) like you do with a 100% height on those elements.
I can sleep now =]
I had the same issue on a couple of sites and fixed it by moving the background styling from body to html (which I guess is a variation of the body {} to html, body{} technique already mentioned but shows that you can make do with the style on html only), e.g.
body {
background-color:#000000;
background-image:url('images/bg.png');
background-repeat:repeat-x;
font-family:Arial,Helvetica,sans-serif;
font-size:85%;
color:#cccccc;
}
becomes
html {
background-color:#000000;
background-image:url('images/bg.png');
background-repeat:repeat-x;
}
body {
font-family:Arial,Helvetica,sans-serif;
font-size:85%;
color:#cccccc;
}
This worked in IE6-8, Chrome 4-5, Safari 4, Opera 10 and Firefox 3.x with no obvious nasty side-effects.
I was able to fix this with:
html { height: 100%; }
HTML and body height 100% doesn't work in older IE versions.
You have to move the backgroundproperties from the body element to the html element.
That will fix it crossbrowser.
Simple, correct, solution - define the background image and colour in html, not body. Unless you've defined a specific height (not a percentage) in the body, its height will be assumed to be as tall as required to hold all content. so your background styling should go into html, which is the entire html document, not just the body. Simples.
After trying all of the other solutions here without success, I skeptically tried the solution found in this article, and got it to work.
Essentially, it boils down to removing #charset "utf-8"; from your CSS.
This seems like a poor implementation in DreamWeaver - but it did fix the issue for me, regardless.
I am not sure 100%, but try to replace selector with "html, body":
html, body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
I would try what Logan and 1mdm suggested, tho tweak the CSS, but I would really wait for a new Chrome version to come out with fixed bugs, before growing white hair.
IMHO the current Chrome version is still alpha version and was released so that it can spread while it is in development. I personally had issues with table widths, my code worked fine in EVERY browser but could not make it work in Chrome.
Google Chrome and safari needs a tweak for body and background issues.
We have use additional identifier as mentioned below.
<style>
body { background:#204960 url(../images/example.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px; }
#body{ background:#204960 url(../images/example.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px;}
</style>
<body id="body">
Use both body and #body identifier and enter same styles in both.
Make the body tag with id attribute of body.
This works for me.
Adam's chromeFix solution with Paul Alexander's pure-CSS modification solved the problem in Chrome, but not in Safari. A couple additional tweaks solved the problem in Safari, too: width: 100% and z-index:-1 (or some other appropriate negative value that puts this element behind all the other elements on the page).
The CSS:
body:after {display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:-1; content: "";}
I had the same thing in both Chrome and Safari aka Webkit browsers. I'm suspecting it's not a bug, but the incorrect use of css which 'breaks' the background.
In the Question above, the body background property is set to:
background: black;
Which is fine, but not entirely correct. There's no image background, thus...
background-color: black;
I'm seen this problem with Chrome too, if I remember correctly if you minimize and then maximize your window it fixes it as well?
Haven't really used Chrome too much since it was released but this is definitely something I blame on Google as the code I was checking it on was air tight.
Everybody has said your code is fine, and you know it works on other browsers without problems. So it's time to drop the science and just try stuff :)
Try putting the background color IN the body tag itself instead of/as-well-as in the CSS. Maybe insist again (redudantly) in Javascript. At some point, Chrome will have to place the background as you want it every time. Might be a timing-interpreting issue...
[Should any of this work, of course, you can toggle it on the server-side so the funny code only shows up in Chrome. And in a few months, when Chrome has changed and the problem disappears... well, worry about that later.]
It must be a WebKit issue as it is in both Safari 4 and Chrome.
I'm pretty sure this is a bug in Chrome. Most likely it happens if you resize the browser TO full screen, then switch tabs. And sometimes if you just switch tabs/open a new one. Good to hear you found a "fix" though.
When you create CSS style using Dreamweaver for web designing, Dreamweaver adds a default code such as
#charset “utf-8″;
Try removing this from your stylesheet, the background image or colour should display properly
Source
body, html {
width: 100%;
height: 100%;
}
Worked for me :)
Here is how I ended up solving the problem:
This was the actual issue, clearly the body tag defined in CSS was not picked up.
My environment: Chrome Browser/Safari,
First time when it does not work, So according to the thread recommendation here I ended up adding the css file with the html entry
Sample CSS file: mystyle.css
<style type="”text/css”">
html {
background-color:#000000;
background-repeat:repeat-x;
}
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
</style>
Sample html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.6), see www.w3.org">
<title>Test Html File</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<h1>Achieve sentence with Skynet! READ MORE</a></h1>
</body>
</html>
After the first loading it will work in Chrome and then go back to CSS file comment the html entry, so your modified CSS will be
<style type="”text/css”">
// html {
// background-color:#000000;
// background-image:url('bg.png');
// background-repeat:repeat-x;
// }
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
</style>
Clearly seems to be bug in webkit, Saw the same behavior in Safari as well. Thanks for sharing the html information, have been hunting around forever of why the body tag was not working.
The final output is something like this:
Oddly enough it doesn't actually happen on every page and it doesn't seem to always work even when refreshed.
My solutions was to add {height: 100%;} as well.
My Cascading Style Sheet used:
body {background-color: #FAF0E6; font-family: arial, sans-serif }
It worked in Internet Explorer but failed in Firefox and Chrome. I changed it to:
body {background: #FAF0E6; font-family: arial, sans-serif }
(i.e. I removed -color.)
It works in all three browsers. (I had to restart Chrome.)
IF you're still having trouble, you may try switching 'top' to 'bottom' in chromeFix above, and also a div rather than a span
<div id="chromeFix"></div>
style:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }
I got this page, and have some problems with ie < 7 and opera 7.11
This is what i hoped to be the layout in all browsers, and these are the IE ones instead: ie 5.5 and ie 6.0.
the xhtml is quite simple:
print "<div id=\"page\">
<div id=\"header\">
<ul id=\"nav\">
<li>Címlap<div>Az oldal címlapja</div></li>
<li>Blogok<div>Minden bejegyzés</div></li>
<li>Friss tartalom<div>Aktuális témák</div></li>
</ul>
</div> <!-- header -->
<div id=\"main\"><div id=\"main-in\">
<div id=\"right\">";
do_boxes();
print "
</div> <!-- right -->
<div id=\"left\">";
do_content();
print"</div> <!-- left -->
</div></div><!-- main --> </div>";
Where a the content made from posts and a post looks like:
<div class="post">
<h2>Newcastleben betiltották a ketreces tojást</h2>
<div class="author">warnew | 2008. october 16. 20:26 </div>
<p>Az angliai Newcastle Városi Tanácsa kitiltotta a ketreces baromfitartásból származó tojásokat az iskolai étkeztetésből, személyzeti éttermekből, rendezvényekről es a "hospitality outletekből".</p>
<p>A ketreces csirke- és pulykahúst még nem tiltották be, de vizsgálják a kérdést, ahogy a Halal hús és a ketreces tojásból készült sütemények és tésztafélék tiltását is.</p>
<ul class="postnav">
<li>Tovább</li>
<li>Hozzászólások (0)</li>
</ul>
</div> <!-- post -->
and a box is like this:
<div id="ownadbox" class="box">
<h5>Viridis matrica</h5>
<img src="http://viridis.hu/files/viridis_matrica_jobb.png" alt="viridis matrica"/>
</div>
The -what i think is - relevan css:
body {
background : transparent url(/images/design/background.png) repeat;
}
#page {
margin : 0px auto;
width : 994px;
background : transparent url(/images/design/header.jpg) no-repeat top left;
}
div#header {
width : 746px;
margin : 0px auto;
}
div#header ul#nav {
padding-top : 170px;
margin-left : 3px;
margin-right : 3px;
border-bottom : #896e51 solid 7px;
overflow : hidden;
}
div#header ul#nav li {
display : block;
float : left;
width : 120px;
margin-bottom : 7px;
}
div#main {
width : 746px;
margin : 0px auto;
}
div#main div#main-in {
padding : 30px 20px;
background : transparent url(/images/design/content-background.png) repeat-y top left;
overflow : hidden;
}
div#main div#main-in div#left {
width : 460px;
overflow : hidden;
float : left;
}
div#main div#main-in div#left div.post {
clear : left;
margin-bottom : 35px;
}
div#main div#main-in div#right {
width : 215px;
float : right;
}
div#main div#main-in div#right div.box {
margin-bottom : 30px;
clear : both;
}
The live version is here, but after I got it fixed it's gona move - thats the reason behind the long codes in the post.
Do you really need to support IE5.5? That seems needlessly painful. Unless you're explicitly doing this for a client who's using the browser, you can pretty much assume that everyone uses IE6 or later.
The CSS support in IE6 is flaky, and almost nonexistent in IE versions older than that. Your best bet for such ancient browsers may be to just display a separate version of the site for those
Edit:
There are several things you can do to patch up IE. Conditional comments can be used to add specific javascript and CSS hacks for various versions of IE, and the following files in particular, do a lot to add in missing functionality:
<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->
In addition, make sure IE doesn't jump into quirks mode. There are simple javascript snippets that test which mode the current page is being rendered in, but the main way to avoid quirks mode is to ensure that there is nothing (not even the <?xml prolog tag) before the doctype, and that the doctype is strict.
IE was never famous for its CSS support (it's infamous for its lack of support, and its bugs)... But if you really want to support old IE versions I recommend that you use conditional comments to add extra CSS files for the specific quirks of the older versions. But before you apply specific css, try making the pure HTML as semantic as possible, make its layout is almost how you want it without CSS, then style it afterwards.
I would also recommend that you check out Yahoo's YUI Reset CSS wich makes consistent styling a lot easier. I actually had to add just 3 lines of CSS specifically for IE7 to make a large project look OK, when I used it(!). And by the way: always code by the standards, and test in Firefox, Opera or Safari first, test later in IE.
Opera 7 is pretty old, I would guess most Opera users update their browsers more often than IE users (since they've actually made a choice to switch browsers).
I can live without ie 5.5, and opera 7 but ie 6 is important.
I'm already using a reset.css, and I sure can conditional styles.
So the problem was the following: ie<7 didn't picked up the correct height for the ul#nav and div#main-in elements. Adding the style: height: 100%; to them solved the problem.
Take a look at a stripped-down layout that works, such as on A List Apart.
Start with a working layout such as this and then edit it to your liking. I find this is easier than trying to fix a broken layout.
Well, your CSS is just fine, and it even validates in W3C, the problem is with old IE browsers. You'll have to hack your CSS with ugly code to make it work in those browsers.
Or you can just redirect users of those browsers to a simpler version of the website.
Start by fixing validation errors. I know it's silly to expect IE 5.5 to follow standards, but it might help for Opera. Other thing to thing about is whether you really need to support these ancient browsers.
Do your markup and CSS correctly for the now/future browsers... but to fix the specific versions of IE, I would recommend making a seperate css file, and only conditionally referrencing them. This way, you don't have to muddy up your good design or CSS files with hacks.
Also, shoot for IE6, but don't worry about IE5. It's less than 0.1% of the market now: http://www.w3schools.com/browsers/browsers_stats.asp
I am implementing a design that uses custom styled submit-buttons. They are quite simply light grey buttons with a slightly darker outer border:
input.button {
background: #eee;
border: 1px solid #ccc;
}
This looks just right in Firefox, Safari and Opera. The problem is with Internet Explorer, both 6 and 7.
Since the form is the first one on the page, it's counted as the main form - and thus active from the get go. The first submit button in the active form receives a solid black border in IE, to mark it as the main action.
If I turn off borders, then the black extra border in IE goes away too. I am looking for a way to keep my normal borders, but remove the outline.
Well this works here:
<html>
<head>
<style type="text/css">
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background:none;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<span class="button"><input type="button" name="..." value="Button"/></span>
</body>
</html>
if you dont want to add a wrapper to the input / button then try doing this. As this is invalid CSS then make sre its for IE only. Have the border as per for other browsers but use the filter:chroma for IE...
<!--[if IE]>
<style type="text/css">
input {
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->
worked for me.
I know I'm almost 2 years late to the game, but I found another solution (at least for IE7).
If you add another input type="submit" to your form before any other submit button in the form the problem will go away. Now you just need to hide this new, black-border-absorbing-button.
This works for me (overflow needs to be "auto"):
<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />
Note: I am using an HTML5 doctype (<!doctype html>).
I've found an answer that works for me on another forum. It removes the unwanted black border in ie6 and ie7. It's probable that some/many of you have not positioned your input="submit" in form tags. Don't overlook this. It worked for me after trying everything else.
If you are using a submit button, make sure it is within a form and not just a fieldset:
<form><fieldset><input type="submit"></fieldset></form>
I was able to combine David Murdoch's suggestion with some JQuery such that the fix will automatically be applied for all 'input:submit' elements on the page:
// Test for IE7.
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$('<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />')
.insertBefore("input:submit");
}
You can include this in a Master Page or equivalent, so it gets applied to all pages in your site.
It works, but it does feel a bit wrong, somehow.
I'm building on #nickmorss's example of using filters which didn't really work out for my situation... Using the glow filter instead worked out much better for me.
<!--[if IE]>
<style type="text/css">
input[type="submit"], input[type="button"], button
{
border: none !important;
filter: progid:DXImageTransform.Microsoft.glow(color=#d0d0d0,strength=1);
height: 24px; /* I had to adjust the height from the original value */
}
</style>
<![endif]-->
Right, well here's an ugly fix for you to weigh up... Stick the button in a <span>, nuke the border on the button and give the border to the span instead.
IE is a bit iffy about form element margins so this might not work precisely. Perhaps giving the span the same background as the button might help in that respect.
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background: #eee;
border:0;
}
and
<span class="button"><input type="button" name="..." value="Button"/></span>
The best solution I have found, is to move the border to a wrapping element, like this:
<div class='submit_button'><input type="submit" class="button"></div>
With this CSS:
.submit_button { width: 150px; border: 1px solid #ccc; }
.submit_button .button { width: 150px; border: none; }
The main problem with this solution is that the button now is a block-element, and needs to be fixed-width. We could use inline-block, except that Firefox2 does not support it.
Any better solutions are welcome.
I think
filter:chroma(color=#000000); as metnioned a wile ago is the best as you can apply in certain class. Otherwise you will have to go and apply an extra tag on every button you have that is if you are using classes of course.
.buttonStyle {
filter:chroma(color=#000000);
BACKGROUND-COLOR:#E5813C solid;
BORDER-BOTTOM: #cccccc 1px solid;
BORDER-LEFT: #cccccc 1px solid;
BORDER-RIGHT: #cccccc 1px solid;
BORDER-TOP: #cccccc 1px solid; COLOR:#FF9900;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px; FONT-WEIGHT: bold;
TEXT-DECORATION: none;
}
That did it for me!
I had this problem and solved it with a div around the button, displayed it as a block, and positioned it manually. the margins for buttons in IE and FF was just too unpredictable and there was no way for them both to be happy. My submit button had to be perfectly lined up against the input, so it just wouldnt work without positioning the items as blocks.
This is going to work:
input[type=button]
{
filter:chroma(color=#000000);
}
This works even with button tag, and eventually you can safely use the background-image css property.
The correct answer to this qustion is:
outline: none;
... works for IE and Chrome, in my knowledge.
A hackish solution might be to use markup like this:
<button><span>Go</span></button>
and apply your border styles to the span element.
add *border:none
this removes the border for IE6 and IE7, but keeps it for the other browsers
With the sliding doors technique, use two spans inside of the button. And eliminate any formatting on the button in your IE override.
<button><span class="open">Search<span class="close"></span></span></button>
I can't comment (yet) so I have to add my comment this way. I thing Mr. David Murdoch's advice is the best for Opera ( here ). OMG, what a lovely girl he's got btw.
I've tried his approach in Opera and I succeeded basically doubling the input tags in this way:
<input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" />
<input type="submit" value="Go" />
This way the 1st element is hidden but it CATCHES the display focus Opera would give to the 2nd input element instead. LOVE IT!
At least in IE7 you can style the border althogh you can't remove it (set it to none).
So setting the color of the border to the same color that your background should do.
.submitbutton {
background-color: #fff;
border: #fff dotted 1px;
}
if your background is white.
For me the below code actually worked.
<!--[if IE]>
<style type="text/css">
input[type=submit],input[type=reset],input[type=button]
{
filter:chroma(color=#000000);
color:#010101;
}
</style>
<![endif]-->
Got it from #Mark's answer and loaded it only for IE.