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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Navbar display issues in IE

    Hi,

    Please see url http://testing.backstageweb.net/. In IE 9, looks fine.

    In IE 8, navbar background is missing.

    In IE 7, navbar background is missing and the logo is way off to the right.

    ??

    Thanks,

    John

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Looks like at least part of the problem is here:

    Code:
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    You're using HTML5 elements, which IE8 and under don't recognise. The js file here should sort that, but the src attribute is incomplete - missing http: at the start.

    Correct that first and give it another go.

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    SB,

    That exact code is already in the header - ?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, but the src attribute looked like it was missing the initial http:.
    In fact, that's not the problem, as that URL does work. The problem lies here in nav.css:

    Code:
    .menu#nav-primary {
    	background:url(../images/nav_bkgrnd.jpg)no-repeat;
    	/*overflow:hidden;*/
    	width:1000px;
    	height:145px;
    	margin:0;
    	}
    You'll see there's no space between the url and no-repeat. This is causing IE8 to fail parsing the background styling. Shove a space in there and give it another go.

  • #5
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Sorry, I added "http:" at the start of the source, but didn't fix anything.

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Okay, IE 8 looks good.

    Logo is still off in IE 7.

  • #7
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I see the problem is with the text align...

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, have a try adding:

    Code:
    #logo{text-align:left}
    to your css.

  • Users who have thanked SB65 for this post:

    johndove (12-05-2012)

  • #9
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    text-align:left works for IE, but screws it up in other browsers. Absolute positioning works.

    Code:
    #logo a {
        background: url("../images/logo.jpg") no-repeat scroll 0 0 transparent;
        display: block;
    	width: 380px;
    	height: 67px;
    	left:434px;
    	top:82px;
        position: absolute;
        text-indent: -999em;
    	z-index:100;
    }

  • #10
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks very much for your assistance!


  •  

    Posting Permissions

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