Please take a look at the following test site:
http://adroity.be/ys/test.php
When refreshing the page in IE11 you will notice that sometimes the final 'e' is not showing. It does show as soon as you hover over the title. I don't have access to other versions of IE so I don't know if this is limited to IE11.
I'm using a Google Font (Oswald). Here's the relevant code:
HTML
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Oswald:400,300,700'>
<link rel='stylesheet" href='style.css'>
</head>
<body>
<h1>YellowSubmarine</h1>
</body>
</html>
STYLE.CSS
body {
font-family: "Oswald",sans-serif;
}
h1 {
font-size: 130px;
}
h1 a {
font-weight: 700;
text-transform: uppercase;
}
Frankly I have no clue how to start troubleshooting. Any help is greatly appreciated.
I have this snippet in html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body<-->{
font-family: sans-serif
}
</style>
</head>
<body>
Text
</body>
This comes out OK on Firefox and IE, but it comes out in italics in Chrome. What is going on? There doesn't seem to be a way of stopping it.
For that matter this text that I'm now typing also comes out in italics.
Doing a Google search below reveals that this is a font problem in Chrome.
You'll need to read a little further for solutions:
https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=google%20chrome%20all%20italics
I'm using the font Cardiff in a project and trying to apply the style text-decoration:underline to it.
This works fine in Chrome (Version 35.0.1916.114) but Firefox (Version. 29.0.1) the underline is crossing through the text instead of appearing under it. I believe it's something to do with the Cardiff font because when I try a 'Web Safe' font the underline is displayed correctly.
This is how the Cardiff font is being displayed
If I then change the font to Helvetica, this is how it's displayed
I've tried a few things already:
Wrapping the font in a span tag, then styling this as a block and giving it a height
I've also tried a solution provided in another question
Updated...
Using fixes provided by #touko I've put together a solution that isn't really what I wanted to settle for but it works.
I've used a border for Firefox and regular text-decoration for other browsers.
h2 {
text-decoration: underline;
}
Firefox specific CSS styling as explained on this solution...
#-moz-document url-prefix() {
h2 {
text-decoration: none;
display: inline;
border-bottom: 1px solid #4c2f04;
padding-bottom: 6px;
}
}
I hope someone finds a better solution than this though because it's more of a bodge job if anything.
Seems like an issue with the font, you could try running it through the Font Squirrel Web Font Generator to see if that fixes it.
Just dont use vertical-align: middle
The similar problem is here: Link underline appearing above text in Firefox?
But looks like your problem is with a font itself.
I do not recommend to do a hack like border under the text. Search for other font.
body {
font-family: Cardiff;
font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="//db.onlinewebfonts.com/c/5762715ddcc2993805a83fcd2f569ea8?family=Cardiff" rel="stylesheet" type="text/css"/>
</head>
<body>
Demo text
</body>
</html>
You could use border-bottom as underline and set the space below to desirable with padding.
yourtxt-wrap{text-decoration:overline}
yourtxt-wrap{text-decoration:line-through}
yourtxt-wrap{text-decoration:underline}
Recently I've made custom CSS only (imageless) checkmarks and radio buttons.
I've used this piece of CSS code for checkmark content: "\2714";, but I have issues with sizing that checkmark, it stays "small" no matter what, any idea how can I make it bigger?
font-size seems to work just fine for me in FF 10:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
p:before {
content: "\2714";
font-size: 30px;
}
</style>
</head>
<body>
<p>Hello there</p>
</body>
</html>
EDIT: Chrome and Safari also seem to work with no issue.
For some reason, I can't get rgba working within my CSS using IE9. I've tested it using Chrome, and it works fine. Not sure what's wrong.
My HTML is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Raleway:100&v1" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<?php wp_nav_menu(); ?>
</body>
</html>
My CSS is:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
body {
font-size: 62.5%;
}
.menu {
font-size: 5em;
font-family: 'Raleway', arial, serif;
}
.menu ul li a {
background: rgba(0,0,0,0.5);
text-decoration: none;
}
The new standards support in Internet Explorer 9 requires the browser to be in Internet Explorer 9 Standards mode (“IE9 mode”). The best way to do this is to use a standards !DOCTYPE directive and no X-UA-Compatible meta tag or HTTP header. The !DOCTYPE to invoke IE9 mode is the following:
<!DOCTYPE html>
background-color: rgba(0,0,0,0.5);
Well, I found out why. Seems as though "Compatibility View" was enabled so I disabled it and, voila. I probably clicked it by accident when I wanted to click on the refresh button.
I was having issues with background-color in ie9 as well. After scouring through solutions with my google-fu, I realized I was using this border-radius.htc which was breaking all the CSS in that particular div. Not just the background-color, but the borders and font colors as well. It was being used like this:
<style>
.ie-rounded-corner{behavior: url(../include/stylesheets/border-radius.htc); }
</style>
<div class="ie-rounded-corner">Hello World</div>
I was using that border-radius hack for ie6/7/8 to add rounded corners on some elements. This breaks the page in IE9. Upon removing that class, everything worked as expected in IE9. My rounded corners are now gone in ie6/7/8. Perhaps a different solution is now needed for legacy IE browsers.