Footer Displaced In Opera And Ie - Footer gets deattached from body

BooZker

Jan 22 2007, 09:39 PM

SM this is a totally new site and i wrote and made all the graphics from scratch this time haha. This is a site for my girlfriend. She wanted a site to put pictures and scrap book stuff. I was almost done except that in Opera and IE the footer comes off the body.

If you have Opera or IE go to http://boozkerstweaks.trap17.com/samantha/

Firefox and Safari works fine.

jlhaslip

Jan 23 2007, 02:40 AM

I'm getting a 404 page not found error on that link

BooZker

Jan 23 2007, 04:07 AM

OK sorry about that. It was a directory so i forgot to end it with a "/" Link is updated.

delivi

Jan 24 2007, 12:17 AM

I found no problems,

I'm using IE 7 , Opera 9.02

Saint_Michael

Jan 24 2007, 04:06 AM

I See it and it is broken, I suggest messing with the widths or the padding, I see if I can try and work on it this weekend depending on how school turns out tomorrow.

EDIT: I was right however you might want to do some tweaking with your nav menu since it is the cause of it.

IE CODE

CODE

<html><head><title>:: Welcome to Your Site Boo ::</title>

	
	<style type="text/css">
	/* Body and content sections */

body {
background:url(http://boozkerstweaks.trap17.com/samantha/images/repeat.png);
background-color: #66cc99;
text-align: center;
}

#content_holder {
position:relative; left:0px;
overflow: hidden;
width: 810px;
background-color: #ffffff;
text-align: left;
padding-right: 10px;
margin: auto;
}

#header {
width: 810px;
height: 100px;
padding-bottom:10px;
margin:auto;
background: url(http://boozkerstweaks.trap17.com/samantha/images/header.png);
background-repeat: no-repeat;
background-color: #ffffff;
display: block;
}

#right {
padding-top:10px;
padding-right: 18px;
padding-left: 18px;
border: 2px dashed #66ff99;
width: 260px;
background-color: #33cc99;
height: auto;
float: right;
text-align: left;
}

#main {
padding-right: 20px;
padding-left: 20px;
width: 480px;
background-color: #ffffff;
height: auto;
text-align: left;
float:left;
}

 #footer
{
margin:auto;
width: 810px;
height: 22px;
background: url(http://boozkerstweaks.trap17.com/samantha/images/footer.png);
background-color: #cccccc;
}

/* =============================================================================== */

/* P Tags */

#main_text {
font-size: 10px;
font-family: Tahoma, Verdana, Arial, serif;
word-wrap:break-word;
}

#main_headers {
font-size: 12px;
font-weight: bold;
color: 66cc99;
font-family: Tahoma, Verdana, Arial, serif;
}

#iloveyou_text {
font-weight: bold;
color: #ff0000;
font-size:10px;
font-family: Tahoma, Verdana, Arial, serif;
}

#nav {
color: #66ff99;
font-weight: bold;
font-size: 12px;
font-family: Tahoma, Verdana, Arial, serif;
}

#nav_nested_titles {
color: #66ff99;
font-size: 10px;
font-family: Tahoma, Verdana, Arial, serif;
}

/* =============================================================================== */

/* Links & FF img borders */

a {
font-size: 10px;
color: #66ff99;
text-decoration: none;
font-family: Tahoma, Verdana, Arial, serif;
}


a:hover {
font-size: 10px;
text-decoration: none;
color: #ff0000;
font-family: Tahoma, Verdana, Arial, serif;
}


a img {
border: none;
}

/* =============================================================================== */

/* Photo Album Styles */

.slideshow{ /*CSS for DIV containing each image*/
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	}

	.slideshow img{ /*CSS for each image tag*/
	border: 0;
	width: 75px;
	height: 50px;
	}

	#navlinks{ /*CSS for DIV containing the navigational links*/
	width: 300px;
	}

	#navlinks a{ /*CSS for each navigational link*/
	margin-right: 8px;
	margin-bottom: 3px;
	}

	#navlinks a.current{ /*CSS for currently selected navigational link*/
	background-color: #66cc99;
	}


	
	
	
	</style></head><body>
	<!-- Header Include -->
	<a href="http://boozkerstweaks.trap17.com/samantha"><div id="header"></div></a>	<!-- End of Header Include -->
	<div id="content_holder">
	<br>
	<br>
			<div id="main">
			    <p id="main_headers">Hi Boo!</p>
			    <p id="main_text">This
is your new site. Do you like it? Did you know just for you to look at
this page takes 5 pages? I wrote it all for you Boo! I am going to add
a photo album, quiz, the first site i made you, and a notes section. I
hope you like it since it took me a lot of time to write it and make it
look all "pretty".</p>
				<p id="iloveyou_text">♥ I Love You Boo! ♥ </p>
				<br>
				<br>
			</div>
			<!-- Right Include -->
			<div id="right">
	<p id="nav">Navigation</p>
	<ul>
		<li><a href="http://boozkerstweaks.trap17.com/samantha/">Home</a></li>
		<li id="nav_nested_titles">Scrap Book</li>
		  <ul>		
			<li><a href="http://boozkerstweaks.trap17.com/samantha/first_site/index.html" target="blank">01/17/07</a></li>
	      </ul>
	    <li><a href="http://boozkerstweaks.trap17.com/samantha/photoalbum.php">Photo Album</a></li>
	</ul>
</div>			<!-- End of Right Include -->
	</div>
<!-- Right Include -->
<div id="footer"></div><!-- End of Right Include -->
</body></html>

BooZker

Jan 25 2007, 06:22 AM

Hmmm... alright. Maybe a horizontal one... Yeah i'll make a CSS horizontal menu. Thanks SM. Your pretty much the CSS master on Trap 17. You should get an award.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE