IE help with menu and png badge

[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:

[img]http://www.oregonsurfers.com/troubleshoot/menu.png[/img]

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

[img]http://www.oregonsurfers.com/troubleshoot/badge.png[/img]

Here’s the relative html code:

Code:

7th Annual CS Open – June 27th & 28th, 2009

[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.

Code:

/* 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.

[Author]

Posts