33680

Header disappears and lists become unstyled in IE 8 and below

Question:

It was brought to my attention that in IE 8 and below, my header disappears and my lists become unstyled.

Meaning, they look different than what they should and they have bullets.

Why is this happening and how can I fix it.

I know I haven't included the html5 shim / html5 shiv yet, is that causing the header to disappear? What about my <main> element and the list-styling?

Here is a link to the page where this is happening: <a href="https://dl.dropboxusercontent.com/u/270523/help/search/new.html" rel="nofollow">https://dl.dropboxusercontent.com/u/270523/help/search/new.html</a>

And here is what it looks like in IE8: <a href="http://pageaffairs.com/sp/so-16270338.png" rel="nofollow">http://pageaffairs.com/sp/so-16270338.png</a>

Answer1:

As indicated in <a href="https://stackoverflow.com/questions/13094754/css-styles-not-applied-when-using-html5-selectors-has-something-changed-about-t" rel="nofollow">this question's accepted answer</a>, IE8 does not treat HTML5 elements very nicely. Not only does it not style these elements, but it sometimes (as you are seeing) makes them seem to disappear entirely. I've seen this firsthand on a site my team developed. IE8 was turning all the <section> tags we had used into <section />, which just messed up all of our content and styling. You're going to need to use the <a href="https://code.google.com/p/html5shiv/" rel="nofollow">HTML5 shiv script</a> to get it to work (<a href="http://modernizr.com/" rel="nofollow">Modernizr</a> fixed it for us, and the HTML5 shiv script is just a part of it, but you should likely only need the shiv script at a minimum).

Answer2:

Older IEs does not render HTML5 tags therefore your styling applied to them are ignored. (They don't even render as blocks like "oh well, lets pretend it's a div". No, it's totally ignored).

And yes, as you said, the best would be add <a href="https://code.google.com/p/html5shiv/" rel="nofollow">html5shiv</a> to the header of your code, like this:

<!--[if lt IE 9]> <script src="path/to/your/shiv.js"></script> <![endif]-->

This means that if lower than IE 9, apply this script.

Additionally, the same occurs with CSS3 stuff, like border-radius and stuff. For that, use <a href="http://css3pie.com" rel="nofollow noreferrer">CSS3Pie</a>, which is handy.

.someRoundCorner { border-radius:4px; behavior:url(path/to/css3pie/htc); }

As a suggestion, for the time being still use divs with id equal to the HTML5 tag you actually wanted if your main audience uses IE < 9. Better than making use of .js (and if .js is disabled, layout will break like now). When the time comes when the old IEs are not more supported, will be easier to search and replace your documents having the id equal the tag you wanted.

Update: Your css is main ul, [role="main"] ul, #main ul, but since IE have no idea what is the tag main, it throws the UL out and so, your CSS selector does not match. See in this image that all elements he does not know, he transforms into an empty element:

<img alt="IE8 developer tool and source code" class="b-lazy" data-src="https://i.stack.imgur.com/vLhkF.png" data-original="https://i.stack.imgur.com/vLhkF.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

On left is the code it actually rendered while the right is the real source. As you see, the UL is out of main.

Recommend

  • Python subprocess change dir via client/server
  • Remove PNG plot margins
  • Upload to Azure Blob using SAS and REST
  • javax.net.ssl.SSLHandshakeException: Remote host closed connection during handshake while inserting
  • how to add listview in listview in android?
  • Using DI in ConfigureService-Methods (especially IApplicationLifetime) in .NET Core
  • UWP XAML ImageBrush.imageSource from networkshare
  • iphone/ipad web video only plays over 3g not Wifi
  • Why __weak object will be added to autorelease pool?
  • No resource found that matches the given name: attr 'homeHint'
  • Two ways to execute a Stored procedure in VBA, Which one is better?
  • How to remove just the index name and not the content in Pandas multiindex data frame
  • InputDispatcher Error
  • Is there any way to center certain columns in table?
  • Can I run Robotium tests automatically in parallel on multiple emulators?
  • Android : Strike out Text with bold or thicker line than default STRIKE_THRU_TEXT_FLAG
  • Programmatically check if PHP is installed using Python
  • Swift gives “self used before all stored procedures are initialized” error when building child nodes
  • Find symbol dependencies in source code [closed]
  • How to read JSON-LD data from HTML in Objective-C?
  • Many to many relationship core data query for specific collection
  • Need a consistent TimePicker gizmo for mobile web site
  • end daemon processes with multiprocessing module
  • force json_encode to create strings
  • Android device acting as an accessory
  • Who propagate bugfixes across branches (corporate development)?
  • During installation of Django, why do I keep getting ImportError: No module named django?
  • pillow imaging ImportError
  • Custom validator control occupying space even though display set to dynamic
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • All Classes Conforming to Protocol Inherit Default Implementation
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • SSO with signing and signature validation doesn't work
  • When should I choose bucket sort over other sorting algorithms?
  • Websockets service method fails during R startup
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Unanticipated behavior