View Full Version : Ie7 and Ie8 compatibility

11-01-2011, 05:16 AM

I have had some issues with getting a site to work in ie7 and ie8. It seems to have to do with the inline-block issue but I can not seem to get a fix to work. From what I see, I am running into these issues.

It seems to be ignoring list-style-type: none.

It seems to be ignoring inline-block.

I have tried a few fixes, but none seem to work.

Here is what I have:

/* IE7 only */
nav ul li {

And I have this as my main style sheet:

/* Main navigation styling */

nav {
width: 40%;
position: absolute;
left: 590px;
top: 155px;

nav ul {
list-style-type: none;

nav ul li {
display: inline-block;
margin-left: 15px;

ul.navmenu li a {
display: block;
width: 90px;
height: 40px;
background-image: url(images/navbuttons.png);
font: 14px Arial, Helvetica, sans-serif;

ul.navmenu li.home a {
background-position: 0 0;

ul.navmenu li.about a {
background-position: -105px 0;

ul.navmenu li.gallery a {
background-position: -218px 0;

ul.navmenu li.contact a {
background-position: -335px 0;

ul.navmenu li.home a:hover {
background-position: 0 -40px;

ul.navmenu li.about a:hover {
background-position: -105px -40px;

ul.navmenu li.gallery a:hover {
background-position: -218px -40px;

ul.navmenu li.contact a:hover {
background-position: -335px -40px;

I appreciate any help I can get.

11-02-2011, 03:02 AM
Is there anyone that can help with this?

11-02-2011, 03:35 AM

11-02-2011, 12:37 PM
Thank you for replying to my question.... however, I have tried this trick and it doesn't work or recognize it.

I have tried *zoom: 1 and display: inline. I have also tried placing those commands in a IE7 only css file and placed this code in the head section:

<!--[if IE 7]>
<link href="styleie7.css" media="screen" rel="stylesheet" type="text/css">

Here is the contents of that css sheet for reference.

/* IE7 only */
nav ul li {
zoom: 1;
display: inline;

I have been through tons of internet blogs talking about this (including your link) and it is not working. A cut and paste link is probably not going to help unless it is something obscure.

Is there anything specific someone can point out that could be causing this behavior?

11-02-2011, 12:53 PM
Below are some screenshots of the problem. Hopefully it helps.

Working IE 9 Example (http://testme.joesano.info/assignments/workingexample.jpg)

IE 7 Example (http://testme.joesano.info/assignments/brokenIE7example.jpg)

IE 8 Example (http://testme.joesano.info/assignments/brokenIE8example.jpg)

It works in Firefox, Chrome, Safari, Opera. Just cant get these to versions of IE. I don't need IE 6.

11-03-2011, 12:23 AM
I found the answer in another post.

I built the site in HTML 5. IE 8 and previous versions do not support the header, footer, nav, aside, etc tags and did not look at the css for them. A javascript solution was necessary to fix. That solution is here. (http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/)

Consider this thread resolved.