Forums

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:

<div id=\"footer-top\">

	<div id=\"blog-footer\">
	
		<h2 id=\"blog-footer-header\">Blog</h2>
			
			<?php if(have_posts()) :?>
			
			<?php
			$recentBlog = new WP_Query();
			$recentBlog->query('showposts=1');
			while($recentBlog->have_posts()) : $recentBlog->the_post();?>
			
			<div class=\"inside\">
				<h2><?php the_title(); ?></h2>
				
				<p><?php the_content_rss('Read More &hellip:', false, ' ', 22);?></p>
				
			</div>
				
				<span class=\"link\"><a id=\"read-more\" style=\"color: #f74608\" href=\"/blog/\" title=\"<?php the_title(); ?>\">Read More...</a></span>
			
			
			<?php endwhile; ?>
			
			<?php endif; ?>
		
	</div><!--End blog-footer-->
	
	<div id=\"twitter\">
	
		<h2 id=\"twitter-header\">Twitter</h2>
		
		<div class=\"inside\">
		
		</div>
		
		<span class=\"link\"><a id=\"twitter-follow\" style=\"color: #f74608\" href=\"http://twitter.com/toddvalentine\">Follow On Twitter</a></p>
	
	</div><!--End twitter-->

</div><!-- End footer-top -->

<div class=\"clear\"></div>

CSS:


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

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

treehouse : what would you like to learn today?

Forums

Mysterious floating DIV/Missing Nav IE