homepage Welcome to WebmasterWorld Guest from 54.196.24.103
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
IE 7/8 Compatibility with display:block
brokaddr




msg:4559510
 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:4559699
 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:4562148
 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:4563025
 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




msg:4563045
 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:4563143
 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:4563144
 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




msg:4563205
 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:4563313
 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




msg:4563354
 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:4564361
 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:4564387
 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




msg:4564467
 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:4564504
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved