Problem in IE 7 - Webmaster Forum - Web Design, Programming and SEO forums

02-08-2007, 08:27 PM

daz

Status: I love this place
Join date: Jun 2005
Location: UK
Expertise:
Software:

Posts: 562

iTrader: 5 / 100%

daz is on a distinguished road

Problem in IE 7

I'm really not sure why IE 7 is rendering the footer this way. It displays correctly in every browser I've tested(FF, IE 6, Opera, Safari.) I could fix it myself but I don't have IE 7. I used browsershots.org to see it.

http://www.zeroillusion.net/work/free_tomhuveners/

http://www.zeroillusion.net/work/fre...eners/core.css

Anyone see what's wrong with the footer?

Thanks.

02-09-2007, 03:09 PM

jabberwocky

Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:

Posts: 278

iTrader: 0 / 0%

jabberwocky is on a distinguished road

eww, thats odd. i think it may have to do with how your divs are layed out, like the 'container' isn't wrapping the site, centering everything, and the footer is below it. i came up with a work around with conditional statments for ie 7 specificaly

Code:

**added to the footer id**

#footer {
	background: url("images/bottom.gif") repeat-x #2D2D2C;
	height: 200px;
	position:relative;
	top:425px;

}

seems to have worked

02-09-2007, 03:23 PM

daz

Status: I love this place
Join date: Jun 2005
Location: UK
Expertise:
Software:

Posts: 562

iTrader: 5 / 100%

daz is on a distinguished road

I didn't really want to use any css hacks or anything. However, I've updated the page with the code to see if it works. Waiting for results from browsershots.org..

http://browsershots.org/png/full/7f/...405f17dbd1.png

Pushed it down a bit..not exactly fixed.

02-09-2007, 05:06 PM

firsteye

Status: I'm new around here
Join date: Jan 2007
Location:
Expertise:
Software:

Posts: 13

iTrader: 0 / 0%

firsteye is on a distinguished road

Your problem is that you just haven't closed your div's off right. The #top should be closed right after #navigation. Also this works even when you delete the IE 7.0 style sheet so you don't need it. Here is your updated code.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
	<head>
		<meta http-equiv="Content-Type" content="text/html; ch****t=UTF-8" />
		<link rel="stylesheet" type="text/css" href="http://www.zeroillusion.net/work/free_tomhuveners/core.css" />
		<title>The Blog of Tom Huveners</title>
		<!--[if IE 7.0]> <style type="text/css">@import "iestyle.css";</style> <![endif]-->
	</head>
	<body>
		<div id="container">
			<div id="top">
				<!-- Logo -->
				<div id="logo">
					<h1>Tom Huveners</h1>
				</div>
				<!-- End Logo -->
				<div id="navigation">
					<!-- Navigation-->
					<ul id="nav">
						<li><a href="#" class="navigate">Home</a></li>
						<li><a href="#" class="navigate">About</a></li>
						<li><a href="#" class="navigate">Work</a></li>
						<li><a href="#" class="navigate">Contact</a></li>
					</ul>
					<!--End Navigation -->
				</div>
			</div>
			<div class="clear"></div>
			<!-- Left Content-->
			<div id="left">
				<div class="title">
					<div class="date">Feb<br />
						<span class="number">05</span></div>
					<!-- Blog Heading-->
					<h1 class="heading">Welcome To My New Blog!</h1>
					<!-- End Blog Heading-->
				</div>
				<div class="content">
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ipsum lorem,
							imperdiet eu, ornare at, tristique a, tellus. Fusce eleifend egestas enim.
							Integer lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
							per inceptos hymenaeos. Nunc ut ipsum eget ante congue egestas. Cum sociis
							natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce
							et justo. Sed nisi. Ut arcu ante, consectetuer sed, lobortis bibendum, feugiat
							quis, ipsum. Praesent nec lectus.</p>
					<br />
					<p>Fusce convallis, neque quis lacinia pulvinar, erat magna volutpat felis, non
							vestibulum purus leo ut nisl. Cras a diam nec mauris vulputate sollicitudin. In
							faucibus magna ut ipsum. Sed vel sapien sed metus tempor vestibulum. Curabitur
							fringilla, augue sed consectetuer aliquet, est metus euismod magna, at venenatis
							ante quam vel est. Proin imperdiet arcu et lectus. Fusce fermentum tellus
							fermentum diam. Duis sit amet elit at quam pulvinar ornare. Mauris sagittis pretium
						arcu.</p>
				</div>
				<div class="comment">
					<a href="#" class="comment">25 Comments</a>
				</div>
				<br />
				<!--Previous Blog Posts -->
				<div id="previous">Previous Posts</div>
				<div class="posts">
					<h1 class="post"><a href="#" class="previous">Non vestibulum purus leo ut nisl!</a></h1>
					<div class="prev"><a href="#" class="post">100 Comments</a></div>
				</div>
				<div class="posts">
					<h1 class="post"><a href="#" class="previous">Cras a diam nec mauris vulputate sollicitudin!</a></h1>
					<div class="prev"><a href="#" class="post">100 Comments</a></div>
				</div>
				<div class="posts">
					<h1 class="post"><a href="#" class="previous">Duis sit amet elit at quam pulvinar!</a></h1>
					<div class="prev"><a href="#" class="post">100 Comments</a></div>
				</div>
				<!-- End Previous Blog Posts-->
			</div>
			<!-- End Left Content-->
			<div id="right">
				<!--Right Content -->
				<h1 class="right">RSS Feed</h1>
				<div class="subscribe"><img src="http://www.zeroillusion.net/work/free_tomhuveners/images/rss.gif" width="19" height="19" alt="" style="float: left;" />&nbsp;&nbsp; <a href="#" class="main">Subscribe</a></div>
				<div class="box"> <strong>10</strong> Blog Readers.</div>
				<br />
				<h1 class="right">Links</h1>
				<div class="box">
					<a href="#" target="_blank" class="main">Bryan Le</a></div>
				<div class="box">
					<a href="#" target="_blank" class="main">Tyler Cruz</a></div>
				<div class="box">
					<a href="#" target="_blank" class="main">John Chow</a></div>
				<div class="box">
					<a href="#" target="_blank" class="main">Bryan Le</a></div>
				<div class="box">
					<a href="#" target="_blank" class="main">Tyler Cruz</a></div>
				<br />
				<h1 class="right">Advertising</h1>
				<div class="box">Advertise here?</div>
			</div>
			<!--End Right Content -->
			<div class="clear"></div>
			<br />
			<br />
		</div>
		<div id="footer">
			<!-- Copyright-->
			<div id="copyright"><br />
				Copyright TomHuveners.net - All rights Reserved 2007
			<!-- End Copyright-->
			</div>
		</div>
	</body>
</html>

02-09-2007, 05:14 PM

daz

Status: I love this place
Join date: Jun 2005
Location: UK
Expertise:
Software:

Posts: 562

iTrader: 5 / 100%

daz is on a distinguished road

Ha, I knew it would be something stupid.

http://www.zeroillusion.net/work/free_tomhuveners/

Updated code. Can anyone confirm this works in IE 7?

02-09-2007, 05:32 PM

firsteye

Status: I'm new around here
Join date: Jan 2007
Location:
Expertise:
Software:

Posts: 13

iTrader: 0 / 0%

firsteye is on a distinguished road

Yeah, I already tested it, it works in ie7

02-09-2007, 05:38 PM

daz

Status: I love this place
Join date: Jun 2005
Location: UK
Expertise:
Software:

Posts: 562

iTrader: 5 / 100%

daz is on a distinguished road

Great, thanks a lot.

02-10-2007, 04:41 AM

davidtayfun

Status: I'm new around here
Join date: Feb 2007
Location:
Expertise:
Software:

Posts: 1

iTrader: 0 / 0%

davidtayfun is on a distinguished road

IE7 problem

Hi,

My screen resulation is 1920 x 1600. I check your link on my computer bottom area still has a problem.

I think you can Add this code on your css file.

Code:

html, body  {
height:100%;
}