I want my submit buttons + links to look as buttons and the same in all browsers.
Firefox 3.5 plays nice. But IE6,7,8 have all different looks. Can you help me with that (apparently) simple task?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Crossbrowser css submit button, links</title>
<style type="text/css">
button {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
input {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
a {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
text-decoration:none;
}
</style>
</head>
<body>
Buy now
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>
You can replace the Submit button with an image the same way you do it with a background-image for a link. Simply get rid of the background and border, put the background-url in the input selector, and give it the right width and height.
input{
background-color: white;
border: 0;
background-image: url('blah.png');
}
For the button instead of type="submit" use type="image".
For instance:
<button type="image" src="path_to_your_image.png">Buy now</button>
For link you can use css to set the background of your link:
background-image: url('path_to_your_image.png');
I take it you do understand that you'll never get them to look exactly the same, since even in Firefox 3.5 they don't look exactly the same for me.
And apart from purely the style, they'll always have different behavior. For example, buttons will respond differently to tabbing or clicking (some browsers "depress" the text), buttons won't show the URL they point to in contrast with links, and you can select the text of a link, but not that of a button.
You can fix the most glaring differences on IE6 and 7 quite easily, though.
Add this to the CSS for your buttons (<button> and <input>):
overflow: visible;
You can put it inside a stylesheet for IE6/7 only, though this shouldn't affect any other browser, since visible is actually the default value. But for some reason this fixes the inconsistencies with the padding, compared to that for the link, on IE6 and IE7.
And add the following to the CSS for the link. All browsers need this, to make the link behave more like a block element, just like the buttons:
display: inline-block;
I know this is an old question, but I recently ran into this issue and didn't want to use any images in my layout. The solution I came up with (after making the links blocks, as others suggested) was to explicitly setup the borders, fonts, and background colors. To get the borders to match, set them individually. Originally I was trying to use outset borders, but I had better success using solid borders with specific colors for top, left, bottom, and right. (I chose the colors based on what firefox was using for its outset borders.) Hope this helps someone. Also, adding a border-radius to the links and buttons makes them a bit cleaner.
If you want a uniform appearance, you'll need to use an image submit button.
You could always use a JavaScript framework to replace the element with one that is more stylable or use MSIE's conditional comments for browser-specific styling.
Sad truth is cross-browser pixel perfection seems impossible with pure CSS and buttons.
Related
I'm working on this site: http://amberdreams.com
This is a pretty simple site, and I've been using netrenderer.com to make sure that all the pages work in Internet Explorer.
Despite my best efforts, I have not been able to remove the blue border around the facebook and twitter links on the home page for this site when viewing it with Internet Explorer 9.
img {border: none; }
a img {border: 0px; }
I've tried variations of the code above, and it successfully removes the blue border for every version of IE except 9. Any ideas?
Try this in your CSS, worked for me.
img {text-decoration: none; border: 0px}
Try the following instead in your css:
border-style:none;
That should remove your border issue.
I think that should be fine.
You might want to clear your cache and try again...
If not maybe try:
a{border:none}
Visibility of the border around links depends on user settings in IE. Set A {text-decoration: none; border: 0px}.
It seems, that your video-object is not loaded in IE.
Here is great post on removing outline with separate remark about IE9:
George Langley wrote in to say that IE 9 apparently doesn't allow you to remove the dotted outline around links unless you include this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
//Add to your CSS
* {-ms-box-sizing:border-box;}
img {outline-style: none;}
//Add to your HTML
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
in my case the working code (generated by mailchimp and added a rule for 'a') was:
img,a img,a{
border:0;
height:auto;
outline:none;
text-decoration:none;
}
so it is an assumption of other answers
The best way is to add a CSS attribute
a:link, a:visited { text-decoration: none}
If you want to change colors when you hover the mouse, add
a:hover {color: x } // x = the color of your choice
We've got a site wide style sheet that's setting the background on a:link to transparent. This is causing a problem displaying the icons from jqueryui. In the example below the trash can icon associated with the ui-icon-trash CSS class is not being displayed because the a:link background property overrules it.
I could apply the same styles ui-icon-trash uses to the link in question but that will be fragile if the jqueryui theme were ever to be updated in the future. Is there a way I can get the jqueryio icons to display at the same time as having a site wide background:transparent property on a:link?
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<style>
a:link {
text-decoration: underline;
color: #066E37;
background: transparent;
}
</style>
</head>
<body>
<a class="ui-icon ui-icon-trash" href="#"></a>
</body>
</html>
I don't see a real solution there, but I can offer two hacks:
Put an additional <span> inside the <a> and apply the css to this element.
Don't use <a> but <button> instead. Drawback: this would require additional javascript to make the button work.
If it is sufficient to override only the background color of your links, background-color: transparent instead of background: transparent could do the trick (but I guess you might have thought of that already).
I have input and label fields:
<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />
and CSS:
body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm { font-size:0.9em; margin:0 0 3px 3px; }
When the code opens up in Firefox the fonts are not the same. Firebug shows that both "should" inherit and when I look at computed it shows the label uses Verdana. However the input shows it uses "MS Shell Dlg".
Can anyone explain what's happening and why it doesn't seem to obey the normal CSS rules?
It does not inherit by default but you can set it to inherit with css
input, select, textarea, button{font-family:inherit;}
demo: http://jsfiddle.net/gaby/pEedc/1/
Form items (inputs/textarea/etc) don't inherit font information. You'll need to set the font-family on those items.
Three years later, I'm finding it strange <input> elements of types reset, submit, and button don't inherit font-family in Chrome or Safari. I discovered they would not receive padding either.
But when I mess with certain properties, like background, border, or this strange appearance property, then font-family and padding have effect, but the native look and feel of the button is lost, which is not a problem if you are completely restyling the buttons.
If you want a native looking button, with inherited font-family, use the <button> element instead of <input>.
See Codepen.
I've had the same problem. What worked for me was adding the style directly to the input element in the html. I'm coding in React fyi.
<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />
This question is 10 years old, and some people coming to this recently may find that adding the right <meta> information at the top of the HTML page will fix similar issues experienced on mobile devices - try:
<meta name="viewport" content="width=device-width, initial-scale=1">
MDN has a good guide to what the viewport meta information does
I know in order to include a browser specific css file you can do the following
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-->
But is there a way to do this in the actually stylesheet itself?
EDIT
Thanks for the replies, I am just going to build a new IE specific stylesheet and override what I need there. I think this is prob the best way to do things.
Check this post, scroll down to Hacks:
http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices
Actually, yes there is.
It wont validate, but if you add _ before the property name so div {width: 200px;_width: 100px;} will be 200px wide in non-ie browsers and 100px in IE.
I have decided that building a separate stylesheet and then using the comment IF statement is the best solution. Keeps the stylesheets clean and it is more obvious to others as to what you are doing (overriding properties due to browser quirks).
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="StyleIE.css" />
<!-->
These work...
.foo{
border:1px solid #000;
*border:3px dotted #00f;/*IE6 & IE7 Only*/
_border:2px dashed #f00;/*IE6 Only*/
}
Thus the outcome is:
W3C Browsers (Firefox, Safari, Opera, etc.)
1px solid black border
IE7
3px dotted blue border
IE6
2px dashed red border
As a last resort (and not highly recommended) you can use the dynamic properties by using expression() then test for the browser version (if you care)
you can also use the !important flag to do this, but that may have unintended side effects.
Click Me I'm !important
Has anyone been able to succesfully use the IE CSS hack #IEroot? I stumbled upon it from this article but it doesn't seem to work for me.
I'm trying to fix/hack the inline styling bug to produce li inline blocks
#featured li {
margin:0px;
padding:0px;
width:317px;
height:310px;
display:inline-block;
border-left:1px #bdbdbd solid;
}
#IEroot #featured li {
display:inline;
}
Any help would be greatly apperciated, thanks.
IT DOES WORK, exactly as described, EVEN in IE8, and is actually a pretty smart CSS hack to get around IE specific bugs.
You MUST swap out the DOCTYPE line for a REAL DOCTYPE though first.
Here is the code from the link, tweaked to be a working sample.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
/* all browsers make border red */
#IE { border : 2px solid red; }
/* all browsers see this, but only IE thinks #IEroot exists as an element and makes border blue */
#IEroot #IE { border-color : blue; }
</style>
</head>
<body>
<!--[if IE]>
<div id="IEroot">
<![endif]-->
<p id="IE">This browser is IE. (red in all, blue in IE)</p>
<p id="notIE">This browser is not IE.</p>
<!--[if IE]>
</div>
<![endif]-->
</body>
</html>
I'm using a beta of IE8, and the example on the page that you are referring to does not work. The live demo also doesn't seem to take IE8 in count.
These kinds of hacks are clever, but I'd advice you to stay away from it.
Whenever you encounter differences between browsers, there are always alternative ways to do the same thing in such a way that it works for all browsers.
I've made more websites full of CSS than I can count, and I never ever resort to browser-specific code, especially not the kind that exploits bugs in specific versions of browsers. They solve a tiny problem today, but give you twice the headaches tomorrow, and are a bitch to maintain.
If you insist on using such a hack, make sure to add a comment like this:
/* >>>>>>> BUTT-UGLY BROWSER HACK! FIX ME!!!!! <<<<<<<< */
#IEroot #featured li {
display:inline;
}
:-)