Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Ie7 and Ie8 compatibility

    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:

    Code:
    /* IE7 only */
    nav ul li {
    	display:inline;
    	zoom:1
    }
    And I have this as my main style sheet:

    Code:
    /* 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.

  • #2
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Is there anyone that can help with this?

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!--[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.
    Code:
    /* 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?

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by jsano; 11-02-2011 at 11:55 AM.

  • #6
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by jsano; 11-02-2011 at 11:25 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •