making blueprint css working in IE 6 and IE 7

Question

I am using Blue print CSS and it works fine in Firefox...but when I look at it in IE, even with the for IE lt IE8, it still doesn't seem to be working right in terms of spacing and alignment.

Any suggestions on what I can do to make it look proper?

Check if the path to the `.css` is correct or not. – Alan Haggai Alavi Dec 08 '09 at 05:25 — Alan Haggai Alavi, Dec 08 '09 at 05:25

score 3 · Answer 1 · answered Dec 20 '11 at 14:22

Make sure that you use a doctype. If you do not it will render in quirks mode. I had the same problem and correcting the doctype worked.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

That should go at the top of the document

score 2 · Accepted Answer · answered Dec 08 '09 at 05:23

2

Are you including the ie.css file? Below the regular blueprint css files, include the ie.css file, using the notation that only IE will parse:

<link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection"> 
<link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print"> 
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

Make sure that all the URLs to the CSS files are correct and are working on your site also.

answered Dec 08 '09 at 05:23

John Paulett

15,596
4
45
38

I second this answer. They intentionally put all of the IE hacks in a separate file to keep the code neat. IMO, it's great to have it separate in the unoptimized src/ version, but who isn't at least trying to support IE? I'm not sure why it has to be separate. – Ellie P. Dec 08 '09 at 05:27
How can I check, my code does show teh IE hack and the other blueprint files are coming through properly. It for the most part, appears right in IE, *except* for the alignment of the text and the lines in the
– Satchel Dec 09 '09 at 17:24

score 0 · Answer 3 · answered Dec 10 '10 at 21:05

I know this is a bit late, but hopefully it'll help someone who googles it.

A big gotcha when using blueprint here is to ensure that your container div has a class of container, not id:

<div class="container"> ... </div>

Not

<div id="container"> ... </div>

It's caught me out a few times before.

making blueprint css working in IE 6 and IE 7

3 Answers3