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 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Header is rendered twice in IE

    Hi all,

    I am having a slight problem with my site. It was beginning to look just how I pictured it in my head. The site looked beautiful in firefox, opera and chrome. Now, I am not naive and I knew there would be some problems with IE but I wasn't expecting this one...

    Unfortunately, my navigation bar appears to be rendered twice in internet explorer. To show you what I mean, here is an image of how it looks in IE and how it looks in opera:

    http://i146.photobucket.com/albums/r...790/header.jpg

    I am currently ignoring the fact that my links do not appear in internet explorer as well (one problem solved at a time and all that). Another thing to not, when I take the gradient out, I can see the links. It was also because I wasn't using a gradient on IE for a while, that I did not see the two divs being rendered (they kind of merged into one).

    Anyway, here is the CSS and HTML. Can anyone spot anything? I can't and I have been googling for a good hour now and to no avail!

    HTML
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="ie.css">
    <link rel="stylesheet" href="layout.css">
    <link rel="stylesheet" href="nav.css">
    <meta charset="utf-8">
    <meta name="keywords" content="Wells","Somerset","Weddings","Wedding Planning,Wells, Somerset,Parties,Events,Events Management, Weddings in Somerset, Catering, Catering in Somerset."/>
    <title>Gert Lush Events - Weddings, Catering, Parties, Functions - Based in Somerset</title>
    
    </head>
    
    <body>
    <div id="container">
      <header><a href="index.html"> <img src="banner.png" alt="Gert Lush Events" width="100%" height="100%"></header>
    	<div id="nav"> 
              <a id="lnk" href="index.html">Home</a>
              <a href="services.html">Services</a>
              <a href="food.html">Menus</a>
              <a href="gallery.html">Gallery</a>
              <a href="reviews.html">Testimonials</a>
              <a href="contact.html">Contact</a> 
        </div>
    
    	<div id="main">
    	  <div id="left">
           <!-- content -->
          </div>
    	
          <div id="right">
           content
          </div>
        </div>	
    </div>
    
    <div id="footer">
      <p id="foot"><a id="footlink" href ="index.html">Index</a> | <a id="footlink" href="contact.html">Contact Us</a><br>
      Copyright © Gert Lush Events 2012. All rights reserved.<br></p>
    </div>
    
    <div class="left"><!--Side columns --></div>
    <div class="right"><!--Side columns --></div>
    
    </body>
    </html>
    CSS
    Code:
    header {
        width:100%;
    	height:100%;
    	background:#FFDC97;
    	color:white;
    	text-align:center;
    }
    
    #nav {
    	font-size:125%;
        word-spacing: 40px;
        font-family:verdana;
        background:#3C2414;
    	background-image: linear-gradient(bottom, #3C2414 40%, #A68153 90%);
    	background-image: -o-linear-gradient(bottom, #3C2414 40%, #A68153 90%);
    	background-image: -moz-linear-gradient(bottom, #3C2414 40%, #A68153 90%);
    	background-image: -webkit-linear-gradient(bottom, #3C2414 40%, #A68153 90%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3C2414', endColorstr='#A68153');
    	text-align:center;
        padding-top:1%;
        padding-bottom:1%;
    }
    Thanks

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    part of it may be that you do not declare a valid html doctype try adding one in and see if that makes it look like it should

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The following code is defined backwards so that the standard version will be overridden by proprietary versions.

    Code:
    background-image: linear-gradient(bottom, #3C2414 40%, #A68153 90%);
    	background-image: -o-linear-gradient(bottom, #3C2414 40%, #A68153 90%);
    	background-image: -moz-linear-gradient(bottom, #3C2414 40%, #A68153 90%);
    	background-image: -webkit-linear-gradient(bottom, #3C2414 40%, #A68153 90%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3C2414', endColorstr='#A68153');
    put the filter line first and the linear-gradient without proprietary prefix last.

    Browser proprietary lines should always come before the standard one.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the replies guys.

    I tried doing what you said felgall but this has made no difference.

    @D34th Maker I have declared a valid doctype (<!DOCTYPE HTML>) which is standard for HTML5.

    I really cannot see why this is being rendered twice?! All other browsers are fine with this and render it once. Any other thoughts?

    Thanks for the suggestions so far

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    In which version of IE are you seeing the problem? If it's not IE9 then the problem may be related to your html5 elements, as you don't seem to be including any javascript that would remedy the lack of support for these elements in earlier versions.

    You have three css sheets included in your code - one called ie.css - wondering if this should be IE specific? We need to know what's in all of these otherwise it's guesswork. Can you give a link to your page?
    Last edited by SB65; 02-04-2012 at 10:53 PM.

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi SB65

    I am using IE 8 for this at the moment. The current HTML elements are all DIVs so I do not understand why IE8 cannot use this. Especially when Firefox 1.5 seems to render the page with little problems (except the gradients).

    Sorry, the site is not live and ie.css is now defunct with nothing in it. I put all the relevant code in my first post. nav.css simply takes care of some of the fonts for the links.

    Any other thoughts? Thanks

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    First law of web building - never trust IE to do anything.... You are using <header>.

    What's in layout.css then?
    Last edited by SB65; 02-04-2012 at 10:54 PM.

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Never mind. Always validate your code using the W3c validator or similar. The problem is the unclosed anchor here:

    Code:
      <header><a href="index.html"> <img src="banner.png" alt="Gert Lush Events" width="100%" height="100%"></header>

  • Users who have thanked SB65 for this post:

    chris2307 (02-05-2012)

  • #9
    New Coder
    Join Date
    Jan 2012
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Many thanks SB65

    Cannot believe I missed the closing </a> tag.

    I know that IE cannot be trusted but thought IE8 would have been a little more forgiving than that!

    Anywho, thanks for the link for validating my code.


  •  

    Posting Permissions

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