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.dtd">
<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.com/siliconvalley/lakes/8620)
* Modified by Dynamic Drive for various improvements
* Visit Dynamic Drive at http://www.dynamicdrive.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("flyimage1");
movechip("flyimage2");
movechip("flyimage3");
}
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
</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="thrColElsHdr">
<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.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_groom229x400.jpg", "", ""] //image with link and target syntax
fadeimages[1]=["dc_images/garden229x400.jpg", "", ""] //image with link and target syntax
fadeimages[2]=["dc_images/home_pastel229x400.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="white"
////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.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-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.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;hei ght:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;hei ght:'+fadeheight+'px;top:0;left:0;filter:progid:DX ImageTransform.Microsoft.alpha(opacity=10);opacity :0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;hei ght:'+fadeheight+'px;top:0;left:0;filter:progid:DX ImageTransform.Microsoft.alpha(opacity=10);opacity :0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degr ee+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0" )? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postima ges.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_ 0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postim ages.length-1)? this.curimageindex+1 : 0
}
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree +")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==0){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj. mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.m ouseovercheck=0}
}
this.rotateimage()
}
</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="JavaScript" src="new_scroller.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"><div align="center"><a
href="http://geekarama.co.uk/new_home.html"
onmouseover="document.images.home_over.src='dc_ima ges/home_over.jpg'"
onmouseout="document.images.home_over.src='dc_imag es/home.jpg'"
><img name="home_over" src="dc_images/home.jpg" border="0" alt="home" /></a></div></td>
</tr>
<tr>
<td height="32"><div align="center"><a
href="http://geekarama.co.uk/dc_events.html"
onmouseover="document.images.events_over.src='dc_i mages/events_over.jpg'"
onmouseout="document.images.events_over.src='dc_im ages/events.jpg'"
><img name="events_over" 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.html"
onmouseover="document.images.weddings_over.src='dc _images/weddings_over.jpg'"
onmouseout="document.images.weddings_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="document.images.gardens_over.src='dc_ images/gardens_over.jpg'"
onmouseout="document.images.gardens_over.src='dc_i mages/gardens.jpg'"
><img name="gardens_over" 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="document.images.homes_over.src='dc_im ages/homes_over.jpg'"
onmouseout="document.images.homes_over.src='dc_ima ges/homes.jpg'"
><img name="homes_over" 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="document.images.suppliers_over.src='d c_images/suppliers_over.jpg'"
onmouseout="document.images.suppliers_over.src='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="document.images.aboutus_over.src='dc_ images/aboutus_over.jpg'"
onmouseout="document.images.aboutus_over.src='dc_i mages/aboutus.jpg'"
><img name="aboutus_over" 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="document.images.contactus_over.src='d c_images/contactus_over.jpg'"
onmouseout="document.images.contactus_over.src='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:demonconsultancy@aol.com"><font size="2" font="font" color="#000000">demonconsultancy<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"><div align="center">
<embed src="music_home_page.mp3" width="32" height="32" loop="true"></embed>
</div></td>
</tr>
<tr>
<td height="18"><div align="center"></div></td>
</tr>
</table>
</div>
<div id="sidebar2">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 229, 400, 1, 3000, 1)
</script>
<!-- end #sidebar2 -->
<p align="left"><!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
<div align="center">
<div style="width:160; background-color: #fcf2ee;">
<form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:3;"><span style="background-color: #006699; float:right;margin-right:5;margin-top:3"></span>
<font style="font-weight: bold; font-family:Arial,Helvetica,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,Helvetica,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="1102135369767">
<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.constantcontact.com/safesubscribe.jsp" target="_blank"><img src="http://img.constantcontact.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_creative_wedding_ideas.html"><img src="dc_images/bride_groom110x110.jpg" alt="Weddings" width="110" height="110" border="1" /></a></div></td>
<td><div align="center"><img src="dc_images/garden110x110.jpg" alt="Gardens" width="110" height="110" border="1" /></div></td>
<td><div align="center"><img src="dc_images/home_pastel110x110.jpg" alt="Homes" width="110" height="110" border="1" /></div></td>
</tr>
<tr>
<td><div align="center"><i><a href="dc_creative_wedding_ideas.html"><font color = "#000000">Fun, 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 ".thrColElsHdr #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:#f7bcf1;
}
.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:#f7bcf1;
}
/* 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;
}
