Question

I’m using the Blueprint CSS framework to develop my website to ensure cross-browser compatability…except, it looks completely different in IE.

The site is http://rtwilson.com/academic-new/ and looks fine in Firefox and Chrome, but completely messed up in IE. The main body is not centred, the image is in the wrong place and the text is rather weird.

Does anyone have any idea how I can sort this? I thought the whole point of Blueprint et al. was that it sorted the problems with cross-browser (particularly IE) compatibility. I have included the correct IE style file – so any other ideas?

Answer 1

Blueprint is fine (although I have recently switched to Twitter Bootstrap)- regardless of the complexity of the site, and it does do all of the things for you, as long as your markup is correct and the classes are used correctly.

One place to start, other than the doctype (which should be added, as well – as mentioned by Michas), would be to add a “last” class to the div that contains your navbar div. The way you have it written right now is that you have a span-24, containing another span-24 immediately followed by a span-15 and a span-9.

You have:

    <div class="span-24 last">
        <div class="span-24">
        ...
        </div> 
        <div class="span-15">
                ...
        </div>
        <div class="span-9 last">
                ...
        </div>
    </div>

You should have:

    <div class="span-24 last">
        <div class="span-24 last">
        ...
        </div> 
        <div class="span-15">
                ...
        </div>
        <div class="span-9 last">
                ...
        </div>
    </div>

As it is written now, I would not be in the least bit surprised that IE can’t figure out that there shouldn’t be 48 spans in a single row.