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;
}
Related
Please see this minimum example:
span {
font-family: Helvetica;
border: 1px solid red;
font-size: 40px;
}
<span>1299</span>
Screenshot:
Chrome
Firefox
As you can see, Firefox renders the typeface a little taller; why is this?
Is it possible to make Firefox look like Chrome?
Update
Adding line-height and display: inline-block makes the red container same height, but the font position remains incorrect, please see this minimum example:
span {
font-family: Helvetica;
border: 1px solid red;
font-size: 40px;
line-height: 1.5;
display: inline-block;
}
<span>1299</span>
I have an issue with IE9 and css. It looks like IE9 doesn't accept the padding definition of the two elements p and a. The background color shrinked and is only in the upper left corner of the elements. The following css works fine in firefox though:
<div class="slider">
<p class="claim orange">Some Text</p>
<a class="claim blue" href="">Some Link</a>
</div>
<style type="text/css">
.slider p {
position: absolute;
top: -200px;
z-index: 8000;
padding: 0.5% 2%;
line-height: 100%;
color: #fff;
white-space: nowrap;
text-transform: uppercase;
}
.claim {
line-height: 100%;
font-size: 18px;
}
.orange { background: #EF7D00 }
.blue {
color: white;
font-weight: bold;
padding: 10px 15px;
border-color: white;
}
.blue:hover {
color: white;
font-weight: bold;
padding: 10px 15px;
background: #2e6da4;
border-color: #2e6da4;
text-decoration: none;
}
</style>
What might be the issue and how can I get the background color work in IE9 in this case?
Your code as-is doesn't seem to display a working page, at least for me in Chrome or Firefox. The p element containing "some text" is displaying with top: -200px, off the page to the top, and the background is white so I can't see anything until I mouseover the link.
Did you forget to include some key lines in your code? Try pasting everything into a text file and testing it out, before uploading it in a question, or it's going to be hard for us to help you.
It's not clear to me what you're trying to do here!
How do I exclude pseudo-elements like :before and :after from being changed by selectors like for example: :hover?
Maybe there's some sort of 'main pseudo element' that I'm not aware of?
I've tried using CSS3 :not() statement but this didn't work.
Using: .facebook:hover:before {color: black;} works fine, but I'm sure that there's a better solution.
Example:
I want the Facebook logo to remain black and change the texts color.
body {
background: #F7F7F7;
margin: 0px;
}
.share-button {
background: #FFFFFF;
border: 1px solid #D8D8D8;
display: inline-block;
font-family: 'Open Sans';
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0px;
padding: 12px 24px 12px 12px;
transition: color 1s;
}
.facebook:before {
display: inline-block;
height: auto;
font-family: 'FontAwesome';
font-size: 12px;
padding-right: 12px;
width: auto;
content: '\f09a';
}
.share-button:hover {
color: #374D8D;
}
<button class="share-button facebook">
Share on facebook
</button>
The problem here is not that the pseudo-element is being "matched" by the :hover selector per se, but that it is inheriting the color property from the corresponding CSS rule on the element.
That is the reason why you need to set it explicitly on the :before pseudo-element — you cannot block inheritance using a selector, or using a style on the parent or originating element.
I have a html button with below CSS.
.myButton{
background: url("../images/button.png") no-repeat top left;
height: 21px;
width: 78px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
border: medium none white;
}
It renders nicely in IE. But in Fire Fox it does not render the text in center. It renders as below:
How can I align the text to center in FF. In IE it is proper?
There must be additional CSS code that applies to your button. With only the given CSS the button looks different: http://jsfiddle.net/xQmHA/
<button class="myButton">TEST</button>
You can check which style rules apply to your button from within Firefox (F12 --> CSS --> Select your button)
I changed background: url("../images/button.png") no-repeat top left to background: url("../images/button.png") no-repeat top center and is working fine....
Try this,
.myButton{
padding:0;
background: url("../images/button.png") no-repeat top left;
height: 21px;
line-height: 21px;
width: 78px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
border: medium none white;
outline:0 none;
}
You need to reset default style sheet of any browser before adding your styles. In this case I suspect it is the padding that is by default added by FF/IE that makes it not work for you.
Please find an Appropriate reset style for the Element before you add your own.
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}