I am using YUI3's reset stylesheet and PT Sans from Google webfont.
I have reduced my test case down to this:
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.0pr4/build/cssreset/cssreset-min.css">
<ul>
<li>
<input type="submit" value="Create Role" name="submit" id="submit">
</li>
</ul>
And the styles:
input[type=submit]{
background: #000000;
font: 13px 'PT Sans', sans-serif;
margin-left: 15px;
padding-bottom: 5px;
height: 38px;
color: #FFFFFF;
border: 0;
width: auto;
}
I have only tested in IE9, chrome 17 and Firefox 11. In Firefox, the text is in the center of the button, but in Chrome and IE, the text is not in the center.
Fiddle here: http://jsfiddle.net/Gx79V/6/
And an image for comparison:
The buttons look pretty unprofessional in chrome due to this. How can this be fixed?
Solved the issue by using this:
//Remove paddings
input, button{
padding: 0;
}
//Remove for mozilla
input::-moz-focus-inner {
border:0;
padding: 0;
}
this here is working fine in chrome and ie i just removed the padding bottom
Related
I created social media icons in my navbar as below. It works fine in my browsers (Chrome, Edge) but for my partner, in South Africa: it does not show at all for them, using the same browsers.
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
Within NAVBAR:
<ul class="social-icons">
<li></li>
<li></li>
<li></li>
</ul>
Custom CSS:
.social-icons {
padding: 0px;
margin: 0px;
}
.social-icons li {
display: inline-block;
list-style: none;
background: #00917C;
margin: 10px 0px 0px 0px;
border-radius: 5px;
}
.social-icons li a {
color: #FFFFFF;
text-decoration: none;
font-size: 20px;
padding: 10px 15px;
text-align: center;
transition: all 0.4s ease-in;
}
.social-icons li a:hover {
background: #d54ab6;
color: #fff;
}
As currently displayed, it works fine in my browsers, here in the USA. So strangely enough, it does not work in my partners browser in South Africa.
As i tried to display them on my pc, they aren't displayed on one of my browsers. So i moved this outside of it and it wont display it. Then i tried to change the a to i and it wont display. So on, the problem must be that the css sheet of font-awesome isn't properly loaded into it or they are premium icons. I don't know if that's correct, but it's just an idea to check.
Link to another question handling with font-awesome:
Font Awesome icons are not working, I have included all required files
Two same tags have different alignment in IE9. I've stored code in http://jsfiddle.net/9B2hK/, but when I see it in IE9 there both buttons have 5px intead on 6px. If I remove one line break tag, text alignment in second tag became OK.
Few words about my task. I need buttons styled by css. I've created .btn class which is used for anchor tag, for input tag with types "submit" and "button". I need button height be the same with text input field, so I've set it's height 20px. Also because I need it works in chrome and others I set line-height=14px and padding=3px for top and bottom to align text. I've tried to use vertical-align, but for some browsers it doesn't work good. But my styles works strange in IE9. I've removed unnecessary tags from my page and here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
font-size: 11px;
font-family: Verdana, Tahoma, sans-serif
}
.btn {
display: inline-block;
line-height: 14px;
padding: 3px 10px 3px;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
text-align: center;
color: #FFFFFF;
background-color: #5675B5;
vertical-align: middle;
}
</style>
</head>
<body>
<span class="btn">Search</span>
<br/><br/><br/><br/><br/><br/><br/>
<span class="btn">Search</span>
</body>
</html>
Remove the line-height and use css transform property.
.btn {
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 3px 10px 3px;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
text-align: center;
color: #FFFFFF;
background-color: #5675B5;
vertical-align: middle;
}
I have 2px difference between Chrome and Firefox in the height of input, why?
(I don't want to specify height to input element)
<html>
<head>
<title></title>
<style type="text/css">
p {
font-size: 11px;
font-family : Verdana;
}
input {
border: 1px solid #ccc;
font-size: 11px;
font-family : Verdana;
}
</style>
</head>
<body>
<p>
<label>Text</label>
<input type="text" />
</p>
</body>
</html>
By the way, If I put Arial font instead of Verdana, the sizes are correct. Why?
Thank you.
I was having a similar issue with Firefox not rendering a Search box same as Chrome. I used the following css line and it fixed it:
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Let me know if it worked.
Adjust line-height
input { line-height:17px; }
Set line-height to 1em:
input {line-height: 1em;}
Why does Firefox 4 absolutely position fieldset legends differently than other browsers?
Test page:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family: Tahoma, Arial, sans-serif;
font-size: 62.5%;
}
#wrapper
{
margin: auto;
padding: 1em;
width: 720px;
}
form
{
width: 670px;
padding: 25px;
background-color: #ffffff; /* White */
color: #000000; /* Black */
border: 1px solid #cccccc; /* Gray */
font-size: 12px;
}
fieldset
{
position: relative;
border: 1px solid #cccccc; /* Gray */
padding: 25px 10px 5px 15px;
margin-bottom: 20px;
}
fieldset legend
{
position: absolute;
top: 5px;
left: -10px;
/* Firefox */
/*top: -20px;
left: -25px;*/
font-weight: 900;
background-color: #ffffff; /* White */
}
/* Input Types */
label
{
margin-right: 10px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<form method="POST" action="test" id="testForm">
<fieldset>
<legend>Test</legend>
<label for="test">Test:</label><input type="text" id="test" name="test" value=""/>
</fieldset>
<input type="submit" value="Test"/>
</form>
</div>
</body>
</html>
Notice that in Opera 11.10 Build 2092, Chrome 11.0.696.65, Safari 5.0.4 (7533.20.27), and Windows Internet Explorer 9, they display the legend on the left, overlapping the fieldset border.
In Firefox 4.0.1, I have to change the top and left properties to get a similar effect. For example, within the style tag of the test page, uncomment this CSS:
/* Firefox */
/*top: -20px;
left: -25px;*/
legend elements are quirky and weird. That being said, if all the other browsers do the same thing, then Firefox should do the same thing.
There's already a bug report here describing the issue in detail: https://bugzilla.mozilla.org/show_bug.cgi?id=450418
A workaround is to add a wrapper div inside the fieldset and move the padding to that.
Your unchanged code: http://jsbin.com/ivedo4
Fixed code: http://jsbin.com/ivedo4/2
I tested it with the same browsers (not identical versions, but close) you listed in your question, and the rendering was consistent.
My code doesn't look quite right in IE8, but yours is broken in exactly the same way.
I am having a very odd opacity/hover problem in IE. Everything works in FF and Chrome.
Consider this page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#outer").css("opacity", .7);
});
</script>
<style type="text/css">
#outer
{
position: absolute;
width:600px;
background: #111;
z-index:2;
overflow: hidden;
}
#outer div
{
float: left;
}
ul
{
list-style: none;
margin: 0;
padding: 0;
}
ul li
{
width: auto;
margin: 2px 4px 2px 4px;
padding: 2px 4px 2px 4px;
font-size: 11px;
color: White;
}
ul li:hover
{
background: red;
font-weight: 600;
cursor: pointer;
}
</style>
</head>
<body>
<div id="outer">
<div id="one">
<ul>
<li>111</li>
<li>222</li>
</ul>
</div>
<div id="two">
<ul>
<li>333</li>
<li>444</li>
</ul>
</div>
<div id="three">
<ul>
<li>555</li>
<li>666</li>
</ul>
</div>
</div>
</body>
</html>
Here's the problem. The mouse-over is intermittent - you may or may not see a red background and font change in IE (7 or 8). You will always see the cursor change. If I take the background and font-weight out, I still see the cursor change. But if either the background or the font-weight are there, The cursor will still change but the background or font may or may not.
If the opacity is NOT set on #outer, everything works everywhere. Again, FF and Chrome are fine.
What do you think?
UPDATE: This semes to be restricted to IE8. When IE8 is in compatability mode (acting like IE7) all is well!
But, including this tag in header:
<meta id="metaIE8IE7" http-equiv="X-UA-Compatible" content="IE=7" />
does NOT fix it.
Had the same problem and found a solution (although my solution was for a:hover not an li:hover and I've not tested)
Basically, make sure element 'has-layout'. For example, display:block, etc. Then reset transparency for that element. -ms-filter: "";
just got the perfect working combination:
display: block;
zoom: 1;
opacity:0.4; /*for ie9 and other browsers */
filter: alpha(opacity=40); /*for ie older browsers*/
As Bob sayed the 'has-layout' is essential for it to work in ie 8. Here the 'display: block;' does the job.
More CSS cargo-cult for me! I have no idea, but focing IE8 into IE7 mode fixed the problem. I was wrong about it not working in the question. Still good in other browsers too.