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.
Related
I'm not a css expert and i'm experiencing some trouble with cross-browser behaviour. In Google Chrome, my code works fine. In the other browser's i've tried (Mozilla, Edge, IE) it doesn't; specifically when using these last browsers, the font-style property seems to exclude the font-weight property
This is my html and css code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.non-italic-class{
font-size: 25px;
font-weight: 900;
font-family: "futura-pt", sans-serif;
}
.italic-class{
font-style: italic;
}
</style>
</head>
<body>
<span class="non-italic-class">NON ITALIC</span>
<br>
<span class="non-italic-class italic-class">ITALIC</span>
</body>
</html>
Here's how it looks like in Chrome (fine for me):
This is how it looks in Mozilla, Edge, IE (wrong for me):
Am i doing something wrong? Do i need to add some code in order to get the same behaviour with all these browsers?
everything in my style sheet will work apart from divs. Kinda strange. I created a test page to try and see why it won't work but no joy.
If I include the div in a tag at the top of the page it will work. Just not if I link the css file itself. I will put my code below.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="boxed">
This should be in a box
</div>
And a clean stylesheet. With just the information for the div class.
#charset "utf-8";
/* CSS Document */
.boxed {
border: 1px solid green;
}
Hopefully, someone can point me in the right direction.
Instead of this, try just typing the full URL , so instead of "style.css" ,
type "http://yourWebsite.com/style.css" instead of "style.css"
<link type="text/css" rel="stylesheet" href="style.css" />
edit: also add type="text/css"
2nd edit:
you also need to have a title in your head, that is required. maybe it's causing this issue, maybe not
<head>
<title>This is my Title! </title>
</head>
Try this in your Style.css file:
.boxed {
border: 1px solid #008000;
display: inline;
}
check to see if you haven't misplaced any '}' or semi columns and i don't think you need the
#charset "utf-8" in your stylesheet since you already specified it in your head
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.
I'm having some trouble with a font I found on Google Web Fonts.
As you can see in the image posted below, the capital V in 'Versus' overlaps with the 'e' when i'm using Firefox. Though when i'm using Chrome (or IE) it does not overlap and leaves me with an ugly space between the two characters.
Is there any way to fix this and make it look like the one in Firefox? Or should I start looking for another font?
My HTML:
<html>
<head>
<meta charset="utf-8">
<title>Versus</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<h1>Versus</h1>
</div>
</body>
My CSS:
h1 {
font-family: 'Marck Script', cursive;
font-size: 100px;
color:#444;
text-align:center;
padding:0 50px;
text-shadow: 2px 2px 3px #777;
}
Thanks in advance!
In order to fix the spacing in a font you should use:
letter-spacing: 10px /* How ever much you need */
Without knowing the specifics on the HTML and the CSS you already have in place, you can fix the problem area by using something like this:
style
span { letter-spacing: -4px }
html
<span>V</span>ersus
It's hokie, but it should work.
Firefox nowadays supports kerning when using a font with kerning pairs. Other browsers haven’t caught up. There are several proposed CSS features that would affect kerning, and Firefox has some support to them, but the other browsers don’t.
So you should look for another font. Manually tuning spacing by letter-spacing or margin properties is troublesome and risky; you easily end up with breaking things on Firefox.
If you keep using the Marck Script font, it is better to download it and install it on your server and use it from there. There are problems with many Google fonts when used on the Google server. In this case, IE 9 in Standards Mode does not use the font; the error code CSS3117 appears in the console, so there is apparently something wrong in Google settings.
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.