...

View Full Version : Ie7 and Ie8 compatibility



jsano
11-01-2011, 04:16 AM
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
11-02-2011, 02:02 AM
Is there anyone that can help with this?

Sammy12
11-02-2011, 02:35 AM
http://css-tricks.com/snippets/css/cross-browser-inline-block/

jsano
11-02-2011, 11:37 AM
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
11-02-2011, 11:53 AM
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.

jsano
11-02-2011, 11:23 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum