Thread: Has Anybody Ever Had The Nav Bar Disappear in IE7 While Coding In HTML5?

**dreadingjs** · 3 Jul 2012 @ 15.03

I have been coding a website in HTML 5. For some reason, the navigation disappears in IE7. I've included the code as well. I'm trying to make it responsive too, but am taking a little extra time since it seems to be on the daunting side.

Thanks,

Dreading JS

HTML Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>About Charhouse Grill</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="keywords" content="About Charhouse Grill in Morton Grove, Charhouse Grill, Charhouse Grill biography, John Stavropoulous, Charhouse Grill history">
<meta name="description" content="Charhouse Grill has been a big part of Morton Grove over the years. ">
<link rel="shortcut icon" href="favicon.ico" />


<title>Charhouse Grill Home</title>
<meta name="description" content="Charhouse Grill serves a variety of quick eats to residents of Morton Grove. We are located on Oakton Ave by Austin.">
<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
* {
	margin: 0;
	border: 0;
	padding: 0;
}
content{ 
	width: 90%;
	clear: both;
}
content h3 {
	text-align: center;
	
}
content img {
	-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
     border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
}
.center {
	text-align: center;


}
</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>    
    <header id="site-head"  class="outer"><!-- header area of page-->
<div class="header-cont">
<h1><a href="index.html" title="Charhouse Homepage">Charhouse Grill</a></h1>
</div>


<nav class="menu">


<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="catering.html">Catering</a> </li>
<li><a href="espresso.html"> Espresso Bar</a></li>
<li><a href="contact.html">Contact Us</a></li> 
</ul></nav></header>
<div id="wrapper"><section id="social">
<a href="contact.html" title="Contact Charhouse Grill"><img src="http://webprocafe.com/images/email.png" width="60" height="42" alt="e-mail us"></a><a href="http://www.facebook.com/pages/Charhouse-Grill/182996038412285"  title="Like us on Facebook"><img src="http://webprocafe.com/images/facebook.png" width="52" height="62" alt="Charhouse Facebook page" ></a><a href="https://twitter.com/#!/CharhouseGrill" title="Follow Us on Twitter"> <img src="http://webprocafe.com/images/twitter.png" height="62" width="52" alt="Charhouse Twitter page" ></a></section>
<h2 style>More Than Just A Grill!</h2>


<content><section class="center"><img src="http://webprocafe.com/images/Charhouse-Sign-s.jpg" width="600" height="449" alt="Charhouse Sign" \>
  <h3>About Page Coming Soon!</h3> 
  </section>
</content>
<footer>
<section><script type = "text/javascript">
var d = new Date();
document.write("<p>  © " + d.getFullYear() + " Charhouse Grill. All Rights Reserved.</p>");
 </script></section>
</footer>
</div>


</body>
</html>

Code:

@charset "UTF-8";
/* CSS Reset */
/*  Reset for some default browser CSS - General */


body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button {
	margin: 0; padding: 0; border: 0; list-style: none;
}
/* Tell old browsers how to handle HTML5 elements */
header, footer, aside, nav, article {display: block;}
input, select {
    vertical-align: middle;
}


body {
	background: #300 url(../images/background.jpg) repeat-y top center;
	color: #404040;
	font: normal 100% "Gill Sans", "Gill Sans MT", Tahoma, Geneva, sans-serif;
	line-height: 1.4em;
	}
h1, h2, h3, h4, h5, h6 {
	font-family: "Cooper Black","Palatino Linotype", "Book Antiqua", Palatino, serif;
	padding: 0 .5em ;
}
h1 { 
	font-size: 2em;
}
h2 {
	font-size: 1.75em;
	margin: 0 0 0 2em;
	line-height: 3em;
	}
h3 { 
	font-size: 1.625em;
	}
h4 {
	font-size: 1.5em;
}
h5 {
	font-size: 1.25em;}
	
p {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: .875em;
	padding: .0625em;
}
a {
	color: #ded3b0;
	text-decoration: none;
	}
a:hover {
	text-decoration: underline;
	color: #9fCE95;
	
}
.special {
	font-size: .75em;
	font-style: italic;
}
/*.container {
	margin: 0 auto;
	width: 960px;
}*/
header #site-head { 
	display: block;
	background-color: #27571d;
	width: 100%;
	height: 170px;	
	padding-left: 10em;
	float:left;
	clear:both;
}
.outer {
	background-color: #27571d;
	width: 100%;
	height: 166px;
	border-bottom: solid 1px #193813;
}
.header-cont {
	width: 960px;
	margin: 0 auto;


	}
.header-cont h1 {
	text-indent: -9999px;
	float: left;
	}
.header-cont h1 a {
	background: url(../images/charhouse-logo.png) no-repeat;
	width: 269px;
	height: 151px;
	display: block;
	}
nav.menu {
	float: right;
	margin: 7em 9.5em 0 0; 
	-webkit-border-radius: 12px 12px 0 0; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
     border-radius: 12px 12px 0 0; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+*/ 
	width: 49%;
	background-color:#193813;
	
	height: 3.375em;
	}


nav.menu ul li {
	display: inline;
	margin: .5em .5em 0 .5em;
	}
nav.menu ul li a {
	color: #ded3b0;
	font-size: .9em;
	padding: 1em .25em 0 .375em;
	line-height: 2em;
	}
nav.menu ul li a:hover {
	color: #9fCE95;


}


#wrapper { 
	width: 960px;
	margin: 0 auto;
	background: #DDD url(../images/grungebg.jpg) repeat-y;
	overflow: auto;
	-webkit-box-shadow: 0px 0px 3px 1px #140614; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
          box-shadow: 0px 0px 3px 1px #140614; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
	-webkit-border-radius: 0 012px 12px ; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
     border-radius: 0 0 12px 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+*/ 
	 height: auto;
}
#social {
	float: right;
	line-height: 2.5em;
	clear: both;
	position: top right;
	text-align: right; 
	
	
}
#social img { 
			padding: .25em;
			/*border: none;*/


}
#social a { text-decoration: none;}


content {
	width: 34.375em;
	clear: both;
	
	
}


	
content h2 {
	padding: .5em 0 0 0;
	text-align: left;
	clear: left;
}
#content-bottom {
	background-color: #FFF;
	width: 95%;
	margin: 0 auto;
	-webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
     border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
	height: 18.875em;
	padding: 1em 0 0 0;
	clear: both;
}
#content-top {
	background-color: #FFF;
	width: 95%;
	margin: 0 auto;
	-webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
     border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
	clear: both;
}
#hours {
	width: 25%;
	padding: 1%;
	float: left;


}
#map {
	width: 30%;
	padding: 1.5% 0 1.5% 1.5%;
	float: left;
	margin: 0 1.5% 0 0;
}


#location {
	width: 35%;
	padding: 1%;
	float: left;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-right-color: #9fCE95;
	border-left-color: #9fCE95;
}
#kids{
	width: 47%;
	padding: 1% 1.5%; 
	float: left;
	}
#breakfast {
	width: 47%;
	padding: 1% 1.5%;
	float: left;
	}
#burger {
	width: 32%;
	padding: .125% .25% .5% 1%;
	float: left;
	}
	#mid-menu {
	width: 32%;
	padding: .125% .25% .5% 1%;
	float: left;
	}
#right-menu {
	width: 32%;
	padding: .125% .25% .5% 1%;
	float: right;
}
.info {
	padding: 0 0 0 1.25em;
}
.price {
	float: right;
	margin: 0 .75em 0 0;
	text-align: right;
	width: 30%;
}
.side {
	font-size: .875em;
}
.push { padding-bottom: 3em;}


footer { 
	color: #ded3b0;
	float: left;
	height: 5em;
	width: 100%;
	background-color: #193813;


}
footer section { 
	float: left;
	margin-left: .5em;
}
footer p {
	color: #ded3b0;
	padding: 0 1em 0 0;
	float: right;
	font-size: .75em;	


}
@media print { 
	body {
font-size: 15pt;


	}
}
@media screen and (min-
width: 1024px) { 
	body {
		font: 100% "Gill Sans", "Gill Sans MT", Tahoma, Geneva, sans-serif;
		background-color: #300;
		}
}
@media screen and (max-width: 768px) {
	body {
		font: 1.5em "Gill Sans", "Gill Sans MT", Tahoma, Geneva, sans-serif;
		background-color: #300;
		}
	#wrapper { 
	 position: relative; 
	 margin: 20px; 
	 width: auto;
	 }
	 header #site-head { 
	display: block;
	background-color: #27571d;
	width: 100%;
	height: 170px;	
	padding-left: 10em;
	float:left;
	clear:both;
}
.outer {
	background-color: #27571d;
	width: 100%;
	height: 166px;
	border-bottom: solid 1px #193813;
}
	/* .header-cont {
	width: 700px;
	margin: 0 auto;
	 }*/
	 
}

**Frinkky** · 3 Jul 2012 @ 16.16

Can you link to a working page? Easier for people to respond being able to analyse a live page.

**dreadingjs** · 3 Jul 2012 @ 19.48

Sure. Here's the website link...

About Charhouse Grill

Thanks So Much,

Dreadingjs

**Frinkky** · 3 Jul 2012 @ 20.52

First glance, the nav hasn't disappeared - it's just not where you think it should be.

You're trying to position the nav with margins, which is not a particularly good thing to do due to inconsistencies with how margins/padding etc are calculated between browsers (especially older ones).

I'd re-jig the markup, something like this fiddle.

Basically, I added a wrapper for the header element to give the 100% width background, centred the header element with 960px width and added position:relative and finally added position:absolute to the nav element along with positioning (right and bottom 0px).

Seems to work in IE7 Browser Mode (IE9 Dev tools) and IEtester.

One final thing, in fixed width layouts, I see little reason to use em's to size elements (again, you could be creating headaches further down the line with less reliable browsers). In a pure elastic layout fine, but here you're using media queries to dictate how the page behaves at set break points.

**dreadingjs** · 3 Jul 2012 @ 21.37

Thanks Jon, so much for the code assist.

It was absolutely driving me crazy. I was attempting to make it responsive and change it over to percentages. This is the very first website that I've tried this way, so I thought it may be more flexible starting with ems. The reason why is that he has a lot of high school students as customers, and I'm trying to make the site more mobile-friendly. I'm used to XHTML too so this project has fallen quite a bit out of my comfort zone.

Cheers,

DreadingJS

**dreadingjs** · 3 Jul 2012 @ 22.17

Ok, I tried putting the changes in and it made the whole nav bar disappear in all browsers. Explorer can be so frustrating. I'm thinking of just putting picture icons below so I don't have to worry about it since it works perfectly in everything but IE7.

**Frinkky** · 4 Jul 2012 @ 00.12

The example I posted on jsfiddle would require work merging with your existing files - I didn't copy the whole necessary markup or css. If you still have issues, let me know and I'll download your files and prepare them in full - just for learning purposes!