Bootstrap site looks awful in IE8

HTML & CSS
1

I have written a new website for my employer, but it looks like dog mess in earlier versions of IE8.

It uses twitterbootstrap.

Any ideas ?

2

You should consider validating your page. There are some serious errors in there. No point trying to debug unless it’s valid.
Validator

1 Like
3

You’ll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the “mobile site” aspects of Bootstrap.

I don’t think you need to disable responsiveness for IE8, it was just a good note. Here is the IE8 support part of the page.

In your IE9 tag, try adding respond.js:

<!--[if lt IE 9]>
    <script src="http://www.watsonsrealestate.net/js/html5shiv.js"></script>
    <script src="http://www.watsonsrealestate.net/js/respond.js"></script>
<![endif]-->

Raw respond.js Github here

You should minify of course.

http://refresh-sf.com/yui/

1 Like
4

####Using experimental feature: HTML5 Conformance Checker.
The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies.

You shouldn’t worry about the Validation checker too much. If at all. Case in point.

2 Likes
5

Woops. I saw errors like the stray head and the body tag not supposed to be open (etc) and figured there were serious errors there. Didn’t see that HTML5 message.

6

Wow. Totally did NOT think I’d ever see something like that from a company like that.

But, then, I figure they try to code so that computers from every corner of the globe can utilize their services (mo’ clicks = mo’ money.)

Just sayin’,

:slight_smile:

7

Does the fact that Google (or any company) has warnings or errrors on their validation check someone mean that others shouldn’t use them?

I think they’re a fantastic tool for people, especially when fixing up an old website or pounding out something quick that they haven’t had a lot of chance to self validate. Also helps you catch a lot of goofy little errors when you’re learning things.

8

Pages don’t NEED to be validated. IMO the main use of it is debugging. It also helps SEO a little bit if Google doesn’t have any issues going through your pages (which invalid code can slightly hurt you). Google doesn’t need valid pages for people to use their services. They don’t care.

I’m DoD working on a government website (very highly used). I’m not bending over backwards to make it valid. Noone does. It works and that’s all that matters. Same with Amazon or another big business.

1 Like
9

Yeah, I absolutely agree with everything you just said, I just didn’t necessarily agree with

You shouldn’t worry about the Validation checker too much. If at all…

Especially when most of the sites discussed here probably aren’t that large of projects that every little bit doesn’t help :smiley:

Definitely a useful tool.

10

When I’m done a full website, I might run it past the full-website validator

But other than that, I agree with not worrying about it. As you make your pages, you can tell whether you have serious markup issues (e.g. the page will break). Minor issues like forgetting alt=“” aren’t huge (well, THAT is since it’s accessibility but it won’t break the page.)

11

Does the fact that Google (or any company) has warnings or errrors on their validation check someone mean that others shouldn’t use them?

Whether or not you want to use them is up to the individual I think. I personally don’t see much use in the service. All it ever seems to do is raise false flags. Which if someone is new to web development may have them chasing ghosts and down a path of endless tweaking to validate against a tool that isn’t exactly accurate or up to standard.

Such as this on the OP’s page:

Line 84, Column 7: Stray end tag head.
</head>

Idk, that’s a pretty simple thing for something like this to miss. Stuff like that muddies the water too much for me to put any trust into it. Not being up to standard is one thing, but that’s just wrong.

12

I’ve often found that these validators and things end up having a bit of a domino. If there’s one issue wrong, sometimes, it causes a tree of other issues that aren’t really issues. Which you have to know something to figure out, which perhaps does lend itself to not being a newbie, so you have a point there.

I guess I just dislike people making blanket statements as fact such as - You shouldn’t use it, at all - when in reality that’s pretty much your personal preference for troubleshooting tools. I’m sure I do it too though, we all have opinions about things.
We can definitely agree to disagree on what tools we use to troubleshoot, though :wink: and in this case there’s either something stopping it from working well, or it’s just failing hard (pssh technology that doesn’t work, what??) so I’d definitely agree to ignore it in this case unless it can be made to behave :smile:

Also, note to OP - is there any reason you have copy about pinterest in your <head>? Doesn’t really matter I guess, just curious. I’d wrap that in a comment tag if you want a comment to identify the meta tag.

13

You don’t need both of these just use the ‘lt IE 9’ block.

<!--[if lt IE 8]>
    	<script src="http://www.watsonsrealestate.net/js/html5shiv.js"></script>
    	<script src="http://www.watsonsrealestate.net/js/respond.js"></script>
	<![endif]-->
	
	<!--[if lt IE 9]>
	<script src="http://www.watsonsrealestate.net/js/html5shiv.js"></script>
	<script src="http://www.watsonsrealestate.net/js/respond.js"></script>
	<![endif]-->

This ‘if lt IE 9’ means “If less than IE9”. therefore ie8 and under are already accommodated for.

14

Even just testing for IE would be sufficient since those conditional comments are only supported in IE9 and earlier anyway.

The validator warning regarding HTML5 is there because HTML5 isn’t yet a standard and so is subject to change at any time. Just because a page would have been valid HTML5 at the time the validator was last updated doesn’t mean that HTML5 hasn’t changed since then leading to the page no longer being valid - hence the warning. Presumably that warning will be removed once there is an HTML 5 standard to validate against.

5 Likes
15

Good point :smile:

16

instance of IE-Hacks you can also use modernizr …

bower:

bower install respond rem-unit-polyfill

script:

<script>
Modernizr.load(
  {
    test : Modernizr.mq('only all'),
    nope : '/vendor/bower/respond/dest/respond.min.js'
  }
  ,
  {
    test: Modernizr.cssremunit,
    nope : '/vendor/bower/rem-unit-polyfill/js/rem.min.js'
  }
);
</script>

example-commit: https://github.com/voku/DO-EPIC-SHIT-Demo/commit/a418d2318646280008be0214a98ebe5a75c81739

demo: openrheinruhr.suckup.de/

17

You shouldn’t worry about the Validation checker too much. If at all.

The underlying engine of IE, Trident, is far more prone to rendering errors with invalid code than other browsers. Whenever I encounter an error specific to IE, especially 8 (which is the fussiest of all the IE’s, worse than 6 even for strictness) validation is the first place I look and nine times out of ten its an unclosed tag or the like causing the issue.

Also, validation failure can push IE 8 into quirks mode - and if its in that mode then the page layout becomes almost impossible to debug.

2 Likes
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.