IE 7/8 Compatibility with display:block

Forum Moderators: not2easy

Message Too Old, No Replies

IE 7/8 Compatibility with display:block

brokaddr

9:57 am on Mar 29, 2013 (gmt 0)

Problem:


#navigation li {
display:inline-block;
 }

html:


<!DOCTYPE html>
<html>
<head>
<body>
 
<div id="navigation">

  <ul>
  <li><a href="#">link1</a></li>
  <li><a href="#">link2</a></li>
  <li><a href="#">link3</a></li>
  <li><a href="#">link4</a></li>
  </ul>
</div> 

</html>

In *every* tested-browser (including IE10), the links line up as they should, beside one-another.

In Compatibility Mode (IE10), the links are stacked, as if IE takes the block literally.

Is there any way to band-aid this so IE7/8 users see the content similarly to the rest of the world?

brokaddr

11:32 pm on Mar 29, 2013 (gmt 0)

4 hours later and I came up with a band-aid by using an IE-explicit stylesheet.
#navigation li {
display:inline;
zoom: 1;
*display: inline;
}

As well, IE didn't play nice with max-width100% for images:
width: auto;

Question:
I'm extremely new to the world of CSS for layouts; since the primary portions of my main stylesheet are identical to the IE-explicit stylesheet... do I need to re-specificy *every* class in the IE stylesheet? Or only the portions I need to have specific IE 'hacks' for?

COBOLdinosaur

5:43 pm on Apr 6, 2013 (gmt 0)

before you start changing everything, there are some things you can do to mitigate the effects of old browser not being up to newer technologies.

first of all use a strict doctype, that will improve IE8.
then you can add this to the head of your pages:


finally iyou can resort to a few hacks as outlined here:
[webdevout.net...]

Cd&

brokaddr

7:43 am on Apr 9, 2013 (gmt 0)

COBOLdinosaur, what does this googlecode do, exactly?

I am in the process of validating all of my pages to HTML5.

drhowarddrfine

10:50 am on Apr 9, 2013 (gmt 0)

It's not "googlecode" but "html5shiv". It inserts the elements into the DOM tree because IE will not style elements it does not recognize and IE<9 does not recognize HTML5 while any other browser does.

COBOLdinosaur

4:28 pm on Apr 9, 2013 (gmt 0)

The latest version of the shim and any beta work being don is also out on github. The googlecode domain is just a repository.

Cd&

COBOLdinosaur

4:30 pm on Apr 9, 2013 (gmt 0)

BTW, it won't improve old IE browsers by giving them the newer CSS3 properties, but it generally keeps them from breaking and choking on the HTML5 tags.

Cd&

lucy24

7:30 pm on Apr 9, 2013 (gmt 0)

display: inline-block is a special case even within the special case of MSIE < 11.

caniuse dot com says, quote,

Only supported in IE6 and IE7 on elements with a display of "inline" by default.

In other words, only supported on elements that you'd never use it on ;)

Contrariwise: navigation headers-- if that's what you're dealing with-- don't have to be called lists in the html.

brokaddr

1:47 am on Apr 10, 2013 (gmt 0)

Damned IE, always making a mess..

Could I upload code from the googlecode repository and store the code on my site? I don't like loading 3rd-party scripts because browser add-ons like requestpolicy break such things, and a large part of my userbase has it.

So far, I've only been able to test my site in IE 7 as the oldest browser, as it's offered in the Compatibility View of IE10. I shudder to think what the site looks like in anything older. It's been quite a feat getting the site usable in IE7.

lucy24

5:21 am on Apr 10, 2013 (gmt 0)

You can probably dump 6 unless your target audience includes low-budget groups that have no control over their hardware. In the US and Canada this tends to mean indigenous communities, especially schools. If that's not an issue, get your stuff to work in 7 and you'll have done as much as the average person can hope for.

:: shuffling papers ::

I think Iqaluit finally upgraded about a year back, from MSIE 6 to 8-- maybe even 9, hard to tell-- and that was my biggest pool of antiques. Not sure if the pre-existing 7 got upgraded, though. fwiw, I've got some extra jiggery-pokery for MSIE 5 and 6 and haven't seen any humans in recent memory.

brokaddr

8:48 pm on Apr 12, 2013 (gmt 0)

I think I might do just that, lucy24 - it's been a pain getting 7 compatible and it's pretty darned exact to Firefox & Chrome right now.

The audience you specified are not the site's target visitors, anyway.

COBOLdinosaur

11:22 pm on Apr 12, 2013 (gmt 0)

Fortunately the audience for my site are primarily developers and less than 1% are on IE< 8 so I do virtually nothing but the shiv and a message to upgrade on pages the old junk can't handle.

Cd&

drhowarddrfine

12:17 pm on Apr 13, 2013 (gmt 0)

Yes, a lot of people serve the shiv from their own server.

@COBOL - I'd bet less than 15% of your users use IE at all except they're COBOL people?

COBOLdinosaur

3:07 pm on Apr 13, 2013 (gmt 0)

Actually it has been a while since I did much COBOL. My site is geared to web development, and most of my time is spent on sites like this trying to convince developers that the right way to do web development is by following standards.

Cd&