how can I load a css file only for Safari browser ?
I usually use just this (without javascript)
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
for internet explorer 8.
Thanks
Real simple bit of PHP. Going to be an alternative for ASP too:
<?php
$browser = get_browser();
if(strtolower($browser->browser) == 'safari') {
echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
}
?>
I haven't seen a need to in ages (like Safari 2). Make a new question about the actual problem you're having and someone can probably tell you how to fix it with nothing but redundant CSS or less.
Check out the CSS Browser selector plugin. It's really easy to implement and use, just write some special rules in your CSS, no extra stylesheets or anything. I use it and it works great!
Hope it helps :)
Related
I want some html to be displayed for any browser other than IE8 and below
I tried this but it didn;t work. What's the correct syntax?
<!--[if !lte IE 8]>
// my html here
<![endif]-->
Just use greater than:
<!--[if gt IE 8]>
According to the conditional comment this is IE greater than 8<br />
<![endif]-->
Based on Mary Melodys comment you can also target everything apart from IE too! :
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
To cover all bases, I thought I should give an answer about a third-party library like jQuery. This library adds a layer of java-script functionality to your website and comes with a range of functions for determining which browser is being used (as well as the version of that browser).
Here is the documentation to coding what you would like to achieve within jQuery: http://api.jquery.com/jquery.browser/
And here is a quick example of how this would work:
if($.browser.chrome) {
alert( $.browser.version );
} else if ($.browser.mozilla) {
alert( $.browser.version );
} else if ($.browser.msie) {
if ($.browser.version < 8){
//Do what you will.
}
}
Obviously if you are looking for a more lightweight / portable method then #iswinky's method is the way to go. However, if you are looking for a more heavy solution that supports a range of browsers then I would recommend this approach.
Im using css button generator to create the code for my css button and it generates the css code and the html code used to insert the css code. But I don't what classname to use. I tried
But that shows up blank in the website preview.
And for an offline site with minimal design would it be better to put the buttons inline? The site will be put on a CD. I'm using dreamweaver cs6.
Well i guess you will need to learn basic HTML first. Each HTML document should contain HEAD and BODY tags. In HEAD section you link your CSS file or write your generated CSS style between STYLE tags. Something like:
<style type="text/css">
.button1 {font-size:15px; color: #cccccc; ....}
.button2 {font-size:18px; padding:10px; ...}
</style>
or link your CSS file inside HTML header with:
<link rel="stylesheet" href="/css/your-stylesheet.css">
You can also check here for some basic examples of HTML and structure of HTML documents.
w3schools
With your link you just make a link to your CSS style which will open as a plain text in browser window so you don't really include it. So include CSS style in your HEAD section either by link or to put your CSS classes and everything between STYLE tags. Once you will do this "call" your style in your links like this:
Go to Google
Local file
Thanks guys. Got it to work. I found this question and answer: mmo-champion.com and it made it clear what you guys were saying.
I deleted the <style type="text/css"> and made sure that the class was = to "classname" since that was what it was called in the CSS file because it was unchanged, and then it worked. I think it didn't work because I had the class = "button1" and I also didn't delete that bit of code before.
Gantt charts & project diary
(source: css-tricks.com)
One more thing, because Internet Explorer does not support some elements which work on Chrome or FireFox, there are some special codes for including only IE CSS file (file that works only if IE is identified):
For all the IE versions, use this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="file.css" />
<![endif]-->
For X version only:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="file.css">
<![endif]-->
** This code can only be used for IE7. If you want to use the CSS code for other IE version, change "7" in the line !--[if IE 7> to the appropriate version number.
For IE5.5:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="file.css" />
<![endif]-->
For IE6 and lower (including IE6), use if lte IE 6 or if lt IE 7.
For IE7 and higher (including IE7), use if gte IE 8 or if gt IE 7.
Sometimes IE blocks webpages' scripts or ActiveX controls.
To ignore IE block scripts or ActiveX controls, use this line, at the head of the HTML code.
NOT in the <head> tags, at the first line. It's important.
<!-- saved from url=(0014)about:internet -->
To read more about this error, read MOTW.
I am creating a website based from tumblr that seems to work fine on google chrome, but has a issue with the ad box that I have assigned to the right of the page.
I have searched google and found this related question, but the answer given does not work for me.
I have tried the following.
Just adding a html class="ie9" tag with the proper if statements.
Clearing my cache.
And checking the browser mode.
It seems to be just one element of the page. The right side does not show up correctly, but I fiddled with the customization in IE 9 and I have the exact margin reqs. However I can't seem to link the stylesheet.
Is this because I'm linking a static file in this manner?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
Does this have anything to do with the fact that I am linking this stysheet from a different domain instead of the hosted domain?
Also is there anyway I can just single out the line that needs to be adjusted?
Is it possible for me to place a if statement in the css portion of my site
<!--[if IE 9]<style>#Content-right{margin:-1000}</style>
<![endif]-->
it's not working because you didn't close your comment tag. It has nothing to do with cross-domain css file fetching, which is entirely legal.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
should be <!-- [if IE 9] -->
Also... what engine is supposed to be acting on this IF?
There is a very interesting article on just this topic. It addresses the need/desire to isolate browser specific CSS without having to create an entire CSS file. There are also a number of benefits to the approach. I have utilized it for a number of years due to my own needs and was unaware until recently that such analysis had been performed on the technique.
Here is the link: Conditional Stylesheets vs. CSS Hacks
Other Things of Note:
Positioning of your Stylesheets is very important in CSS. Since we can't see your other calls and you are using a separate stylesheet, it is important that you place the conditional statement under your standard stylesheet.
Example
<link rel="stylesheet" href="path/to/standard.css" />
<!--[if IE 9]-->
<link rel="stylesheet" href="http://path/to/ie9.css" />
<!--[endif]-->
This is because CSS uses the styles that were loaded last if there is a conflict. I only mention this because it could be affecting you results as it is a common mistake.
Try this code
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
<![endif] -->
I hope you work it
I am getting extra text <![endif]--> in IE7 but on all other browsers does not show.
I searched this code in all files but didn't find it. I am using Drupal-7.
Please check this link here
You aren't writing those end tags correctly in some areas. Some places you put this:
<!--<![endif]-->
Change that to this:
<![endif]-->
Looks like there is an extra <![endif]--> here
<!--[if lt IE 8]>
<link type="text/css" rel="stylesheet" href="http://indivar.bubblespan.com/sites/default/files/css/css_SCgABqUC566L7vt9DqHzb_pIQdEOcwHOijyO95sLhUI.orig.css" media="all" />
<![endif]-->
<![endif]-->
Although it is difficult to tell with all the conditional comments you are using.
Better to use fewer comments and to combine content within the conditional comments as needed.
Please try to re-install conditional css module which you are using for drupal.
Is there an easy way to serve a whole stylesheet to every modern Browser but IE7 and IE8? Some kind of inverted conditional comments?
The following should work per Microsoft's documentation:
<!--[if !((IE 7)|(IE 8))]><!--><link rel="stylesheet" type="text/css" href="ie.css" /><!--<![endif]-->
I don't know much about web coding... but this looks like what you are looking for.
Check out this site.
If you are simply trying to exclude browsers older than IE9, it is simpler to use
<!--[if gte IE 9]>
<link ...
<![end if]-->
Otherwise, you will need to use other operators to fit a specific subset, as others have already provided.
The MSDN docs are very useful here: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
Note that you can use "!" to denote "not". So you could use something like this:
<!-- [if !(IE 7) & !(IE 8)]>
<link href="modern.css" />
<![endif]-->
Pretty straight forward.
Updated
Since IE's quirky conditionals don't get respected in other browsers. You could easily add jQuery to the page and do something like this:
<script src="jquery.js"></script>
<!-- add jquery first for browser sniffing -->
<script>
// if broswer is IE and less than version 9 write out the nice CSS
if($.browser.msie && parseInt($.browser.version) < 9){
document.write("<link href='modern.css'/>");
}
</script>
jQuery docs on browser sniffing: http://api.jquery.com/jQuery.browser/