Mysterious floating DIV/Missing Nav IE

[toddvalentine]

If anyone has a free sec, could you check out my sight:

http://vtypemedia.com

Everything is functioning fine in Firefox and Safari, but there is a crazy floating dark gray div with an orange top border in my bottom navigation that I cannot figure out in IE. My left-floated bottom site nav is also missing. My footer nav seems to be functioning fine in all the interior pages, so it seems like it might be a problem with the top (blog and twitter sections) portion of my footer.

HTML:

Code:

Blog

query(‘showposts=1’);
while($recentBlog->have_posts()) : $recentBlog->the_post();?>

“>Read More…

Twitter

Follow On Twitter

CSS:

Code:

#footer-top {
background-color: #b8b7b7;
border-top: 1px solid #f74608;
height: 158px;

}

#blog-footer {
width: 359px;
height: 118px;
background-color: #e7e7e7;
margin: 20px 0px 20px 60px;
float: left;
position: relative;
}

#twitter {
width: 358px;
height: 118px;
background-color: #e7e7e7;
margin: 20px 60px 0px 0px;
float: right;
position: relative;
}

h2#blog-footer-header {
width: 359px;
height: 22px;
text-indent: -9999px;
background: url(/images/blog.png) top left no-repeat;
margin: -1px 0px 0px 0px;
}

h2#twitter-header {
width: 359px;
height: 22px;
text-indent: -9999px;
background: url(/images/twitter.png) top left no-repeat;
margin: -1px 0px 0px 0px;
}

#blog-footer .inside h2 {
font-size: 110%;
margin-bottom: 3px;
}

.inside {
font-size: 12px;
padding: 3px;
}

span.link {
position: absolute;
top: 100px;
left: 3px;
font-size: 90%;
font-weight: bold;
}

#read-more {
height:18px;
width: 92px;
display: block;
text-indent: -9999px;
background: url(/images/readMore.png) top center no-repeat;
}

#twitter-follow {
height:18px;
width: 115px;
display: block;
text-indent: -9999px;
background: url(/images/twitterFollow.png) top center no-repeat;
}

#footer-bottom {
background-color: #b8b7b7;
border-top: 1px solid #f74608;
}

ul#nav.footer-nav {
float: left;
position: relative;
margin: 20px 0px 10px 34px;;
}

#extra-nav {
float: right;
margin: 20px 34px 10px 0px;
}

ul#extra-nav li {
display: inline;
text-transform: lowercase;
font-size: 80%;
font-weight: bold;
}

ul#extra-nav li a {
color: black;
padding: 4px;
}

ul#extra-nav span {
font-weight: bold;
color: #f74608;
font-size: 80%;
}

I’ve tried repositioning my float clearing and that hasn’t helped.

Thank you so much for any help!!!!

[apostrophe]

As always, validating your markup is a good place to start troubleshooting http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fvtypemedia.com%2F

Not sure it will make a difference in ie but I would have floated #twitter left up against #blog-footer and given that a right margin:

Code:

#blog-footer {
width: 359px;
height: 118px;
background-color: #e7e7e7;
margin: 20px 0px 20px 60px;
float: left;
position: relative;
}

#twitter {
width: 358px;
height: 118px;
background-color: #e7e7e7;
margin: 20px 60px 0px 0px;
float: right;
position: relative;
}

[toddvalentine]

It was missing a closing span tag.

Thanks so much for the reminder on how important validation is!

[Author]

Posts