SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inline Nav not working in IE7 & IE8

    I finally got my site live today, and of course it looks wrong in IE7 & 8. Im not quite sure how to work around this. Any suggestions? Thanks in advance!

    http://www.bobmccainhomes.com

    The HTML:

    <code>

    <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About Us</a>
    <a href="custom_homes.html">Custom Homes</a>
    <a href="remodels.html">Remodels</a>
    <a href="photo_gallery.html">Photo Gallery</a>
    <a href="testimonials.html">Testimonials</a>
    <a href="contact.html">Contact Us</a>

    </nav>

    </code>

    THE CSS:

    <code>


    nav{
    display: table;
    background-color:#f5f4f4;
    width: 100%;
    table-layout: fixed;
    }

    nav a{
    display:table-cell;
    padding: 7px 0;
    color: #333;
    text-align:center;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    text-decoration:none;

    }

    nav a:hover{
    color: #FFF ;
    background-color: #a10324 ;
    }

    nav a:active {
    background-color: #a10324 ;
    }

    </code>

  2. #2
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured out IE8 using this script:


    <script>
    'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})
    </script>

    IE7 is still acting weird. blah.

  3. #3
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I lied. It IE8 works in XP but not Windows 7. WTF??

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yes, your page seems to render properly in IE8 on a WinXP box.

    IE7 does not understand the display:table properties. You'll have to choose another method of constructing your nav menu if you require IE7 compatibility.

    Also, just a reminder, neither older version of IE recognizes the HTML5 <nav> tag as a block element, so it will have to be explicitly set to display:block if you decide to use a different structure for your menu.

    Off Topic:

    FYI - The [code] tags around your code should be written with square brackets rather than angle brackets.

  5. #5
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for replying. any clue why IE8 works in Windows XP, but not Windows 7?

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    That sentence doesn't quite make sense

    I think you may be using IE9 in Win7 and setting IE9 to IE8 mode. Those simulated modes are "simulated" but not perfect.

  7. #7
    SitePoint Member
    Join Date
    Jun 2013
    Location
    Edmond, WV
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you should just use the plain old float and display block on the a tags, that will work in all browsers . If you're dead set on using that then you can use conditional statements or hacks to add display block and float just to the ie7 version. Cheers!
    Last edited by ioan; Jun 26, 2013 at 16:09. Reason: brain fart

  8. #8
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ioan View Post
    Maybe you should just use the plain old float and display block on the a tags, that will work in all browsers . If you're dead set on using that then you can use conditional statements or hacks to add display block and float just to the ie7 version. Cheers!

  9. #9
    SitePoint Enthusiast colin27's Avatar
    Join Date
    Jun 2013
    Location
    Austin, Texas
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...I will tweak around some more. I appreciate the advice

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    For IE7 you could add these rules to give some basic styling to the nav.

    Code:
    *+html nav{
    	display:block;
    	text-align:center;
    	width:100%;	
    }
    *+html nav a{
    	display:inline-block;
    	padding:7px 10px;	
    }


Tags for this Thread

Bookmarks

Posting Permissions

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