I'm having trouble with a drop-down menu from the Foundation framework in IE8 and I'm wondering if it is possible to hide an element if the user is using IE8.
Maybe making a simpler menu for IE users is easier than making the drop-down menu work.
Not that I approve of your solution ( fix it! ), but you can achieve what you're looking to achieve with conditional comments.
<!--[if IE 8]>
<style type="text/css">
#yourElemId {
display: none;
}
</style>
<![endif]-->
Related
In my email template I have an import to use a web font:
#import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");
Outlook is replacing the url content with a anchor:
#import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");
I tried instead but same result, what is missing?
Thanks
Outlook doesn't really understand #import or #font-face, so whenever you use those in email you need to add an MSO conditional around the style tag.
<!--[if !mso]><!-->
<style type="text/css">
#import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");
</style>
<!--<![endif]-->
Outlook uses Word as an email editor. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following series of articles in MSDN:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
I use Unsemantic for the first time, and I forgot to check my page on IE8. Here is the disaster : http://canapin.com/web/meteo/
Unsemantic is supposed to be IE8 compatible, but my page is messed up, and I can't figure out why.
Any idea? :(
As stated in its issue tracker, since IE8 doesn't support media queries, Unsemantic grid offers a fixed-width layout for it, through a separate css file inclusion:
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="./stylesheets/ie.css?1389034275" />
<![endif]-->
Note the conditional comment avoiding the separate css for mobile versions of IE (they are supposed to support media queries):
I suppose you can download the source of the separate css from here:
http://unsemantic.com/stylesheets/ie.css
So, if you accept to have an IE8 with fixed-width layout (and it seems very reasonable to me), you don't need a javascript fix ;)
Bye bye!
for IE8 and lower you have to include a shim, which comes with the Unsemantic files.
Include the following code in your head and you should be fine:
<!--[if lt IE 9]>
<script src="./assets/javascripts/html5.js"></script>
<![endif]-->
So, just point to the html5.js file and this should fix it. Let me know whether this worked for you.
Cheers, Marvin
I'm having trouble figuring out why Arial Narrow is displaying correctly for some Firefox users on mac and not others. Here is the link: http://teknikor.bethmotta.com/ (see navigation font)
My code is:
font-family: "Arial Narrow", Arial sans-serif; font-weight:500;
font-stretch:condensed;
I even tried adding a font reset:
font-family: inherit; font-stretch:inherit; font-style:inherit;
font-family: "Arial Narrow", Arial sans-serif; font-weight:500;
font-stretch:condensed;
And I tried to target Firefox specifically:
#media screen and (-webkit-min-device-pixel-ratio:0){
ul.navcontainer li {
font-family: inherit; font-stretch:inherit; font-style:inherit;
font-family:"Arial Narrow", Arial, Helvetica, sans-serif; font-stretch:condensed;}
}
I'm not sure why it works for some Firefox mac users and not for others. All tested computers are operating Firefox 19. In the computers where Arial Narrow is not working the font is defaulting to Times not Arial.
I did notice that on the computers where it displaying correctly, Arial Narrow is installed in the user library as well as the system library. On computers where I am seeing Times, Arial Narrow is only in the system library, not the user library... however, Arial is installed in both, so why is the navigation defaulting to Times?
In general, does Firefox target fonts within the mac user library or system library?
Any other suggestions on how to fix this? Am I missing something simple?
Any help is greatly appreciated thanks.
OK, well I figured something out if anyone is interested. I added "arial" in lowercase to the stylesheet and Firefox defaulted to arial rather than Times.
You could try the following CSS3 rule:
#font-face { font-family: Arial Narrow;
src: url('ArialN.ttf'),
url('ArialN.eot'); /* IE9+ */
To make it work, you need to include the font file(!) to the appropriate folder.
Example of use:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face { font-family: Arial Narrow;
src: url('ArialN.ttf'),
url('ArialN.eot'); /* IE9+ */
}
div{font-family:Arial Narrow;}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 9+ only supports fonts of type .eot. Internet Explorer 8 and earlier, do not support the new #font-face rule.</p>
</body>
</html>
Hi I'm editing a website that has been made compatable with internet explorer so it doesn't work in firefox.
Is there any way to add a firefox or mozilla stylesheet?
Thanks for you help
Judi
<!--[if FIREFOX]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]-->
You can't do anything as elegant as the Paul Irish solution for IE but you can create a FF specific set of definitions using:
#-moz-document url-prefix() { CSS BLOCK }
Before anyone starts jumping up and down screaming "THIS SHOULD NEVER HAVE TO HAPPEN UNLESS YOU DID SOMETHING WRONG" - it totally happens when we're talking about Firefox vs Chrome vs IE font rendering on a tightly constrained grid with a lot of left to right text justification.
You might also try out the CSS Browser selector:
http://rafael.adm.br/css_browser_selector/
This simple JS file allows you to append things like .gecko and .ff3 to your CSS.
* APPENDED - 2014 *
I want to actually append this because, two years later, the standard solution is to perform feature detection through modernizr.js instead of browser detection. "Firefox" is a very blunt instrument with all the versions hanging around the net. This answer still works, it's just not the recommended solution unless you very specifically need the browser, all versions, and nothing else.
One way to do this, with php is to look at the user agent and see what browser is it. This is what I use:
Ex:
if (preg_match('/Firefox|Chrome|Opera|Safari|MSIE 8.0/', $_SERVER['HTTP_USER_AGENT'])) {
link rel="stylesheet" href="one.css" type="text/css" media="screen"
}
else {
link rel="stylesheet" href="other.css" type="text/css" media="screen"
}
Also in the preg_match function you should enter the agents that you want.
Have in mind, if you don't know php, that the example I wrote needs editing and correct formatting.
No. The <!--[if IE]><![endif]--> syntax is Internet Explorer specific. It is a non-standard microsoft extension to CSS.
See conditional comments for more details.
No, conditional comments are entirely an Internet Explorer thing AFAIK.
However, you can create a conditional comment that IE will not parse and thus is for non-IE browsers only:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]>
this is however not valid HTML. There seem to be workarounds to make it valid. Check out the "Downlevel-Revealed conditional comment" paragraph in the Wikipedia article.
In the last few days we have noticed that IE8 during page load occasionally shows momentarily a blank (white) page. It does not happen every single time. I would estimate about 10%. This issue has been brought to our attention by visitors on a site with several millions pages a day, which suggests that it has really appeared very recently. However, a quick look at the recent Windows updates did not reveal any changes related to IE at all. Also, I tried to turn on and off all possible options in IE, turn off all extensions, switch on and off compatibility mode, tried various doctypes etc. without any success. The problem can be demonstrated even on a very simple example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
body { background-color: Black; color: White; }
a { color: White; }
</style>
</head>
<body style="background-color: Black;" bgcolor="Black">
Reload
</body>
</html>
Just click on the reload link repeatedly, and you will see a white flash occasionally. Can anybody else confirm it? I run Vista, but it has been reported also on XP. It seems like some internal repainting problem such as when you don’t make the window background transparent in the RegisterClass function.
I've got the same problem with some sites I've build. It's very annoying and I haven't seem to solve it yet. Same occurs in IE6 and IE7, but that can be 'solved' with
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
Couldn't find a solution for version 8.
I had a similar issue and searched every where for an answer. I think I may have it. I had a flash banner and would get an ugly white flash that filled the browser whenever I clicked on a link to a new page or did a refresh. I placed wmode:'transparent' in the parameter list for the swf object. Now it looks the same as FF - no ugly white flash!
swfobject.embedSWF('banner.swf', 'flashcontent', '960', '120', '9.0.0', 'assets/swfobject/expressinstall.swf', {}, {bgcolor: '#000000', menu: 'false', wmode:'transparent'}, {id: 'flashcontent'});