homepage Welcome to WebmasterWorld Guest from 54.242.241.20
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE 7/8 Compatibility with display:block
brokaddr



 
Msg#: 4559508 posted 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



 
Msg#: 4559508 posted 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



 
Msg#: 4559508 posted 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:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

Cd&

brokaddr



 
Msg#: 4559508 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4559508 posted 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



 
Msg#: 4559508 posted 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



 
Msg#: 4559508 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4559508 posted 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



 
Msg#: 4559508 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4559508 posted 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



 
Msg#: 4559508 posted 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



 
Msg#: 4559508 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4559508 posted 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



 
Msg#: 4559508 posted 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&

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved