page content not displayed in Explorer - css

The beginnings of a site here:
http://qaa.miltonfame.org/
html and css pass validation tests
Page displays fine in all Mac browsers I have tried (Safari, Firefox, Camino)
Page displays fine in Windows 7 FireFox
Nothing but background renders in Explorer 8 Windows 7 (and in other Explorer versions via screenshot services.) View Source shows that Explorer is getting the content - it's just not appearing on screen.
No idea how to approach addressing this - any suggestions would REALLY be appreciated.
Thanks a million.

My friend, you haven't closed your script tag for jquery. I saved a local copy and tested it - the content shows up once the tag is closed.
<script type="text/javascript" charset="utf-8" src="jquery-link" />
It needs to be like this :
<script type="text/javascript" charset="utf-8" src="jquery-link"></script>
Cheers! :)
Also you've got a script tag and meta tag at the bottom that you may need to take care of.

I'm going to take a shot in the dark and say that if you remove the following, you'd have better success:
<!--[if lte IE 7]>
<script src="/js/ie7/IE8.js" type="text/javascript"></script>
<![endif]-->
Since you say that HTML and CSS passes, you can pretty much rule that out. Your source doesn't look that complicated. That leaves JavaScript, and the only IE specific thing in your source are those lines.

Related

IE not loading specific Stylesheet

As you can see on this live demo, I have a website with two stylesheets, one for our beloved IE and another one for the normal browsers, set like this on its header:
<link rel="stylesheet" type="text/css" href="stylelab.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_stylelab.css" />
<![endif]-->
Even though I have checked many times its spelling, it seems correct but if you open the link from IE (IE v11, in my case), normal Stylesheet is loaded instead IE one.
To check easily if the other CSS is loaded, in theory, when opening the link from any IE and executing the menu (bottom right button), it has blue background.
What is missing here?
IE stylesheet has the entire normal stylesheed PLUS the additional properties needed for it to work, maybe this is wrong and shoul only have the additional properties..?
Conditional comments are no longer supported
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
See: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
IE stopped support for conditional comments as of IE10.
At this point a better solution is to target CSS based on features rather than vendors/browsers. Tools like modernizr can really help you with this.

IE9 - CSS failing when printing

I'm having problems when it comes to print in EI9. It seems that the css is failing, but it works great in IE10, IE11, Firefox and Chrome.
I read about bootstrap (yes, I'm using it) and html5 issues when it comes to this browser, but I couldn't find a solution that works in my case.
This is the most significant thing that I've tried so far:
<!--[if lt IE 9]>
<script src="html5shiv/dist/html5shiv.js"></script>
<script src="dest/respond.min.js" type="text/javascript"></script>
<![endif]-->
Thanks!
This might help.
Printing Twitter Bootstrap correctly
This site has a pretty detailed explination for html and js browser hacks. http://browserhacks.com
You could also try forcing the IE mode. Like set it to edge.
IE Compatibility Mode: 'X-UA-Compatible' tag 'Edge'
This is a long shot..
http://support.microsoft.com/kb/973479

Dreamweaver CSS <--[if IE]>

I'm working on a small website, but of course IE doesn't view it the same as Chrome or Firefox do. I've read around and found using <--[if IE]> should make only IE use the stylesheet I need.
When I was using Microsoft Expression on a different PC earlier, it worked fine. I came home and started editing in Dreamweaver CS5, now it doesn't work as it should.
I researched it a little and I know that Dreamweaver views it as a comment rather than an if function.
So how can I fix/get around this?
Thanks in advance!
P.S. The whole piece of code I'm using is <!--[if IE ]> <link href="IEcss.css" rel="stylesheet" type="text/css"> <![endif]-->
Edit: I found the answer, I had to close the comment tag before referencing the stylesheet. http://www.quirksmode.org/css/condcom.html
You have a space after IE:
<!--[if IE ]>
Should be:
<!--[if IE]>
Other than that, it looks correct. But the space may very well be throwing it off, because conditional comments have to match an exact syntax – otherwise they get interpreted as regular comments and ignored.
Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver document. For example, you can use this option to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.html

Suckerfish dropdown not working in IE 8

This is a weird bug that I can't figure out because I have tested it on my PC in IE7 and IE8 on XP and it's working just fine.
But the main navigation is broken in XP on this site:
http://tupelomainstreet.com/play
I've attached screenshots of my client's screen and environment.
If anyone has any black magic for IE, that would be amazing. I'm at a loss.
On http://tupelomainstreet.com/shop/salons-and-spas:
You're loading these JavaScript files from your server:
<script src="js/libs/modernizr-1.6.min.js"></script>
<script src="js/mylibs/fancyzoom.js"></script>
<script src="js/mylibs/slideshow.js"></script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
(for lt IE 7 only) <script src="js/libs/dd_belatedpng.js"></script>
Let's stick with modernizr-1.6.min.js.
If I load that file, I get something which looks distinctly not like a JavaScript file:
<!doctype html>
...
<title>Downtown Tupelo Main Street Association</title>
The fact that a HTML page is being returned is surely the work of mod_rewrite. Without mod_rewrite, I'm sure you'd be getting a nice, easy to debug 404 Not Found error instead.
I believe the easiest way to fix this is to prepend the script includes with /:
<script src="/js/libs/modernizr-1.6.min.js"></script>
This will load the correct file.
It's a very safe bet that this problem is what's killing your menu in Internet Explorer.

How do I get Multiple Style Sheets to work on a single page?

Here's the situation.
I made three style sheets for each of the three pages I am currently working on. One that works in IE8/Safari/Opera/Firefox. One that works in IE7 and one which if used alone works on IE6
I tested everything on www.xenocode.com/browsers and that sites' IE 6 and 7 emulators.
3 I used a variation of the article's suggestions for a way to make all the sheets work. (In the section:
http://www.thesitewizard.com/css/excludecss.shtml
The problem is that while it calls up the proper css for IE 8 and IE 7 online (It works just fine directly off my computer), it can't seem to call up the code for IE6 properly online causing the layout to be messed up in IE 6 (Or at least the emulator on xenocode.com.
Is there a better method?
(Can't show you the full page, due to my client being adamant about not showing it until the project is finished.)
Assuming you are using browser conditional statements...
I would check that the emulator your using is able to interpret browser conditional statements. If unsure you could always disable all other stylesheets and link normally (using the link tag) to just the IE6 stylesheet and then test
You want to have IE6 specific CSS? Also, please consider using Microsoft SuperPreview to locally see how your design looks in various versions of IE6.
You can use these css selection tags for the specific Browser version for IE.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/ie60.css" /><![endif]-->
<!--[if IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie55.css" /><![endif]-->
<!--[if lt IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie50.css" /><![endif]-->
http://rafael.adm.br/css_browser_selector/
I love this thing because it lets me define granularly all the changes I want for different browsers / operating systems.

Resources