PROPER DEMO LINK IN POST BELOW
I’ve decided to forgo the flash\js text replacement and just use PNG. What are the drawbacks you mention of using png over gif for display text?
Anyway, new problem.
I’m trying to add a little flavour to the bottom of the page, and getting an image to sink to the bottom of my content div down to the footer (a sticky image?) I’ve read things on getting img content to the bottom of a div, but nothing seems to explain it in the context of a site using a sticky footer.
imageWrapper and bottomImage are the two new divs that aren’t playing well with the footer. Yet again I think it’s a positioning problem mixed in with margin, or perhaps it isn’t possible at all?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>O Coiffure & Spa :: Montreal's Finest Urban Spa and Salon</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="O Coiffure & Spa, " content="Description" />
<meta name="O Coiffure & Spa, O, Coiffure, Spa, Montreal, Ogilvy, Salon, Downtown" content="Keywords" />
<meta name="author" content="pixelbloq" />
<link href="../css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('../img/nav_r_ocoiffureandspa.jpg','../img/nav_r_services.jpg','../img/nav_r_staff.jpg','../img/nav_r_events.jpg','../img/nav_r_consult.jpg','../img/nav_r_press.jpg','../img/nav_r_contact.jpg')">
<div id="container">
<div id="main" class="clearfix">
<div id="header"><img src="../img/main_header.png" width="915" height="175" alt="O Coiffure & Spa" longdesc="http://ocoiffureandspa.com" /></div>
<div id="navbar"> <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('O Coiffure and Spa','','../img/nav_r_ocoiffureandspa.jpg',1)"><img src="../img/nav_ocoiffureandspa.jpg" alt="O Coiffure and Spa" name="O Coiffure and Spa" width="132" height="41" border="0" id="O Coiffure and Spa" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','../img/nav_r_services.jpg',1)"><img src="../img/nav_services.jpg" alt="Salon and Spa Services" name="services" width="130" height="41" border="0" id="services" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('staff','','../img/nav_r_staff.jpg',1)"><img src="../img/nav_staff.jpg" alt="Our Staff" name="staff" width="130" height="41" border="0" id="staff" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Events','','../img/nav_r_events.jpg',1)"><img src="../img/nav_events.jpg" alt="Events" name="Events" width="130" height="41" border="0" id="Events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Consult','','../img/nav_r_consult.jpg',1)"><img src="../img/nav_consult.jpg" alt="Consult O Coiffuire" name="Consult" width="131" height="41" border="0" id="Consult" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Press','','../img/nav_r_press.jpg',1)"><img src="../img/nav_press.jpg" alt="O Coiffure Press and Media" name="Press" width="130" height="41" border="0" id="Press" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../img/nav_r_contact.jpg',1)"><img src="../img/nav_contact.jpg" alt="Contact O Coiffure & Spa" name="Contact" width="132" height="41" border="0" id="Contact" /></a> </div>
<div id="langBar"> <img src="../img/langBar.jpg" alt="Language Bar" width="915" height="20" border="0" usemap="#language" />
<map name="language" id="language">
<area shape="rect" coords="846,2,913,20" href="languageChange" />
</map>
</div>
<div id="content">
<div id="h1img"></div>
<p>O Coiffure & Spa was created in 1981 to provide a foundation for the advancement of beauty, therapy, and holistic body treatment in the heart of Montreal. Our goal is to provide sanctuary and relaxation, a departure from the frenzy of urbanized life.<br />
<br />
Through this, O Coiffure & Spa interface and facilitate professional service with a complete and nurturing environment. In synthesizing the ideals of beauty, wellness, and relaxation we afford our customers the highest levels of satisfaction. O Coiffure and Spa strives to eliminate the traditional barriers between client and service by emphasizing the importance of establishing respectful and sustainable bonds.<br />
<br />
We at O Coiffure & Spa strictly adhere to wholly transparent and straightforward business practices. As each client is unique, so is our approach to treatment – our professional staff uses products of the highest quality to ensure the development of personalized programs, catering not only to immediate needs, but also promoting health of body and mind in the long-term.<br />
<br />
</p>
<div id="imageWrapper">
<img src="../img/footer_woman2.png" width="915" height="210" id="bottomImage" alt="woman" />
</div>
</div> <!--end content div-->
</div> <!--end main div-->
</div> <!--end container div-->
<div id="footer"><img src="../img/footer.png" alt="footer" width="915" height="100" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="336,24,375,45" href="index.html" alt="O Coiffure & Spa" />
<area shape="rect" coords="393,22,475,44" href="#" alt="Privacy Policy" />
<area shape="rect" coords="496,23,575,43" href="#" alt="Terms of Use" />
<area shape="rect" coords="596,21,663,44" href="#" alt="Contact O Coiffure & Spa" />
<area shape="rect" coords="786,32,885,49" href="http://www.pixelbloq.com" target="_blank" />
</map>
</div>
</body>
</html>
and css:
/* CSS Document */
* {
padding: 0;
margin: 0;
border: 0;
}
#main {
padding-bottom: 100px;
} /* must be same height as the footer */
html, body {
padding:0;
height:100%;
margin:0;
}
body{
background-color: #000;
background-image: url(../img/bg_tile.gif);
}
#container {
min-height:100%;
position:relative;
margin: auto;
width: 915px;
font-size: 62.5%;
background-color: #E7EEE6;
}
* html #container{height:100%}
#header {
height: 175px;
width: 915px;
padding-top: 25px;
text-align: left;
position: relative;
background-image: url(../img/bg_tile.gif);
}
#navbar {
height: 41px;
width: 915px;
position: absolute;
z-index: 2;
}
#langBar {
height: 20px;
width: 915px;
position: absolute;
margin-top: 41px;
}
#content {
margin-right: auto;
margin-left: auto;
text-align: left;
width: 915px;
position: relative;
overflow: auto;
padding-top: 61px;
}
#content p {
padding-right: 215px;
padding-bottom: 50px;
padding-left: 50px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
word-spacing: 0.1em;
text-align: left;
letter-spacing: 0.05em;
line-height: 1.25em;
font-size: 1.1em;
}
#h1img {
background-image: url(../img/headers/philosophy.png);
height: 26px;
width: 273px;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 50px;
}
#imageWrapper {
position: relative;
} /* height is for display purposes only */
#bottomImage {
position: absolute;
bottom: 0;
}
#footer {
position:relative;
height:100px;
width: 915px;
clear: both;
margin-top: -100px;
margin-right: auto;
margin-left: auto;
background-image: url(../img/bg_tile.gif);
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \\*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
h1, h2, p {
}
#container:after {
clear:both;
display:block;
height:1%;
content:" ";
}
thanks in advance, again!
