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;}
Related
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 a logo name called Example.
I want the Exam to be blue and the le to be red.
I know you can use :first-letter but I need to change up to 4 characters. It's the only thing stopping me from making a pure CSS logo instead of using an image.
You could split the single (what i assume is a span) into 3 separate spans.
<span class="blue logo">Exam</span><span class="logo">p</span><span class="red logo">le</span>
then your css could look something like this
.blue {
color: blue;
}
.red {
color: red;
}
.logo {
font-size: 33px;
font-family: Helvetica;
}
<!doctype html>
<html>
<head>
<title></title>
<style>
h1 {
font-size: 0;
}
h1:before {
content: 'Examp';
color: #0000ff;
font-size: 32px;
}
h1:after {
content: 'le';
color: #ff0000;
font-size: 32px;
}
</style>
</head>
<body>
<h1>Example</h1>
</body>
</html>
Assuming you can modify the markup, you could just re-wrap the text:
<span class="branding-highlight">Exam</span>ple
.branding-highlight {color:red;}
CSS does not have mechanics for accessing n-th everything just yet. And if it will, it will take time for browsers to adopt it - the sample above would remain best supported.
Its possible even without modifying the markup:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
display: inline-block;
margin: 0;
line-height: 1em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 100px;
background: linear-gradient(to right, #1c87c9 50%, #8ebf42 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1>R</h1>
<p>This is a character with half-style.</p>
</body>
</html>
Hey i think you want to this as like
This is css Part
.logo{
font-size: 33px;
font-family: Helvetica;
color:red;
}
.logo > span{
color:blue;
}
This is HTML Part
<div class="logo">
Exam
<span>ple</span>
</div>
and now check to live demo http://jsfiddle.net/SyPfG/
I know you have already accepted an answer, but I figured I would contribute this method using jQuery, as it may be useful to you or future readers of this question.
HTML:
<span class="logo">Example</span>
CSS:
.logo{
color:blue;
}
jQuery:
$('.logo').each(function() {
$(this).html(
$(this).html().substr(0, $(this).html().length-3)
+ "<span style='color: red'>"
+ $(this).html().substr(-3)
+ "</span>");
});
DEMO
You can use this Method as O.V suggested!:
<div id="logo"><span style="color:red">Exam</span><span style="black">p</span><span style="blue">le</span></div>
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
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 trying to create a rather simple effect on a set of images. When an image doesn't have the mouse over it, I'd like it to have a simple, gray border. When it does have an image over it, I'd like it to have a different, "selected", border.
The following CSS works great in Firefox:
.myImage a img
{
border: 1px solid grey;
padding: 3px;
}
.myImage a:hover img
{
border: 3px solid blue;
padding: 1px;
}
However, in IE, borders do not appear when the mouse isn't hovered over the image. My Google-fu tells me there is a bug in IE that is causing this problem. Unfortunately, I can't seem to locate a way to fix that bug.
Try using a different colour. I'm not sure IE understands 'grey' (instead, use 'gray').
The following works in IE7, IE6, and FF3. The key was to use a:link:hover. IE6 turned the A element into a block element which is why I added the float stuff to shrink-wrap the contents.
Note that it's in Standards mode. Dont' know what would happen in quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
.myImage a
{
float: left;
clear: both;
border: 0;
margin: 3px;
padding: 1px;
}
.myImage a:link:hover
{
float: left;
clear: both;
border: 3px solid blue;
padding: 1px;
margin: 0;
display:block;
}
</style>
</head>
<body>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
</body>
</html>
In my experience IE doesn't work well with pseudo-classes. I think the most universal way to handle this is to use Javascript to apply the CSS class to the element.
CSS:
.standard_border
{
border: 1px solid grey;
padding: 3px;
}
.hover_border
{
border: 3px solid blue;
padding: 1px;
}
Inline Javascript:
<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
Try using the background instead of the border.
It is not the same but it works in IE (take a look at the menu on my site: www.monex-finance.net).
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
put that in your header, should fix some of the ie bugs.
IE has problems with the :hover pseudo-class on anything other than anchor elements so you need to change the element the hover is affecting to the anchor itself. So, if you added a class like "image" to your anchor and altered your markup to something like this:
<div class="myImage"><img .../></div>
You could then alter your CSS to look like this:
.myImage a.image
{
border: 1px solid grey;
padding: 3px;
}
.myImage a.image:hover
{
border: 3px solid blue;
padding: 1px;
}
Which should mimic the desired effect by placing the border on the anchor instead of the image. Just as a note, you may need something like the following in your CSS to eliminate the image's default border:
.myImage a img {
border: none;
}