I'm displaying a star after input box using :after. The styles are being rendered differently by different browsers. How can i make this appear similar in all the browsers. Please see this Fiddle in different browsers where in you can see the difference.
You can set width and height for a:after and give custom style to input (to avoid differences in padding, border, etc)
http://jsfiddle.net/omLc9nfe/7/
.a:after{
content:'*';
display:inline-block;
position:absolute;
top:-8px;
right:-8px;
width:8px;
height:8px;
text-align:center;
}
.a{
position: relative;
display:inline-block;
}
input {
border:1px solid #ccc;
margin:0;
padding:2px;
}
i've checked with safari, firefox and chrome.
This question already has answers here:
:active css selector not working for IE8 and IE9
(2 answers)
Closed 8 years ago.
I'm making custom buttons with images and then using a div to align the numbers where I want them.
This method is working in every browser but IE. The text centers on the buttons but it is floating to the top. When I click on the button it completely ignores the :active for the button so all that is happening is the .numKeypad:active is working but the button does not.
What to change to make it work in IE? This is the part of my code I think is relevant:
HTML
<div id="btn1" class="btnKeypad" onclick="input(1);">
<div id="num1" class="numKeypad">1</div>
</div>
CSS
#btn1 {
background-image: url(../images/btnUp.png);
cursor:pointer;
left:129px;
top:63px;
}
#btn1:active {
background-image: url(../images/btnDown.png);
left:129px;
top:63px;
}
.numKeypad {
bottom:2px;
font-size:20pt;
position:relative;
text-align:center;
font-family: 'Old Standard TT', serif;
}
.numKeypad:active {
bottom:0px;
font-size:18pt;
position:relative;
text-align:center;
font-family: 'Old Standard TT', serif;
}
These threads might help you out:
How to make :active state work in IE?
:active css selector not working for IE8 and IE9
<a> with an inner <span> not triggering :active state in IE 8
http://msdn.microsoft.com/en-us/library/ie/cc848864%28v=vs.85%29.aspx
A tip regarding the CSS. This should do the exact same job without having unnecessary extra lines of code.
#btn1 {
background-image: url(../images/btnUp.png);
cursor:pointer;
left:129px;
top:63px;
}
#btn1:active {
background-image: url(../images/btnDown.png);
}
.numKeypad {
bottom:2px;
font-size:20pt;
position:relative;
text-align:center;
font-family: 'Old Standard TT', serif;
}
.numKeypad:active {
bottom:0px;
font-size:18pt;
}
Found the best solution, had to change things up a bit.
new HTML
<div id="btn1" class="btnKeypad" onclick="input(1);">1</div>
new CSS
#btn1 {
background-image: url(../images/btnUp.png);
cursor:pointer;
left:129px;
top:63px;
}
#btn1:active {
background-image: url(../images/btnDown.png);
}
.btnKeypad {
font-family:'Old Standard TT', serif;
vertical-align:middle;
text-align:center;
position:absolute;
line-height:36px;
font-size:20pt;
z-index:100;
height:36px;
width:42px;
}
.btnKeypad:active {
line-height:37px;
font-size:18pt;
}
I still have an issue with the text aligning at the top of the button only in IE but the functionality now works on everything exactly the way I designed it to. I moved everything into one div and condensed it. Now to see about using a different CSS for internet explorer to get the text to align. Thanks to user3687283 for helping clean the code up a little.
I am trying to apply the following style changes to the reddit widget:
1) Change font to Oxygen Mono (the !important override in CSS is not working for font, although it is working for link color)
2) Trim the top of the widget to eliminate the blue bar completely
3) Prevent widget_arrows.gif from being displayed in the widget.
Any ideas?
FIDDLE
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
html {
font-family:'Oxygen Mono', Tahoma, Arial, sans-serif;
}
#reddit {
width:900px;
margin:auto;
font:'Oxygen Mono' !important;
}
#reddit a:link, #reddit a:visited, #reddit a:hover, #reddit a:active {
color:gray !important;
}
Sure you can override a font, you just need to specify the correct format - if you change only the font family, use font-family. A simple look in the debug tools also showed this as "Rule ignored due to invalid property value".
As for the rest, just pick them out with the element inspector and fix them:
/* Style the anchors specifically for CSS specificity */
#reddit a {
font-family:'Oxygen Mono' !important;
}
.reddit-header, .reddit-voting-arrows {
display:none !important;
}
Updated fiddle.
Hi I am trying to using some simple inline styling, but the bold won't work. I am using a CSS reset. Does anyone know why?
HTML:
<p class="line10"><b>Guidance Resources:</b> Call 888-999-6768.</p>
CSS:
.line10 {
line-height:20px;
}
Here is the CSS reset cod...............................................................................
/*------------------------------------*\
RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE:WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1;
}
ol,ul{
/*list-style:none;*/
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:’’;
content:none;
}
/* remember to define visible focus styles!
:focus{
outline:?????;
} */
/* remember to highlight inserts somehow! */
ins{
text-decoration:none;
}
del{
text-decoration:line-through;
}
table{
border-collapse:collapse;
border-spacing:0;
}
Reset your CSS reset:
b, strong {
font-weight: bold;
}
Make sure that your stylesheets are inserted after the reset.
So this is caused by
font: inherit;
line which overrides font-weight. You could remove it or manually rereset required styles for <b> tags.
I'd also suggest using Normalize.css instead of your clumsy reset.
I have a span and an input element that share the same CSS definition for font. Why does Chrome use different fonts for them? How would I fix this issue?
My objective is to make them look exactly the same in IE9, Chrome and FF.
CSS definitions (FIXED), if they still matter.
* {
font-family: Verdana,Helvetica,Arial,sans-serif; /* Moving here fixed it */
}
body {
/*font-family: Verdana,Helvetica,Arial,sans-serif; -- This caused the issue*/
font-size: .8em;
margin: 0;
padding: 0;
color: #000;
}
.button
{
text-align:center;
min-width:80px;
display:inline-block;
white-space:nowrap;
background-color:#4A8CF6;
color:#FFF;
padding:4px;
margin:1px;
border:0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
font-size: .8em;
}
Solution
The problem was that the span elements inherited from my CSS definition for body and the input elements didn't. I had defined the font in my CSS with body { font-family:...; } like my computed results show and I thought that using display: inline-block; would force both of them to inherit the font from body but it did not.
The solution was to switch to using * { font-family:...; } for the font definitions. The button and clickable classes simply defined sizes and colors and such.
You have to literally specify input elements if you want them to have the same font like so:
/* Or input[type=submit] depending on your needs */
span, input {
font-family: Arial, sans-serif; /* Your font here */
}
Otherwise the browser uses the default values as your question shows. You're looking under Computed Styles which shows that Chrome has decided the values for you as you haven't specified them.
You should apply CSS reset rules in the beginning of your style sheet. Its purpose is to make all elements have the same look in all browser.
Examples:
http://developer.yahoo.com/yui/reset/
http://meyerweb.com/eric/tools/css/reset/
Related question which can be useful too: https://stackoverflow.com/questions/116754/best-css-reset