No replies
guerrilladigital
Offline
Regular
milwaukee, wi
Last seen: 9 years 50 weeks ago
milwaukee, wi
Timezone: GMT-5
Joined: 2008-01-31
Posts: 39
Points: 4

I'm still working on the same site... it's got a wacky footer, that should always appear at the bottom, over the content, and it's not behaving properly in IE6.

Looks great in Safari and in Firefox, but not on IE. I'd be much obliged if you could take a look.

http://www.guerrilladigital.cc/client_sites/yosoh/index.html

<!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">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>| yosoh.com | computers and clay |</title>
 
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/fonts-min.css" rel="stylesheet" type="text/css" />
 
<!--[if lt IE 7]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
<link href="css/test_layout.css" rel="stylesheet" type="text/css" />
<link href="css/test_color.css" rel="stylesheet" type="text/css" />
<link href="css/test_typography.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
	<link rel="stylesheet" href="../ie.css" type="text/css">
<![endif]-->
<script type="text/javascript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>
 
<!--<body id="home"  class="artwork">-->
<body id="about"  class="advertising">
 
<div id="container">
	<div id="header">
		<h1 class="obscure">Yosoh</h1>
		<div id="branding"><a href="index.html"><img src="images/logo_3.png" alt="yosoh logo" width="114" height="47" /></a>
		</div><!-- end of branding-->
 
 
<ul id="navigation">
    <li>
<select name="who"  onchange="MM_jumpMenu('parent',this,0)">
	<option>who</option>
	<option>---------------</option>
	<option value="about.html">about</option>
	<option value="news.html">news</option>
</select>
    </li>
    <li>
<select name="what"  onchange="MM_jumpMenu('parent',this,0)">
	<option>what</option>
	<option>---------------</option>
	<option value="artwork.html">artwork</option>
	<option>---------------</option>
	<option value="design.html">design</option>
	<option>---------------</option>
	<option value="advertising.html">advertising</option>
</select>
    </li>
    <li>
<select name="where"  onchange="MM_jumpMenu('parent',this,0)">
	<option>where</option>
	<option>---------------</option>
	<option value="contact.html">contact</option>
    <option value="blog.html">blog</option>
    <option value="shop.html">shop</option>
</select>
    </li>
        <li>
<select name="wow"  onchange="MM_jumpMenu('parent',this,0)">
	<option>wow</option>
	<option>---------------</option>
	<option value="links.html">links</option>
	<option value="photos.html">photos</option>
	<option value="download.html">download</option>
</select>
    </li>
  </ul><!-- end of navigation list-->
</div><!-- end of header-->
 
<div id="mainContent" class="clear">
 
<div class="portfolioIntro">
<p>Facilisis feugiat dolor wisi crisare et? Eum et delenit nulla augue accumsan in feugait at hendrerit exerci ut. Laoreet vel, consequatvel sed et dolore ea consequat sed delenit elit nibh enim iriure, delenit crisare et, quis nostrud ea nulla ut facilisi. Accumsan hendrerit dignissim sed dolore facilisis consequat et feugiat wisi ullamcorper iusto volutpat.</p>
<p>Facilisis feugiat dolor wisi crisare et? Eum et delenit nulla augue accumsan in feugait at hendrerit exerci ut.</p>
 
<ul id="clientList">
	<li>Client 1</li>
	<li>Client 2</li>
	<li>Client 3</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
	<li>Client</li>
</ul>
<div class="clear"></div>
<p>On this page is a sampling of my work</p>
<p><a href="#">RESUM&Eacute;</a></p>
</div><!-- end of portfolioIntro -->
 
<img src="images/loudspeaker.jpg" alt="portfolio image" width="399" height="560" />
<img src="images/pulldown.jpg" alt="portfolio image" width="524" height="560" />
<img src="images/smallfavor.jpg" alt="portfolio image" width="497" height="560" />
<img src="images/FPOfourWide.jpg" alt="portfolio image" width="620" height="560" />
 
<div class="copyBlock">
<p><span class="cyanCopy">Facilisis feugiat dolor wisi crisare et? Eum et delenit nulla augue accumsan in feugait at hendrerit exerci ut.</span> Laoreet vel, consequatvel sed et dolore ea consequat sed delenit elit nibh enim iriure, delenit crisare et, quis nostrud ea nulla ut facilisi. Accumsan hendrerit dignissim sed dolore facilisis consequat et feugiat wisi ullamcorper iusto volutpat.</p>
<p>Facilisis feugiat dolor wisi crisare et? Eum et delenit nulla augue accumsan in feugait at hendrerit exerci ut. Laoreet vel, consequatvel sed et dolore ea consequat sed delenit elit nibh enim iriure, delenit crisare et, quis nostrud ea nulla ut facilisi. <span class="highlight">Accumsan hendrerit dignissim sed dolore facilisis consequat et feugiat wisi ullamcorper iusto volutpat.</span></p>
<p>Facilisis feugiat dolor wisi crisare et? Eum et delenit nulla augue accumsan in feugait at hendrerit exerci ut. Laoreet vel, consequatvel sed et dolore ea consequat sed delenit elit nibh enim iriure, delenit crisare et, quis nostrud ea nulla ut facilisi. Accumsan hendrerit dignissim sed dolore facilisis consequat et feugiat wisi ullamcorper iusto volutpat.</p>
</div>
 
<div class="copyBlock">
<p>Facilisis feugiat dolor wisi crisare et? Eum et delenit nulla augue accumsan in feugait at hendrerit exerci ut. Laoreet vel, consequatvel sed et dolore ea consequat sed delenit elit nibh enim iriure, delenit crisare et, quis nostrud ea nulla ut facilisi. Accumsan hendrerit dignissim sed dolore facilisis consequat et feugiat wisi ullamcorper iusto volutpat.</p>
<p>Facilisis feugiat dolor wisi crisare et? Eum et delenit nulla augue accumsan in feugait at hendrerit exerci ut. Laoreet vel, consequatvel sed et dolore ea consequat sed delenit elit nibh enim iriure, delenit crisare et, quis nostrud ea nulla ut facilisi. Accumsan hendrerit dignissim sed dolore facilisis consequat et feugiat wisi ullamcorper iusto volutpat.</p>
<p>Facilisis feugiat dolor wisi crisare et? Eum et delenit nulla augue accumsan in feugait at hendrerit exerci ut. Laoreet vel, consequatvel sed et dolore ea consequat sed delenit elit nibh enim iriure, delenit crisare et, quis nostrud ea nulla ut facilisi. Accumsan hendrerit dignissim sed dolore facilisis consequat et feugiat wisi ullamcorper iusto volutpat.</p>
</div>
 
</div><!-- end of maincontent-->
 
</div><!--end of content-->
 
<div id="footerWrapper">
<div id="footer">
  <div id="joinMailingList">
    <h1 class="joinList"><a href="#">join another<br />
     <span class="indent">mailing list</span></a></h1>
    <a href="#"><img src="images/mailinglist.png" alt="mailing list" /></a> </div>
  <!--end of joinMailingList-->
  <h1>header</h1>
  <ul id="footerMenu">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
  </ul><!-- end of footerMenu-->
  <p>©2008 yosoh. All rights reserved.</p>
</div>
<!-- end of footer -->
</div>
</body>
</html>

http://www.guerrilladigital.cc/client_sites/css/test_layout.css

@charset "UTF-8";
/* CSS Document */
 
/*standard document elements*/
body {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 0px;
}
.obscure {
	position: absolute;
	left: -9999px;
	float: left;
}
.clear {
	clear: both;
}
/*the following styles control the containers by percentage <---- original frames version*/
html, body {
	height: 100%;
}
/*#container {
	min-height: 86%;
}*/
#container {
	height: 100%;
	padding-bottom: 100px;
}
/*#footer {
	height: 14%;
	position: relative;
	top: 88%;
}*/
#footer {
	height:100px;
	position:fixed;
	bottom:0;
	z-index:10; /* Prevent certain problems with form controls */
}
#footerWrapper {
	position:fixed;
	height: 100%;
}
/* navigation */
#header {
	width: 960px;
	position: fixed;
	left: 0px;
	top: 0px;
	margin-top: 4px;
}
#branding {
	float: left;
	display: block;
	width: 320px;
	text-align: center;
}
#navigation li {
	float: left;
	text-align: left;
	display: block;
	width: 150px;
	height: 47px;
	padding-top: 14px;
}
#mainContent {
	position: absolute;
	top: 55px;
	left: 0px;
	visibility: visible;
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 24px;
	padding-bottom: 24px;
}
 
/*BASED OFF OF BODY ID this should match the width of all images, the number of images times 12px, plus 48px (for left and right margins)*/
#home #mainContent {width: 3348px;}
#about #mainContent {width: 3348px;}
#advertising #mainContent {width: 3348px;}
#artwork #mainContent {width: 3348px;}
#blog #mainContent {width: 3348px;}
#contact #mainContent {width: 3348px;}
#design #mainContent {width: 3348px;}
#download #mainContent {width: 3348px;}
#links #mainContent {width: 3348px;}
#news #mainContent {width: 3348px;}
#photos #mainContent {width: 3348px;}
#shop #mainContent {width: 3348px;}
/*BASED OFF OF BODY ID this should match the width of #content plus 48px*/
#home #container, #home #footer {width: 3396px;}
#about #container, #about #footer {width: 3396px;}
#advertising #container, #advertising #footer {width: 3396px;}
#artwork #container, #artwork #footer {width: 3396px;}
#blog #container, #blog #footer {width: 3396px;}
#contact #container, #contact #footer {width: 3396px;}
#design #container, #design #footer {width: 3396px;}
#download #container, #download #footer {width: 3396px;}
#links #container, #links #footer {width: 3396px;}
#news #container, #news #footer {width: 3396px;}
#photo #container, #photo #footer {width: 3396px;}
#shop #container, #shop #footer {width: 3396px;}
 
#mainContent img {
float: left;
margin-right: 24px;
}
 
/*footer styles*/
#footerMenu {
margin-left: 24px;
width: 936px;
}
 
#footerMenu li {
	float: left;
	margin-right: 8px;
	margin-bottom: 8px;
}
#footerMenu a {
	padding-right: .4em;
	padding-left: .4em;
}
#footer h1 {
	margin-bottom: 2px;
	margin-left: 24px;
	padding-top: 12px;
}
#joinMailingList {
display: none;
}
#home #joinMailingList {
	display: inline!important;
}
#home #footer h1,
#home #footer #footerMenu {
display: none;
}
#home .joinList {
display: block!important;
}
 
 
 
/*---*/
.copyBlock,
.portfolioIntro {
	float: left;
	height: 394px;
	width: 380px;
	overflow: auto;
	margin-top: 48px;
	margin-bottom: 48px;
	margin-right:24px;
}
.copyBlock p {
	margin-bottom: 12px;
}
 
#clientList li {
	float: left;
	width: 190px;
	display: block;
}
#clientList {
	padding-top: 16px;
}
 
 
#joinMailingList {
display: none;
}
#home #joinMailingList {
	display: inline!important;
}
#joinMailingList .indent {
	margin-left: 30px;
}
/*#joinMailingList {
	height: 180px;
	width: 380px;
	position: relative;
	bottom: 60px;
}*/
#joinMailingList img {
	position:relative;
	left: 136px;
	bottom: 146px;
	float: left;
}
#joinMailingList a {
	padding-left: 8px;
}
/*#home #footer p {
padding-top: 0px!important;
margin-left: 0px!important;
}*/
#home #footer p {
	padding-top: 0px!important;
	margin-left: 0px!important;
	float: left;
	position: relative;
	right: 240px;
	top: -10px;
	clear:none!important;
}
#footer p{
	margin-left: 24px;
	clear:both;
}