Forums

lookout

Hi all,
Newbie here frustrated w/ IE. My navigation images aren't showing up in ie and are consequently pushing the logo in the top left out of the screen. Here's the page: http://www.oregonsurfers.com/index-test.html. This is what it should look like:

http://www.oregonsurfers.com/troubleshoot/menu.png

Also, my png badge isn't appearing. This is what it should look like:

http://www.oregonsurfers.com/troubleshoot/badge.png

Here's the relative html code:

<body>

<div id=\"page-wrap\">
	<h1 id=\"logo\">7th Annual CS Open - June 27th & 28th, 2009</h1>
	<div id=\"badge\">
<img src=\"images/badge.png\" alt=\"Update\" width=\"\" height=\"\"/></div>

	<div id=\"main-content\"
	
		<ul id=\"nav\">
			<li class=\"contact\"><a href=\"contact.html\">Contest</a></li>
			<li class=\"entry-form\"><a href=\"images/entry-form.pdf\">Entry Form</a></li>
		</ul>
		
		<div class=\"clear\">
		</div>

		<a href=\"images/entry-form.pdf\"><img src=\"images/poster.jpg\" alt=\"7th Annual CS Open\" width=\"960\" 					height=\"621\" border=\"0\"></a>
		
		<img src=\"images/spacer-full.png\" alt=\"spacer-full\" width=\"959\" height=\"15\" class=\"spacer\"/>

		<h4>
		Surfers are guaranteed a minimum of two heats. Location to be announced on June 26th depending on conditions. Sign up below for contest updates. All contest proceeds are going to local skater, surfer and friend, Keith Lewis. Keith has been in the hospital since May 29th after a bad skateboarding accident. He's undergone multiple brain surgeries.  <a href=\"images/entry-form.pdf\">Click here</a> to download an entry form.
		</h4>

	
		<img src=\"images/spacer-full.png\" alt=\"spacer-full\" width=\"959\" height=\"15\" class=\"spacer\"/>

		<img src=\"images/search.jpg\" href=\"#\" alt=\"Search\" width=\"225\" height=\"105\" class=\"img1\">
		<img src=\"images/glass.jpg\" href=\"#\" alt=\"Glass\" width=\"225\" height=\"105\" class=\"img1\">
		<img src=\"images/pit.jpg\" href=\"#\" alt=\"Pit\" width=\"225\" height=\"105\" class=\"img1\">
		<img src=\"images/mini-barrel.jpg\" href=\"#\" alt=\"Barrel\" width=\"225\" height=\"105\" class=\"img2\">
		
		<div class=\"clear\">
		</div>
	
	</div>
	
	 <div class=\"form-bg\">
	 	<p align=\"left\">Want to hear about the latest contest updates? Sign up here...</p>
	               
  <!-- Form -->
        
	   <form action=\"http://email.lookoutcreative.com/t/y/s/iuuuli/\" method=\"post\" class=\"form\">
	     	     	<div class=\"label\"><label for=\"iuuuli-iuuuli\"></label>
		 		<input name=\"cm-iuuuli-iuuuli\" type=\"text\" id=\"iuuuli-iuuuli\" value=\"email address\" size=\"28\" />
		 	</div>   
             <div class=\"button\">
                <input name=\"notify\" type=\"image\" id=\"notify\" src=\"images/submit-btn.jpg\" />
             </div>
	   </form>
 	 </div>
</div>

And here's the css:

/* RESETS & BASIC PAGE SETUP */
* { margin: 0; padding: 0; }
ul { list-style: none inside;}
}

body {
	text-align: center;
}

.clear {
	clear: both;
}

img, div, #badge { behavior: url(iepngfix.htc) }

#page-wrap {
	margin: 0 auto;
	width: 960px;
	text-align: left;
	position: relative;
}

#main-content {
	margin-top: 50px;
}

h1#logo {
		width: 400px;
		height: 155px;
		background: url(images/csf-logo.png) no-repeat;
		text-indent: -9999px;
		float: left;
		position: absolute; top: -45px; left: -55px;
		}

ul#nav {
	position: relative;
	}
	

ul#nav li {
	display: inline;
	}
	ul#nav li a {
		display: block;
		height: 50px;
		text-indent: -9999px;
		float: right;
		}
	ul#nav li.entry-form a {
		width: 165px;
		background: url(images/entryform-btn.jpg) bottom center no-repeat;
		}
	ul#nav li.contact a {
		width: 173px;
		background: url(images/contact-btn.jpg) bottom center no-repeat;
		}
	ul#nav li a:hover {
		background-position: top center;
		}
	ul#nav li a:active {
		background-position: top center;
		}	


#main-content h4 {
font-family: Helvetica, Arial;
font-size: 24px;
color: #663300;
font-weight: normal;
}
	#main-content h4 a {
		color: #663300;
		}

.spacer {
	margin: 20px 0;
}

#badge {
	position: absolute;
	top: 62%;
	left: -5%;
}

.img1 {
	padding-right: 20px;
	float: left;
	padding-bottom: 35px;

}

.img2 {
	float: right;
	padding-bottom: 35px;
}

.form {
	float: right;
}

.form-bg {
	background-image: url(images/subscribe-bg.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	z-index: 0;
	width: 330px;
	height: 114px;
	float: right;
}

.form-bg p {
	font-family: Helvetica;
	font-size: 14px;
	color: #fff;
	padding: 20px 13px 14px 13px;
}

.label {
	z-index: 1;
	float: left;
	width: 200px;
	height: 32px;
	padding-top: 15px;
	padding-bottom: 14px;
	padding-right: 22px;
}

.button {
	float: right;
	z-index: 9000;
	padding-right: 14px;
}

I really appreciate any help. Thanks,

Jason

raymondselda

Hi Jason,

Hope I'm not too late. The following are the changes I've made:

- removed main-content's top margin
- adjusted h1 logo position
- removed img, div, #badge { behavior: url(iepngfix.htc) }
- removed a lost closing curly brace
- removed image tag in badge and applied it as background image
- changed badge's percentage position to pixels

Here's a live demo:
http://raymondselda.com/oregonsurfers/index-test.html

This looks good in Firefox 3 and IE7. Good luck.

Hope Keith Lewis gets well soon.

lookout

Thanks for all the help Raymond! So, I've implemented your changes, but my navigation menu is still not showing up in IE 8. I must be missing something. Any ideas? It's still up at http://www.oregonsurfers.com/index-test.html.

Keith is out of the hospital and recovering faster than anyone believed possible. Again, I really appreciate your help. Thanks,

Jason

raymondselda

I think you're missing something. The menu is also looking good in IE8. I've posted the complete revised code from my demo. Try also checking if the image paths of your menu in your CSS rules. They might be pointing to somewhere else. I am working on a different directory structure. Try to make some adjustments and make sure everything is pointing at the right path. Good luck.

/* RESETS & BASIC PAGE SETUP */
* { margin: 0; padding: 0; }

ul { list-style: none inside;}

body {
	text-align: center;
}

.clear {
	clear: both;
}

#page-wrap {
	margin: 0 auto;
	width: 960px;
	text-align: left;
	position: relative;
}

h1#logo {
		width:213px;
		height: 83px;
		background: url(images/csf-logo.png) no-repeat;
		text-indent: -9999px;
		
		}

ul#nav {
	position: relative;
	}
	

ul#nav li {
	display: inline;
	}
	ul#nav li a {
		display: block;
		height: 50px;
		text-indent: -9999px;
		float: right;
		}
	ul#nav li.entry-form a {
		width: 165px;
		background: url(images/entryform-btn.jpg) bottom center no-repeat;
		}
	ul#nav li.contact a {
		width: 173px;
		background: url(images/contact-btn.jpg) bottom center no-repeat;
		}
	ul#nav li a:hover {
		background-position: top center;
		}
	ul#nav li a:active {
		background-position: top center;
		}	


#main-content h4 {
font-family: Helvetica, Arial;
font-size: 24px;
color: #663300;
font-weight: normal;
}
	#main-content h4 a {
		color: #663300;
		}

.spacer {
	margin: 20px 0;
}

#badge {
	position: absolute;
	top:725px;
	left:-30px;
	width:76px;
	height:79px;
	background:transparent url(badge.png) no-repeat;
}

.img1 {
	padding-right: 20px;
	float: left;
	padding-bottom: 35px;

}

.img2 {
	float: right;
	padding-bottom: 35px;
}

.form {
	float: right;
}

.form-bg {
	background-image: url(images/subscribe-bg.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	z-index: 0;
	width: 330px;
	height: 114px;
	float: right;
}

.form-bg p {
	font-family: Helvetica;
	font-size: 14px;
	color: #fff;
	padding: 20px 13px 14px 13px;
}

.label {
	z-index: 1;
	float: left;
	width: 200px;
	height: 32px;
	padding-top: 15px;
	padding-bottom: 14px;
	padding-right: 22px;
}

.button {
	float: right;
	z-index: 9000;
	padding-right: 14px;
}

I'm glad that Keith is doing great.

lookout

Thanks Raymond...all set now. I was missing a ">" on one of my div's in the markup.

treehouse : what would you like to learn today?

Forums

IE help with menu and png badge