2
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS!
In IE6 the text for the following page doesn't display properly - rather than being aligned to the top, along with the slideshow and link buttons, you have to scroll down to see the text - how can I make IE6 display correctly?
http://geekarama.co.uk/new_home.html
here is the code for new_home.html and following that the CSS code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home - Demon Consultancy</title>
<link href="new_home. css" rel="stylesheet " type="text/css" />
<script type="text/javascript" src="moveobj.js "> </script>
<script type="text/javascript">
/*************** *************** *************** **
* Floating image script- By Virtual_Max (http://www.geocities.c om/siliconvalley/lakes/8620)
* Modified by Dynamic Drive for various improvements
* Visit Dynamic Drive at http://www.dynamicdriv e.com/ for full source code
*************** *************** *************** **/
//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2, flyimage3
function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
flyimage1=new Chip("flyimage1 ",47,70);
flyimage2=new Chip("flyimage2 ",47,70);
flyimage3=new Chip("flyimage3 ",47,70);
//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyim age1");
movechip("flyim age2");
movechip("flyim age3");
}
if (window.addEven tListener)
window.addEvent Listener("load" , pagestart, false)
else if (window.attachE vent)
window.attachEv ent("onload", pagestart)
else if (document.getEl ementById)
window.onload=p agestart
</script>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColElsHdr #sidebar1, .thrColElsHdr #sidebar2 { padding-top: 30px; }
.thrColElsHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style></head>
<body class="thrColEl sHdr">
<script type="text/javascript">
/*************** *************** *************** **
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdriv e.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdriv e.com/ for this script and 100s more.
*************** *************** *************** **/
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["dc_images/bride_groom229x 400.jpg", "", ""] //image with link and target syntax
fadeimages[1]=["dc_images/garden229x400.j pg", "", ""] //image with link and target syntax
fadeimages[2]=["dc_images/home_pastel229x 400.jpg", "", ""] //image with link and target syntax
var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg ", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg ", "", ""] //image with link syntax
fadeimages2[3]=["photo3.jpg ", "", ""] //image with link and target syntax
var fadebgcolor="wh ite"
////NO need to edit beyond here/////////////
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.g etElementById) //modern dom browsers
var iebrowser=docum ent.all
function fadeshow(theima ges, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck =pause
this.mouseoverc heck=0
this.delay=dela y
this.degree=10 //initial opacity degree (10%)
this.curimagein dex=0
this.nextimagei ndex=1
fadearray[fadearray.lengt h]=this
this.slideshowi d=fadearray.len gth-1
this.canvasbase ="canvas"+this. slideshowid
this.curcanvas= this.canvasbase +"_0"
if (typeof displayorder!=" undefined")
theimages.sort( function() {return 0.5 - Math.random();} ) //thanks to Mike (aka Mwinter) :)
this.theimages= theimages
this.imageborde r=parseInt(bord erwidth)
this.postimages =new Array() //preload images
for (p=0;p<theimage s.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
var fadewidth=fadew idth+this.image border*2
var fadeheight=fade height+this.ima geborder*2
if (iebrowser&&dom ||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write( '<div id="master'+thi s.slideshowid+' " style="position :relative;width :'+fadewidth+'p x;height:'+fade height+'px;over flow:hidden;">< div id="'+this.canv asbase+'_0" style="position :absolute;width :'+fadewidth+'p x;height:'+fade height+'px;top: 0;left:0;filter :progid:DXImage Transform.Micro soft.alpha(opac ity=10);opacity :0.1;-moz-opacity:0.1;-khtml-opacity:0.1;bac kground-color:'+fadebgc olor+'"></div><div id="'+this.canv asbase+'_1" style="position :absolute;width :'+fadewidth+'p x;height:'+fade height+'px;top: 0;left:0;filter :progid:DXImage Transform.Micro soft.alpha(opac ity=10);opacity :0.1;-moz-opacity:0.1;-khtml-opacity:0.1;bac kground-color:'+fadebgc olor+'"></div></div>')
else
document.write( '<div><img name="defaultsl ide'+this.slide showid+'" src="'+this.pos timages[0].src+'"></div>')
if (iebrowser&&dom ||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimagein dex++
setInterval("fa dearray["+this.slidesho wid+"].rotateimage()" , this.delay)
}
}
function fadepic(obj){
if (obj.degree<100 ){
obj.degree+=10
if (obj.tempobj.fi lters&&obj.temp obj.filters[0]){
if (typeof obj.tempobj.fil ters[0].opacity=="numb er") //if IE6+
obj.tempobj.fil ters[0].opacity=obj.de gree
else //else if IE5.5-
obj.tempobj.sty le.filter="alph a(opacity="+obj .degree+")"
}
else if (obj.tempobj.st yle.MozOpacity)
obj.tempobj.sty le.MozOpacity=o bj.degree/101
else if (obj.tempobj.st yle.KhtmlOpacit y)
obj.tempobj.sty le.KhtmlOpacity =obj.degree/100
else if (obj.tempobj.st yle.opacity&&!o bj.tempobj.filt ers)
obj.tempobj.sty le.opacity=obj. degree/101
}
else{
clearInterval(f adeclear[obj.slideshowid])
obj.nextcanvas= (obj.curcanvas= =obj.canvasbase +"_0")? obj.canvasbase+ "_0" : obj.canvasbase+ "_1"
obj.tempobj=ieb rowser? iebrowser[obj.nextcanvas] : document.getEle mentById(obj.ne xtcanvas)
obj.populatesli de(obj.tempobj, obj.nextimagein dex)
obj.nextimagein dex=(obj.nextim ageindex<obj.po stimages.length-1)? obj.nextimagein dex+1 : 0
setTimeout("fad earray["+obj.slideshow id+"].rotateimage()" , obj.delay)
}
}
fadeshow.protot ype.populatesli de=function(pic obj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.th eimages[picindex][1]+'" target="'+this. theimages[picindex][2]+'">'
slideHTML+='<im g src="'+this.pos timages[picindex].src+'" border="'+this. imageborder+'px ">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTM L=slideHTML
}
fadeshow.protot ype.rotateimage =function(){
if (this.pausechec k==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseover check==1)
setTimeout(func tion(){cacheobj .rotateimage()} , 100)
else if (iebrowser&&dom ||dom){
this.resetit()
var crossobj=this.t empobj=iebrowse r? iebrowser[this.curcanvas] : document.getEle mentById(this.c urcanvas)
crossobj.style. zIndex++
fadeclear[this.slideshowi d]=setInterval("f adepic(fadearra y["+this.slidesho wid+"])",50)
this.curcanvas= (this.curcanvas ==this.canvasba se+"_0")? this.canvasbase +"_1" : this.canvasbase +"_0"
}
else{
var ns4imgobj=docum ent.images['defaultslide'+ this.slideshowi d]
ns4imgobj.src=t his.postimages[this.curimagein dex].src
}
this.curimagein dex=(this.curim ageindex<this.p ostimages.lengt h-1)? this.curimagein dex+1 : 0
}
fadeshow.protot ype.resetit=fun ction(){
this.degree=10
var crossobj=iebrow ser? iebrowser[this.curcanvas] : document.getEle mentById(this.c urcanvas)
if (crossobj.filte rs&&crossobj.fi lters[0]){
if (typeof crossobj.filter s[0].opacity=="numb er") //if IE6+
crossobj.filter s(0).opacity=th is.degree
else //else if IE5.5-
crossobj.style. filter="alpha(o pacity="+this.d egree+")"
}
else if (crossobj.style .MozOpacity)
crossobj.style. MozOpacity=this .degree/101
else if (crossobj.style .KhtmlOpacity)
crossobj.style. KhtmlOpacity=th is.degree/100
else if (crossobj.style .opacity&&!cros sobj.filters)
crossobj.style. opacity=this.de gree/101
}
fadeshow.protot ype.startit=fun ction(){
var crossobj=iebrow ser? iebrowser[this.curcanvas] : document.getEle mentById(this.c urcanvas)
this.populatesl ide(crossobj, this.curimagein dex)
if (this.pausechec k==0){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontain er=iebrowser? iebrowser["master"+this.s lideshowid] : document.getEle mentById("maste r"+this.slidesh owid)
crossobjcontain er.onmouseover= function(){cach eobj.mouseoverc heck=1}
crossobjcontain er.onmouseout=f unction(){cache obj.mouseoverch eck=0}
}
this.rotateimag e()
}
</script>
<div id="container" >
<div id="header">
<h1 align="center"> <img src="dc_images/logo_small.jpg" width="688" height="78" /></h1>
<table width="712" border="0">
<tr>
<td><script language="JavaS cript" src="new_scroll er.js" type="text/JavaScript"></script></td>
</tr>
</table>
</div>
<div id="sidebar1">
<p align="center">
<table width="159" height="574" border="0" cellpadding="3" >
<tr>
<td width="149"><di v align="center"> <a
href="http://geekarama.co.uk/new_home.html"
onmouseover="do cument.images.h ome_over.src='d c_images/home_over.jpg'"
onmouseout="doc ument.images.ho me_over.src='dc _images/home.jpg'"
><img name="home_over " src="dc_images/home.jpg" border="0" alt="home" /></a></div></td>
</tr>
<tr>
<td height="32"><di v align="center"> <a
href="http://geekarama.co.uk/dc_events.html"
onmouseover="do cument.images.e vents_over.src= 'dc_images/events_over.jpg '"
onmouseout="doc ument.images.ev ents_over.src=' dc_images/events.jpg'"
><img name="events_ov er" src="dc_images/events.jpg" border="0" alt="events" /></a></div></td>
</tr>
<tr>
<td><div align="center"> <a
href="http://geekarama.co.uk/dc_weddings.htm l"
onmouseover="do cument.images.w eddings_over.sr c='dc_images/weddings_over.j pg'"
onmouseout="doc ument.images.we ddings_over.src ='dc_images/weddings.jpg'"
><img name="weddings_ over" src="dc_images/weddings.jpg" border="0" alt="weddings" /></a></div></td>
</tr>
<tr>
<td><div align="center"> <a
href="http://geekarama.co.uk/new_home.html"
onmouseover="do cument.images.g ardens_over.src ='dc_images/gardens_over.jp g'"
onmouseout="doc ument.images.ga rdens_over.src= 'dc_images/gardens.jpg'"
><img name="gardens_o ver" src="dc_images/gardens.jpg" border="0" alt="gardens" /></a></div></td>
</tr>
<tr>
<td><div align="center"> <a
href="http://geekarama.co.uk/new_home.html"
onmouseover="do cument.images.h omes_over.src=' dc_images/homes_over.jpg' "
onmouseout="doc ument.images.ho mes_over.src='d c_images/homes.jpg'"
><img name="homes_ove r" src="dc_images/homes.jpg" border="0" alt="homes" /></a></div></td>
</tr>
<tr>
<td><div align="center"> <a
href="http://geekarama.co.uk/new_home.html"
onmouseover="do cument.images.s uppliers_over.s rc='dc_images/suppliers_over. jpg'"
onmouseout="doc ument.images.su ppliers_over.sr c='dc_images/suppliers.jpg'"
><img name="suppliers _over" src="dc_images/suppliers.jpg" border="0" alt="suppliers" /></a></div></td>
</tr>
<tr>
<td><div align="center"> <a
href="http://geekarama.co.uk/new_home.html"
onmouseover="do cument.images.a boutus_over.src ='dc_images/aboutus_over.jp g'"
onmouseout="doc ument.images.ab outus_over.src= 'dc_images/aboutus.jpg'"
><img name="aboutus_o ver" src="dc_images/aboutus.jpg" border="0" alt="about us" /></a></div></td>
</tr>
<tr>
<td><div align="center"> <a
href="http://geekarama.co.uk/new_home.html"
onmouseover="do cument.images.c ontactus_over.s rc='dc_images/contactus_over. jpg'"
onmouseout="doc ument.images.co ntactus_over.sr c='dc_images/contactus.jpg'"
><img name="contactus _over" src="dc_images/contactus.jpg" border="0" alt="contact us" /></a></div></td>
</tr>
<tr>
<td><div align="center"> </div></td>
</tr>
<tr>
<td><div align="center">
<p><img src="dc_images/telephone.gif" alt="Telephone" width="34" height="23" /></p>
</div></td>
</tr>
<tr>
<td><div align="center">
<div align="center"> 01279 836141</div>
</div></td>
</tr>
<tr>
<td><div align="center"> 07909 792500</div></td>
</tr>
<tr>
<td><div align="center"> 07712 594862</div></td>
</tr>
<tr>
<td><div align="center"> <img src="dc_images/email.gif" alt="Email" width="40" height="34" /></div></td>
</tr>
<tr>
<td height="65"><p> <a href="mailto:de monconsultancy@ aol.com"><font size="2" font="font" color="#000000" >demonconsultan cy<BR />
@aol.com</font></a></p>
<p align="center"> Office Hours</p></td>
</tr>
<tr>
<td><div align="center"> 12:30 to 5:30pm</div></td>
</tr>
<tr>
<td><div align="center"> Play/Pause Music</div></td>
</tr>
</table>
<table width="157" height="58" border="0">
<tr>
<td width="151"><di v align="center">
<embed src="music_home _page.mp3" width="32" height="32" loop="true"></embed>
</div></td>
</tr>
<tr>
<td height="18"><di v align="center"> </div></td>
</tr>
</table>
</div>
<div id="sidebar2">
<script type="text/javascript">
//new fadeshow(IMAGES _ARRAY_NAME, slideshow_width , slideshow_heigh t, borderwidth, delay, pause (0=no, 1=yes), optionalRandomO rder)
new fadeshow(fadeim ages, 229, 400, 1, 3000, 1)
</script>
<!-- end #sidebar2 -->
<p align="left"><!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
<div align="center">
<div style="width:16 0; background-color: #fcf2ee;">
<form name="ccoptin" action="http://visitor.constan tcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:3;"><spa n style="backgrou nd-color: #006699; float:right;mar gin-right:5;margin-top:3"></span>
<font style="font-weight: bold; font-family:Arial,He lvetica,sans-serif; font-size:12px; color:#000000;" >Sign up for our Email Newsletter</font>
<input type="text" name="ea" size="20" value="" style="font-family:Verdana, Geneva,Arial,He lvetica,sans-serif; font-size:10px; border:1px solid #999999;">
<input type="submit" name="go" value="GO" class="submit" style="font-family:Verdana, Arial,Helvetica ,sans-serif; font-size:10px;">
<input type="hidden" name="m" value="11021353 69767">
<input type="hidden" name="p" value="oi">
</form>
</div>
</div>
<!-- END: Constant Contact Stylish Email Newsletter Form -->
<!-- BEGIN: SafeSubscribe -->
<div align="center" style="padding-top:5px;">
<a href="http://www.constantcon tact.com/safesubscribe.j sp" target="_blank" ><img src="http://img.constantcon tact.com/ui/images1/safe_subscribe_ logo.gif" border="0" width="168" height="14" alt=""/></a>
</div>
<!-- END: SafeSubscribe -->
</p>
</div>
<div id="mainContent ">
<strong><BR />Welcome</strong>
<p>Why choose Demon Consultancy to organise your big day or special event?* We promise to do our level best to organise your day/event to your special requirements taking special care to all your finer details.* We are unique, always ready to help and have lots of ideas and bags of enthusiasm along with creativity to help you choose and organise a perfect day.</p>
<p>What separates those that succeed in achieving a great event and those that don’t; it’s that staying power to look at each and every detail, we offer a personal service; we will treat you as we would our own, and we will be there when you need us.</p>
<p>Demon Consultancy offer a professional service with a professional representative, providing assistance independently of any service providers, whether you are planning a small affair or something on a grand scale, we have the experience and expertise to provide you with a day to remember full of your hopes and dreams.</p>
<p>Best Regards<br />
</p>
<p>Jacqueline Haines and Deborah Richards</p>
<h4>Latest Articles</h4>
<table width="433" height="66" border="0" cellpadding="2" >
<tr>
<td><div align="center"> Weddings</div></td>
<td><div align="center"> Gardens</div></td>
<td><div align="center"> Homes</div></td>
</tr>
<tr>
<td><div align="center"> <a href="dc_creati ve_wedding_idea s.html"><img src="dc_images/bride_groom110x 110.jpg" alt="Weddings" width="110" height="110" border="1" /></a></div></td>
<td><div align="center"> <img src="dc_images/garden110x110.j pg" alt="Gardens" width="110" height="110" border="1" /></div></td>
<td><div align="center"> <img src="dc_images/home_pastel110x 110.jpg" alt="Homes" width="110" height="110" border="1" /></div></td>
</tr>
<tr>
<td><div align="center"> <i><a href="dc_creati ve_wedding_idea s.html"><font color = "#000000">F un, creative ideas...</font></a></i></div></td>
<td><div align="center"> <i>Fun, creative ideas...</i></div></td>
<td><div align="center"> <i>Fun, creative ideas...</i></div></td>
</tr>
</table>
</div>
<div id="footer">
<p> </p>
<!-- end #footer --></div>
<!-- end #container --></div>
<!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above -->
<DIV ID="flyimage1" STYLE="position :absolute; left: -500px; width:47; height:70;">
<A HREF=""><IMG SRC="dc_images/balloon2.gif" BORDER=0></a>
</DIV>
<DIV ID="flyimage2" STYLE="position :absolute; left: -500px; width:47; height:70;">
<A HREF=""><IMG SRC="dc_images/balloon2.gif" BORDER=0></a>
</DIV>
<DIV ID="flyimage3" STYLE="position :absolute; left: -500px; width:47; height:70;">
<A HREF=""><IMG SRC="dc_images/balloon2.gif" BORDER=0></a>
</DIV>
</body>
</html>
new_home.css code:
@charset "utf-8";
body {
font: 90% cursive;
background: #fcf2ee;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately . You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
.thrColElsHdr #container {
width: 62em; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #fcf2ee;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #cd450e;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColElsHdr #header {
background: #FFFFFF;
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
border: 1px solid #cd450e;
}
.thrColElsHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
/* Tips for sidebar1:
1. Be aware that if you set a font-size value on this div, the overall width of the div will be adjusted accordingly.
2. Since we are working in ems, it's best not to use padding on the sidebar itself. It will be added to the width for standards compliant browsers creating an unknown actual width.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColEls Hdr #sidebar1 p" rule.
*/
.thrColElsHdr #sidebar1 {
float: left;
width: 11em; /* since this element is floated, a width must be given */
background: #f7bcf1; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
border: 0px solid #cd450e;
}
.thrColElsHdr #sidebar2 {
float: right;
width: 18em; /* since this element is floated, a width must be given */
background: #fcf2ee; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0px 0; /* top and bottom padding create visual space within this div */
border: 0px solid #cd450e;
}
.thrColElsHdr #sidebar1 h3, .thrColElsHdr #sidebar1 p, .thrColElsHdr #sidebar2 p, .thrColElsHdr #sidebar2 h3 {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
/* Tips for mainContent:
1. If you give this #mainContent div a font-size value different than the #sidebar1 div, the margins of the #mainContent div will be based on its font-size and the width of the #sidebar1 div will be based on its font-size. You may wish to adjust the values of these divs.
2. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
3. To avoid float drop, you may need to test to determine the approximate maximum image/element size since this layout is based on the user's font sizing combined with the values you set. However, if the user has their browser font size set lower than normal, less space will be available in the #mainContent div than you may see on testing.
4. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout. " This avoids several IE-specific bugs that may occur.
*/
.thrColElsHdr #mainContent {
margin: 0 20em 0 12em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
background: #fcf2ee;
}
.thrColElsHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#f7b cf1;
}
.thrColElsHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
background:#f7b cf1;
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
