Ie7 and Ie8 compatibility

[jsano]

Hello.

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 {
	display:inline;
	zoom:1
}

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.

[jsano]

Is there anyone that can help with this?

[Sammy12]

http://css-tricks.com/snippets/css/c...-inline-block/

[jsano]

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">
    <![endif]-->

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?

[jsano]

Below are some screenshots of the problem. Hopefully it helps.

Working IE 9 Example

IE 7 Example

IE 8 Example

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

[jsano]

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.

Consider this thread resolved.