I tried adding a conditional css style for Internet Explorer but it isn't working.
I've tried
<!--[if IE]><style type="text/css">nav{letter-spacing:.5px}</style><![endif]-->
<!--[if IE]><!--><style type="text/css">nav{letter-spacing:.5px}</style><!--><![endif]-->
Neither work.
The blog is http://costumingdiary.blogspot.com
Notice the links at the top of the page. They fit okay in Chrome, but IE widens the letter spacing too much. In Chrome, the link text is centered with extra spacing on either end. In IE, the text stretches all the way across to fill the space. If I change "About" to "About Me", the text will overflow to a second line in IE but not in Chrome.
Any help to set the conditional please? Thanks.
UPDATE: The fact that IE10 doesn't support conditionals is the big reason why I've given up on this. There is no simple css way to fix this. Adding javascript has proven to much for me. Actually adding javascript defeats the purpose of me removing (by way of adding comment tags) as much "unremovable" Blogger imposed script from my blog as possible. I guess I'll have to live with the stretched-to-the-max IE text. :(
Why do you think that conditional comments syntax is wrong? See full description of comments syntax, in your example all is right.
I get html source code from your link - there is no conditional comments where, but has big html comment with script which contains encode conditional comments(!)
You can use the below conditional for anything below IE9:
<!--[if lt IE 9]>
<script src="path" type="text/javascript"></script>
<link href="path" rel="stylesheet" type="text/css" />
<![endif]-->
If you want to target other versions of IE you can look here.
--EDIT--
You will need to add a HTML5 polyfill to enable support for the <nav> element on IE8 and below.
You could use Html5shiv or Modernizr
Your Body CSS rule has a letter-spacing:1.2px; That determines the spacing between your characters. I am looking at the page in Internet Explorer and Chrome and the fonts seem to render pretty closely to me. Also do not assume font rendering between platforms is consistent. If you develop on a MAC for example, they use a completely different font rendering sub-system than Windows for example. So test Chrome on the same system as IE. Also do NOT assume IE 8 is the same as IE 9 is the same as IE 10 or 11.
body {
background-color: #294A63;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
letter-spacing: 1.2px;
line-height: 1.4;
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: auto;
overflow-y: scroll;
}
Related
I have a gallery in which i'm using the figure and figcaption tags. This displays fine in all modern browsers but in IE8 it breaks the CSS for the figure and figcaption tags because the browser doesn't support them. Just including the html5shiv library doesn't fix it. Is there a method within that I would have to call?
the problem was that the figure element did not automatically size to the picture it contained so it needed to be specifically set in the CSS
I ran into this same issue and found that it stemmed from specifying max-width: 100% for img elements. If I remove this declaration, IE8 renders the images at the appropriate sizes. Unfortunately, it means they won't responsively size on smaller screens.
The best solution I know of is to specify max-width: none using a conditional comment that's applied only in IE8 and earlier:
<!--[if lt IE 9]>
<style rel="stylesheet">
img {max-width: none;}
</style>
<![endif]-->
I know that most of the "modern" browsers supports #font-face in CSS. But there may be some exceptions. I would like to know if it is possible to change font size of some selector based on #font-face browser support. ie, I would like to set font-size of a <span>.
I want 20px if browser support #font-face and 30px if not. How can I make this possible? It will be great if this can be done by using pure CSS.
I think here you should be use IE Hacks and you can also read about other hacks chrome
and firefox to be able check versions and match them, but i wanna focus on specifiec browser - Internet Explorer
So as i started to say, you can use IE hacks to match fontsize, example:
<!--[if IE]>
<style>
span{
font-size: 30px;
}
</style>
<![endif]-->
<style>
span{
font-size: 20px;
}
</style>
Like I said, you can use firefox/chrome and other browsers css "hacks" to check version, and check supporting #fontface, I've not gave you fontface example since I don't have link and i perfer not make a confuse.
Hope I helped.
EDIT: I'm not sure if I'm clear then I would like make a fast point:
You can check each browsers (also each version) and see if he support fontface, if he doesn't you just use the same browser hack to change span font-size.
Im using a rockettheme template and have edited some of the css code using a custom css file.
I have managed to get it how I want it to look on Firefox and Chrome however IE looks werid. the navigation is too low (the buttons) and the header is also too low.
The website link is found below.
http://www.colmanprint.co.nz/rfloorings/
as you can see on the link the menubar is down too low and the header.
at the moment im using a css code edit .rt-menubar {padding: 0px !important; margin-left:210px;} when i remove the margin-left:210px; it fixes my problem but then the menu goes behind the logo on chrome and firefox.
so i pretty much need to keep the margin-left:210px for chrome and firefox but have margin-left:0px for internet explorer
any ideas would be great!
For versions of Internet Explorer up to IE9, you could use conditional comments to differentiate between IE and other browsers.
Here's a quick example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie9-and-below.css" />
<![endif]-->
Then in ie9-and-below.css you could apply a style such as:
#ieParagraph.rt-menubar {
margin-left:0px;
}
Where your HTML could look like so:
<div class="rt-menubar" id="ieParagraph">
<ul>Other stuff here...</ul>
</div>
If no styling was applied in your other stylesheets to #ieParagraph where the class was also .rt-menubar , this would only change the left margin of the #ieParagraph div to 0px in IE9 and under only.
For IE10, conditional comments have been removed - look into using Modernizr for feature detection.
I need an IE9 CSS hack to be able to set the background-position property differently for IE9.
I have tried with several different ones that didn't work and from what I read somewhere, the background property is not possible to "hack" at least the same way as the other.
I basically need this to only apply to IE9:
#ABB_ABContent .subnav li.selected { background-position: center 17px; }
Any suggestions?
If you can't find anything else, there's always conditional comments:
<!--[if IE 9]>
IE9-specific code goes here
<![endif]-->
This would have to live in your HTML code, rather than your stylesheet, but you could use it to include an additional CSS file for IE9.
Alternatively, you may want to look up the Modernizr library. This is a small Javascript tool which you add to your site, which detects what features your browser supports, and allows you to write your CSS to target specific features (or their absence). If there's something about IE9 that it doesn't support which you're trying to work around, this may be the best solution.
I'm still puzzled as to what problem you're trying to solve though.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="your path" />
<![endif]-->
I am relatively new to web development and learning all the time. I have recently come across 'Conditional Comments' when viewing source code for different websites. I think i now understand what they do but am unsure as to when to use them.
I have seen them mainly used for implementing different stylesheets when it comes to IE and would like to know if this is good practice?
In which case if the answer is 'Yes'. Then when developing a site is it 'common place' to use two separate stylesheets to fix bugs, for example create one stylesheet for IE and one for Firefox, Opera etc?
Thanks in advance.
Conditional comments are only supported by IE, as far as I know, and they gracefully downgrade in browsers that don't support them (since they look like a normal comment). The general consensus is that it's OK to use a non-standard browser feature if you're using it to combat another non-standard browser "feature" (i.e. the crappy support for CSS in IE). So you'll find that it's a very common solution for tweaking CSS.
The nature of Internet Explorer (version 6 especially) makes it so that some stylesheets work well with IE, and some don't. For the purposes of those that don't, you can use conditional comments to have CSS code that only displays for IE. I have to use it because of how Internet Explorer (mis)handles CSS dropdown menus.
To make the website I'm working on properly render the hover feature of the dropdown menu, I have to implement the crosshover.htc file. Here's the code I have to use:
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(http://www.stannscatholicschool.com/csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: 100% verdana, tahoma, helvetica, arial, sans-serif;
}
</style>
<![endif]-->
If I don't do that, the dropdown menu splits apart and can't be navigated in Internet Explorer 6.
I have used conditional comments to detect if visitors to my site uses IE6 or lower. If that is the case, I load the IE7.js script, which overcomes some of the bugs in these older browsers. There is also a script for emulating IE8 support.
Some people also use comments to help outline certain areas of the page like a footer, header or main content (often in templates).
However if you are using divs and CSS (which it sounds like you are) you should be able to tell what the content is or what area of the HTML you are in by the DIV ids and CSS styles. Remember to use clear names and try not to abbreviate them just for the sake of easier typing.
If that is an issue for you then Intellisense is a wonderful thing and can help us get around stuff like that. If not then CTRL+C and CTRL+V is probably the next best thing :)
This is a great practice! The official documentation page of conditional comments, has many examples and combinations of conditional comments, it's worth reading it. The page also states that:
Conditional comments make it easy for developers to take advantage of the enhanced features offered by Microsoft Internet Explorer 5 and later versions, while writing pages that downgrade gracefully in less-capable browsers or display correctly in browsers other than Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.
Nowdays Internet Explorer is the least capable browser, so you're most likely going to use conditional comments to do the exact opposite, that is, to take advantage of the enhanced features offered by all other browsers, while writing pages that downgrade gracefully in Microsoft Internet Explorer.
You can use conditional comments to fix unsupported CSS styles, or to hide code from Internet Explorer, like this:
<!--[if !IE]>-->
<script src="IE_will_never_see_this.js" type="text/javascript" charset="utf-8" ></script>
<!--<![endif]-->