ansaurus

Question

Why does this site completely break in IE 8 but work perfectly in Firefox 3.6.2?

Answer 1

+1 A:

Probably because it uses CSS3, and CSS3 is not completely supported (or completely unsupported) in IE8. For example, the website uses heavily RGBA colors (colors containing transparency).

It also uses some HTML 5 tags as <section/>, which are neither supported in IE8.

MainMa 2010-07-03 23:56:07

Funny that its not using http://code.google.com/p/html5shiv/ to get round the HTML5 aspect

Dr. Frankenstein 2010-07-04 00:03:09

Guess they just don't like IE... or they don't have access to a Windows system which they can test their site on. Because as of now, IRRC, Node JS doesn't run natively under Windows.

Ivo Wetzel 2010-07-04 02:52:45

Answer 2

+2 A:

This site is made with HTML5, and since I know, IE8 doesn't support it.

CrociDB 2010-07-03 23:56:49

What specifically is CSS3 about this? I mean what features are CSS3 that wouldn't work in CSS2?

Rhubarb 2010-07-04 00:02:15

@Rhumarb: round corners, RGBA colors, and much much more. You can find the information you need on http://www.css3.info/.

MainMa 2010-07-04 00:05:21

What about the fonts aspect? Does IE not support downloading custom fonts from online font stores?

Rhubarb 2010-07-04 02:15:40

IE downloads EOT fonts.

Evadne Wu 2010-07-04 06:14:09

Answer 3

+1 A:

On the very plus side, the error alert in IE6 -- "Please open in a Modern Browser" is Epic. And props for a good, clean design.

Current best practices for the big clients I've worked with recently is html 4.01 strict with an eye toward upgrading when 5 becomes more supported. The code looks great....but just like about everything else really cool, we're at the mercy of Microsoft on IE, and there are SO many people running Explorer (though it's becoming less and less every day)

I worked on one project that built a completely separate site for IE. It just wasn't fun, but the result was very workable.

As Croci said, corners, colors, etc aren't well supported. However, many things, like round corners, degrade well in IE to square corners. I'm not sure the same can be said for colors. See http://www.quirksmode.org/css/contents.html for more detail about what is and isn't supported.

bpeterson76 2010-07-04 01:30:19

yeah, or you get the error alert in IE8 if in compatibility mode.

Timothy 2010-07-04 02:59:19

Answer 4

+2 A:

Here's a solution that might work for you ... just tried it on my local dev environment with your source code and it seems to work pretty well...

Make a backup for the original file before you do this.

Simply do a find and replace of all <header></header>, <section></section>, <nav></nav>, <footer></footer>, <article></article> tags and replace with <div></div> ...

so <section id="menu"> becomes <div id="menu"> 
</section> becomes </div>
<header id="main"> becomes <div id="main">

and so on ...

These tags are not valid HTML by HTML 4 or XHTML 1.0 standards and will not render correctly ...

Since all these tags are actually rendered as blocks in main.css as below , its going to be perfectly okay for them to render as DIVs which are also blocks.

nav,
header,
footer,
section,
article {
  display: block;
}

In case you do not want to change any of the tags .. you could try an IE specific jQuery or javascript replace of the tags (you'll easily find how to do this by googling.)

Also, you should convert some of the references in your css to these elements like this one;

nav {
  margin-left: 15px;
}

to something like

.nav {
  margin-left: 15px;
}

and add class="nav" to the div (previously <NAV> token) like so;

<div class="nav">

Thanks, :) Norman.

UPDATE: as soon as you do the find and replace in the html file only ... you'll see that it works ... you can make the minor edits to the CSS and add the classes later. I belive all custom fonts and your javascript is working just fine in IE after the fix.

EDIT: try this code below as a new html file on your desktop .. open it in IE ... fonts look good ! (-- removed some content so the answer would fit within the 30000 character limit -- you'll also need main.css on the desktop)

<!doctype html> 
<html> 
  <head> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <script src="http://www.vowsjs.org/js/less.js" type="text/javascript"></script> 
        <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'> 
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>Vows &laquo; Asynchronous BDD for Node</title> 
  </head> 
  <body> 
    <div> 
      <div id="main"> 
  <div class="content"> 
    <div id="intro"> 
      <h1>Vows</h1> 
      <h2><span>Asynchronous</span> behaviour driven <span>development</span> for Node.</h2> 
      <h3> 
        There are two reasons why we might want asynchronous testing.
        The first, and obvious reason is that node.js is asynchronous,
        and therefore our tests should be. The second reason is to make tests which target I/O
        run much faster, by running them concurrently.
      </h3> 
    </div> 

    <div id="example"> 
        <p>Write some vows, execute them:</p> 
        <pre class="command">$ vows test/* --spec</pre> 
        <p>Get the report, make sure you kept your word.</p> 
        <pre>A non-promise return value
  &#10003; <span class="vow">should be converted to a promise</span> 
A topic not emitting an error
  &#10003; <span class="vow">should pass null if the test is expecting an error</span> 
  &#10003; <span class="vow">should pass the result otherwise</span> 
A topic emitting an error
  &#10003; <span class="vow">shouldn't raise an exception if the test expects it</span> 
A context with a nested context
  &#10003; <span class="vow">has access to the environment</span> 
  - <span class="vow pending">can make coffee</span> 
A nested context
  &#10003; <span class="vow">should have access to the parent topics</span> 
A nested context with no topics
  &#10003; <span class="vow">should pass the parent topics down</span> 

&#10003; <span id="ok">OK</span> &#187; <strong>7</strong> honored &bull; <strong>1</strong> pending <span id="time">(0.112s)</span></pre> 
    </div> 
  </div> 
  <div style="clear: both"></div> 
</div> 

<div id="menu"> 
  <div class="content"> 
    <div> 
      <a href="#intro">intro</a> 
      <a href="#docs" id="guide-link">guide</a> 
      <a href="#installing">installing</a> 
      <a href="#reference">reference</a> 
      <a href="#about">about</a> 
      <a href="http://github.com/cloudhead/vows"&gt;source <img id="github" src="/images/github.ico"/></a> 
    </div> 
    <div id="dropdown"> 
      <ul> 
        <li><a href="#-structure-of-a-test-suite">Structure of a Test Suite</a></li> 
        <li><a href="#-how-topics-work">How topics work</a></li> 
        <li><a href="#-running-a-suite">Running a Suite</a></li> 
        <li><a href="#-writing-asynchronous-tests">Asynchronous Testing</a></li> 
        <li><a href="#-assertions">Assertions</a></li> 
        <li><a href="#-macros">Macros</a></li> 
      </ul> 
    </div> 
  </div> 
</div> 

<div id="synopsis"> 

</div> 

<div id="installing"> 
  <div class="content"> 
    <h1>Installing</h1> 

<p>The easiest way to install Vows, is via <a href="http://github.com/isaacs/npm"&gt;npm&lt;/a&gt;, the node package manager, as so:</p> 

<pre><code>$ npm install vows
</code></pre> 

<p>This will get you the latest stable version. If you want the bleeding edge, try:</p> 

<pre><code>$ npm install vows@latest
</code></pre> 

  </div> 
</div> 

<div id="docs"> 

</div> 

<div id="reference"> 
  <div class="content"> 
    <h1>Reference</h1> 

<p>The CLI and assertion module are documented here.</p> 

<h2>Test runner</h2> 

<pre><code>vows [FILE, ...] [options]
</code></pre> 

<p>Running specific tests</p> 

<pre><code>$ vows test-1.js test-2.js
$ vows tests/*
</code></pre> 

<p>Running all tests in your <em>test/</em> or <em>spec/</em> folder</p> 

<pre><code>$ vows
</code></pre> 

<p>Watch mode</p> 

<pre><code>$ vows -w
$ vows --watch
</code></pre> 

<hr /> 

<h3>Options</h3> 




<h2>Assertion functions</h2> 

<h3>equality</h3> 

<pre><code>assert.equal          (4, 4);
assert.strictEqual    (4 &gt; 2, true);

assert.notEqual       (4, 2);
assert.strictNotEqual (1, true);

assert.deepEqual      ([4, 2], [4, 2]);
assert.notDeepEqual   ([4, 2], [2, 4]);
</code></pre> 

<h3>type</h3> 

<pre><code>assert.isFunction (function () {});
assert.isObject   ({goo:true});
assert.isString   ('goo');
assert.isArray    ([4, 2]);
assert.isNumber   (42);
assert.isBoolean  (true);

assert.typeOf     (42, 'number');
assert.instanceOf ([], Array);
</code></pre> 

<h3>truth</h3> 

<pre><code>assert.isTrue  (true);
assert.isFalse (false);
</code></pre> 

<h3>null, undefined, NaN</h3> 

<pre><code>assert.isNull      (null);
assert.isNotNull   (undefined);

assert.isUndefined ('goo'[9]);
assert.isNaN       (0/0);
</code></pre> 

<h3>inclusion</h3> 

<pre><code>assert.include ([4, 2, 0], 2);
assert.include ({goo:true}, 'goo');
assert.include ('goo', 'o');
</code></pre> 

<h3>regexp matching</h3> 

<pre><code>assert.match ('hello', /^[a-z]+/);
</code></pre> 

<h3>length</h3> 

<pre><code>assert.length ([4, 2, 0], 3);
assert.length ('goo', 3);
</code></pre> 

<h3>emptiness</h3> 

<pre><code>assert.isEmpty ([]);
assert.isEmpty ({});
assert.isEmpty ("");
</code></pre> 

<h3>exceptions</h3> 

<pre><code>assert.throws(function () { x + x }, ReferenceError);
assert.doesNotThrow(function () { 1 + 1 }, Error);
</code></pre> 

  </div> 
</div> 

<div id="about"> 
  <div class="content"> 
    <h1>About</h1> 

<p>Vows was developed by <a href="http://cloudhead.io"&gt;Alexis Sellier</a>, more commonly known as <a href="http://cloudhead.io"&gt;cloudhead&lt;/a&gt;.&lt;/p&gt; 

    <div> 
        <p>powered by <a href="http://cloudhead.io/toto"&gt;toto&lt;/a&gt;, <a href="http://github.com/cloudhead/less.js"&gt;LESS&lt;/a&gt; and <a href="http://github.com/cloudhead/hijs"&gt;hijs&lt;/a&gt;&lt;/p&gt; 
        <p id="copy">Copyright &copy; Alexis Sellier 2010</p> 
    </div> 
  </div> 
</div> 

    </div> 
    <a href="http://github.com/cloudhead/vows"&gt; 
      <img style="position: absolute; z-index: 5; top: 0; left: 0; border: 0;"
           src="http://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"
           alt="Fork me on GitHub" /> 
    </a> 
    <script src="http://www.vowsjs.org/js/hijs.js"&gt;&lt;/script&gt; 
  </body> 
</html>

Norman 2010-07-04 02:33:44

Custom fonts working for you after doing this? They don't seem to work for me.

Rhubarb 2010-07-04 02:57:11

Let me recheck ...

Norman 2010-07-04 03:12:03

Yep ... they work in IE8 just fine ... haven't checked in IE7 ...

Norman 2010-07-04 03:16:28

Edited answer ...

Norman 2010-07-04 03:25:21

That seems to work. Just curious did you change the style sheet that much?

Rhubarb 2010-07-04 05:34:07

Nope .. no changes top the style sheet .... but you'll have to. Because the tags we changed to divs are referenced in the style sheet. You only have to add a "." before the name to convert it into a class. Then add that class to the div like so ' <div class='nav'> ' - I have explained this in my answer.

Norman 2010-07-04 18:35:12

ansaurus

tags:

views:

answers:

Why does this site completely break in IE 8 but work perfectly in Firefox 3.6.2?

related questions