...

View Full Version : Header is rendered twice in IE



chris2307
02-03-2012, 04:30 PM
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/r260/chris230790/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


<!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


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

D34th Maker
02-03-2012, 11:20 PM
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

felgall
02-03-2012, 11:58 PM
The following code is defined backwards so that the standard version will be overridden by proprietary versions.


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.

chris2307
02-04-2012, 11:17 PM
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

SB65
02-04-2012, 11:24 PM
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?

chris2307
02-04-2012, 11:42 PM
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

SB65
02-04-2012, 11:45 PM
First law of web building - never trust IE to do anything.... You are using <header>.

What's in layout.css then?

SB65
02-04-2012, 11:51 PM
Never mind. Always validate your code using the W3c validator (http://validator.w3.org/) or similar. The problem is the unclosed anchor here:


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

chris2307
02-05-2012, 10:23 AM
Many thanks SB65

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

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum