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}
I found a very odd problem printing in Google Chrome for Mac that I am trying to fix. When using "Print Using System dialog" option the #page inside the print styles are ignored, which causes the page to be incorrectly printed. When printing via the built in chrome print dialog it seems to work ago.
In windows Chrome, the system dialog and the regular dialog both ignore the #page properties.
The only reason I am even defining #page properties because my version of bootstrap defines these and I want to overwrite them.
here is the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page
{
margin:10cm 10cm;
}
#media print
{
#page
{
margin:0 !important;
}
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Working example:
http://blastohosting.com/chrome_bug/
I've tried several approaches and found one that works with my version of Chrome (32). You have to set the value of the #page margin inside the print media query to 0 without !important, any other value will trigger the bug:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page
{
margin:10cm 10cm;
}
#media print
{
#page
{
margin:0;
}
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I'm having issues with IE10 applying CSS styles I've specified for HTML5 elements (and their children when targeting the child using the HTML5 element tag name in the selector), so I broke it down into a simpler example and put together a simple JSFiddle example to demonstrate the issue, but when I tested the JSFiddle, IE10 decided to apply the styles properly. So, I took the exact source code of the JSFiddle's resulting iframe, and copied it into a file hosted on my server and alas it failed to properly apply the styles once again.
JSFiddle's source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
header, nav, main, footer {
display: block;
background: gray;
padding: 10px;
margin: 1px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 10px;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
}//]]>
</script>
</head>
<body>
<header>
<img src="http://placehold.it/300x80&text=Logo" />
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<main>
<p>This is filler content inside the <code><main></code> element. The <code><header></code>, <code><main></code> and <code><footer></code> should each have a gray background and be displayed as a block.</p>
</main>
<footer>
<p>Copyright © 2013, All Rights Reserved</p>
</footer>
</body>
</html>
What's the deal with IE10? It can't possibly be the code, since it works fine in an iframe, or do iframes get the same treatment as their parent page?
What's causing IE10 to trip up here? Could it possibly be something server related? That doesn't make much sense, but this is an odd one.
Naturally, any fixes would surely be appreciated.
According to the Developer tools it's running in IE8 mode on your server. Try adding this code to your <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
You can also set this on your server:
Apache:
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge"
</IfModule>
Your web server has an "X-UA-Compatible" header set to "IE=8", which forces IE to IE8 document mode. You need to either remove it or set it to "edge".
If you don't have access to server settings you could try adding modernizr to your page which should allow you to style HTML5 elements in older IEs.
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.