Member Avatar for josephmcnelis

Hey All,

Im having a bit of bother with the way my page content displays in IE.
If the browser window is resized beyond a specific size my page content flys away to the right and the right column comes into replace it!?

Im pretty sure its some bad cass on my part but its driving me nuts, having to keep jumping back from my mac to xp on virtual box so any help would be greatly appreciated.

Anyways the problem can be found here
www.illusionhairandbeauty.co.uk (problem on in IE)

CSS

body {
        margin:0;
        padding:0;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
        background:#CFBD97;
        min-width:1140px;    /* Minimum width of layout - remove line if not required */
							/* The min-width property does not work in old versions of Internet Explorer */
		font-size:90%;
		color: #484848;
		font-family:Trebuchet MS, Helvetica, sans-serif;
		background: url('steel.jpg') top left;


    }
	a {
    	color:#369;
	}
	a:hover {
		color:#fff;
		background:#369;
		text-decoration:none;
	}
    h1, h2, h3 {
        margin:.8em 0 .2em 0;
        padding:0;
		color:#484848;
    }
    p {
        margin:.4em 0 .8em 0;
        padding:0;
    }
	img {
		margin: 0px;
	}
	/* Header styles */
	#headerAddress{
	float:right;
	text-align: right;
	padding: 0px;
	font-weight: bold;
	}
	#header2 {
        clear:both;
        float:left;
        width:100%;
		color: #fff;
		padding: 0 0 0 10px;
		background: url('header-bkground.jpg') bottom repeat-x;
		
    }
	#header2 {
		border-bottom:5px solid #484848;
	}
    #header {
        clear:both;
        float:left;
        width:100%;
		color: #fff;
    }
	#header {
		border-bottom:0px solid #484848;
		background: url('header-bkground.jpg') bottom right repeat-x;
	}
	#header p,
	#header h1,
	#header h2 {
	    padding:.4em 15px 0 15px;
        margin:0;
	}
	#header ul {
	    clear:left;
	    float:left;
	    width:100%;
	    list-style:none;
	    margin:10px 0 0 0;
	    padding:0;
	}
	#header ul li {
	    display:inline;
	    list-style:none;
	    margin:0;
	    padding:0;
	}
	#header ul li a {
	    display:block;
	    float:left;
	    margin:0 0 0 1px;
	    padding:3px 10px;
	    text-align:center;
	    background:#eee;
	    color:#000;
	    text-decoration:none;
	    position:relative;
	    left:15px;
		line-height:1.3em;
	}
	#header ul li a:hover {
	    background:#369;
		color:#fff;
	}
	#header ul li a.active,
	#header ul li a.active:hover {
	    color:#fff;
	    background:#000;
	    font-weight:bold;
	}
	#header ul li a span {
	    display:block;
	}

.menu {
	margin: 0px;
	padding: 0px;
	list-style: none;	
	background:red;
	width:600px;
}
.menu li {
	padding: 0;
	margin: 0;
	height: 35px;
	background-repeat: no-repeat;
	list-style: none;

}
.menu li a, .menu li a:visited {
	display: block;
	text-decoration: none;
	height: 35px;
	background-repeat: no-repeat;
	text-indent: -1100px;

}
.home {background-image: url('over/over_01.jpg'); width: 100px;}
.home a {background-image: url('normal/normal_01.jpg');}
.beauty {background-image: url('over/over_02.jpg'); width: 100px;}
.beauty a {background-image: url('normal/normal_02.jpg');}
.hair {background-image: url('over/over_03.jpg'); width: 100px;}
.hair a {background-image: url('normal/normal_03.jpg');}
.tanning {background-image: url('over/over_04.jpg'); width: 100px;}
.tanning a {background-image: url('normal/normal_04.jpg');}
.contact {background-image: url('over/over_05.jpg'); width: 100px;}
.contact a {background-image: url('normal/normal_05.jpg');}
.navend {background-image: url('normal/normal_06.jpg'); width: 100px; height: 55px;}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}


.marquee{
display:block;
width:600px;
}

/*------*/
	#center ul {
	    clear:left;
	    float:left;
	    width:100%;
	    list-style:none;
	    margin:0px 0 0 0;
	    padding:0;
	}
	#center ul li {
	    display:inline;
	    list-style:none;
	    margin:0;
	    padding:0;
	}
	#center ul li a {
	    display:block;
	    float:left;
	    margin:0 0 0 0px;
	    padding:3px 20px;
	    text-align:center;
	    background:#8B1D85;
	    color:#E6D1B0;
	    text-decoration:none;
	    position:relative;
	    left:0px;
		line-height:1.3em;
	}
	#center ul li a:hover {
	    background:#EB70E4;
		color:#8B1D85;
	}
	#center ul li a.active,
	#center ul li a.active:hover {
	    color:#fff;
	    background:#895F3D;
	    font-weight:bold;
	}
	#center ul li a span {
	    display:block;
	}
/*----*/




	/* 'widths' sub menu */
	#layoutdims {
		clear:both;
		background:#eee;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}
	/* column container */
	.colmask {
		position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
	    float:left;
        width:100%;				/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* holy grail 3 column settings */
	.holygrail {
	    background-color:#fff; /* Right column background colour */
		background: url('right.jpg') top no-repeat;
		

	}
    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-375px; 	/* Width of right column */
        position:relative;
        right:100%;
       
		min-height: 500px;
		background-repeat:no-repeat;
		background-position:right bottom;
	}
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:550px;         	/* Left column width + right column width */
        background:#EBEBEB;    	/* Left column background colour */
		background-image:url('ledft.jpg');
		background-position:bottom right;
		background-repeat:no-repeat;
		min-height: 500px;
    }
    .holygrail .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:215px;        	/* Width of left column */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
		
	}
	.holygrail .col1 {
        margin:0 215px;     	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:200%;
	    overflow:hidden;
		
	}
    .holygrail .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:180px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
		right:-23px;         	/* Width of the left-had side padding on the left column */
    }
    .holygrail .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:200px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:200px;  	/* Width of right column right-hand padding + left column left and right padding */
       
        left:50%;	
    }


/*hair holygrail*/
	.holygrail-hair {
	    background-color:#fff; /* Right column background colour */
		background: url('right-hair.jpg') top no-repeat;

	}
    .holygrail-hair .colmid {
        float:left;
        width:200%;
        margin-left:-375px; 	/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
		min-height: 500px;
		background-repeat:no-repeat;
		background-position:right bottom;
	}
    .holygrail-hair .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:550px;         	/* Left column width + right column width */
        background:#EBEBEB;    	/* Left column background colour */
		background-image:url('ledft.jpg');
		background-position:bottom right;
		background-repeat:no-repeat;
		min-height: 500px;
    }
    .holygrail-hair .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:215px;        	/* Width of left column */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
		
	}
	.holygrail-hair .col1 {
        margin:0 215px;     	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:200%;
	    overflow:hidden;
		
	}
    .holygrail-hair .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:180px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:-23px;         	/* Width of the left-had side padding on the left column */
    }
    .holygrail-hair .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:400px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:200px;  	/* Width of right column right-hand padding + left column left and right padding */
       
        left:50%;	
    }
/*end of*/
/*tanning holygrail*/
	.holygrail-tanning {
	    background-color:#fff; /* Right column background colour */
		background: url('right-tanning.jpg') top no-repeat;

	}
    .holygrail-tanning .colmid {
        float:left;
        width:200%;
        margin-left:-375px; 	/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
		min-height: 500px;
		background-repeat:no-repeat;
		background-position:right bottom;
	}
    .holygrail-tanning .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:550px;         	/* Left column width + right column width */
        background:#EBEBEB;    	/* Left column background colour */
		background-image:url('ledft.jpg');
		background-position:bottom right;
		background-repeat:no-repeat;
		min-height: 500px;
    }
    .holygrail-tanning .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:215px;        	/* Width of left column */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
		
	}
	.holygrail-tanning .col1 {
        margin:0 215px;     	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:200%;
	    overflow:hidden;
		
	}
    .holygrail-tanning .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:180px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:-23px;         	/* Width of the left-had side padding on the left column */
    }
    .holygrail-tanning .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:400px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:200px;  	/* Width of right column right-hand padding + left column left and right padding */
       
        left:50%;	
    }
/*end of*/
/*beauty holygrail*/
	.holygrail-beauty {
	    background-color:#fff; /* Right column background colour */
		background: url('right-beauty.jpg') top no-repeat;

	}
    .holygrail-beauty .colmid {
        float:left;
        width:200%;
        margin-left:-375px; 	/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
		min-height: 500px;
		background-repeat:no-repeat;
		background-position:right bottom;
	}
    .holygrail-beauty .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:550px;         	/* Left column width + right column width */
        background:#EBEBEB;    	/* Left column background colour */
		background-image:url('ledft.jpg');
		background-position:bottom right;
		background-repeat:no-repeat;
		min-height: 500px;
    }
    .holygrail-beauty .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:215px;        	/* Width of left column */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
		
	}
	.holygrail-beauty .col1 {
        margin:0 215px;     	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:200%;
	    overflow:hidden;
		
	}
    .holygrail-beauty .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:180px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:-23px;         	/* Width of the left-had side padding on the left column */
    }
    .holygrail-beauty .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:400px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:200px;  	/* Width of right column right-hand padding + left column left and right padding */
       
        left:50%;	
    }
/*end of*/

	/* Footer styles */
	#footer {
        clear:both;
        float:left;
        width:100%;
		height:200px;
		border-top:0px solid #111; 
		text-align: center;
		color: #fff;
		background: url('footer-bkground.jpg') top left repeat-x;
    }
    #
	footer p {
        padding:10px;
        margin:0;
    }

	a.footer:link { color: #fff; text-decoration: none; }
	a.footer:visited {color: #fff; text-decoration: none; }
	a.footer:hover {color: #fff; text-decoration: none; background:#; }
	a.footer:active {color: #fff; text-decoration: none; }


    /* --> */

#type5{
color: #fff;
}



	#type3{
		text-align: center;
		clear:left;
	    float:left;
	    width:100%;
	    margin: 10px 0 0 0;
	    padding: 0px 0 0px 0;
		background:#AB72A8;
		display:block;
		font-weight: bold;
	}

	#type3 hr{
	color: #fff;
	}

	

	.h3right{
        margin:1em 0 -.5em 0;
        padding:0 0 0 0;
		color:#fff;
    }

	.content{
	margin:0 25px;
	}
	.content h2{
	text-align:left;
	}

	.info {
	width:300px;
   position: relative;
   background: #313131;
   color:#fff;
   padding:0px 0px;
	}
.info span {
	background: url('info-top-right.jpg') top right no-repeat;
	display: block;
}
.info span span {
	background: url('type1-bottom-right.jpg') bottom right no-repeat;
}
.info span span span {
	background: url('info-bottom-left.jpg') bottom left  no-repeat;
}
.info span span span span {
	background: url('type1-top-left.jpg') top left no-repeat;
	padding: 0.7em;
}

	.elements {
	width:600px
   position: relative;
font-size:75%;
   }

.left-element {
   position: absolute;
   width: 300px;
   }

.right-element {
   width: 400px;
   text-align: right; /* depends on element width */
   font-weight:bold;
   } 

.holder{
width:600px;
display:table-row;
}

.elements-beauty {
width:300px
position: relative;
font-size:75%;
display:table-cell;
padding:5px;
   }

.left-element-beauty {
   position: absolute;
   width: 150px;

   }

.right-element-beauty {
   width: 200px;
   text-align: right; /* depends on element width */
   font-weight:bold;
   } 

.stuff{
width:610px;
font-size:75%;
}
.left-stuff{
float:left;
width:300px;
}
.right-stuff{
padding-left:10px;
float:right;
width:290px;
}

.table{
/* mainly just for headers */
display:inline;
}
.cell{
width:300px;
display:block;
}
.left-cell{
float:left;
width:200px;
word-wrap: break-word;
}
.right-cell{
float:right;
width:100px;
text-align:right;
font-weight:bold;
}

	#type1{
		text-align: center;
		clear:left;
	    float:left;
	    width:100%;
	    margin: 10px 0px 0px 0px;
	    padding:0px 0px 0px 0px;
		background:#B323AB;
		color:#fff;
		display:block;
		font-weight: bold;
	}




	#type2{
		text-align: center;
		clear:left;
	    float:left;
	    width:100%;
	    margin: 10px 0 0 0;
	    padding: 0px 0 0px 0;
		background:#96BF32;
		display:block;
		font-weight: bold;
	}

#type2 span {
	background: url('type22-top-right.jpg') top right no-repeat;
	display: block;
}
#type2 span span {
	background: url('type2-bottom-right.jpg') bottom right no-repeat;
}
#type2 span span span {
	background: url('type22-bottom-left.jpg') bottom left  no-repeat;
}
#type2 span span span span {
	background: url('type2-top-left.jpg') top left no-repeat;
	padding: 0.5em;
}

#test {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:100% verdana,arial,sans-serif;
  margin: 0;
  padding: 0;
  width: 150px;
  min-width: 100px;
  max-width: 200px;
  
}


form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:100% verdana,arial,sans-serif;
  margin: 0;
  padding: 0;
  min-width: 500px;
  max-width: 600px;
  width: 560px; 
}

form fieldset {
  / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  border-color: #000;
  border-width: 1px;
  border-style: solid;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
}

form fieldset legend {
	font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
                       /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 150px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}

form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */
	text-decoration:underline;    /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
                                    /* pseudo-class on legend elements, but do support it on label elements */
                                    /* we instead underline first letter on each label element and accesskey */
                                    /* each input. doing only legends would  lessens cognitive load */
                                   /* opera breaks after first letter underlined legends but not labels */
}

form input, form textarea {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form input#reset {
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

textarea { overflow: auto; }

form small {
	display: block;
	margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}

form .required{font-weight:bold;} /* uses class instead of div, more efficient */

form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}

hair.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
<TITLE>Illusion - Welcome</TITLE>
  <META NAME="Author" CONTENT="Joseph McNelis">
  <META NAME="Keywords" CONTENT="Illusion Hair And Beauty,Glasgow,Scotland,Hair,Beauty,Tanning,Sunbeds,Ergoline,Fake Bake,Wella,">
<META NAME="Description" CONTENT="Illusion is a modern hair, beauty & tanning salon situated 10 minutes walk from Glasgow city centre.<br><br>
Professional staff offering a wide range of services including Hairstylists, Beauty Therapists & Nail Technicians.">

  <link rel="stylesheet" type="text/css" href="css/css.css" media="screen" />
  <!--[if IE]> <style type="text/css">@import "css/IE-override.css";</style> <![endif]-->
  <script type="text/javascript" src="crawler.js">
/*
Text and/or Image Crawler Script �2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/


</script>

<script language="JavaScript">
function showhidefield()
{
    if (document.f.chkbox.checked)
    {
		document.getElementById("hideablearea").style.visibility = "visible";
    }
    else
    {
		document.getElementById("hideablearea").style.visibility = "hidden";
    }
}
var blob=0;
function hide_delivery(test){
	
	if(test=="0"){
		document.getElementById('HIDE-DELIVERY').style.display = 'none';
		var blob=0;
	}
	
	if(test=="1"){
		document.getElementById('HIDE-DELIVERY').style.display = 'BLOCK';
		var blob=1;
	}
	
}

</script>
 </HEAD>

 <BODY>
 
 <div id="header">
 <div align="center"><img src="images/illusion.jpg"></div>
 <br>
 </div>

 <div class="colmask holygrail-hair">
	<div class="colmid">
		<div class="colleft">
			<div class="col1wrap">
				<div class="col1">			

					
				<div class="content">
					<ul class="menu">
	<li class="home"><a href="index.php?module=home">Home</a></li>

	<li class="hair"><a href="index.php?module=hair">Hair</a></li>
	<li class="beauty"><a href="index.php?module=beauty">Beauty</a></li>
	<li class="tanning"><a href="index.php?module=tanning">Tanning</a></li>
	<li class="contact"><a href="index.php?module=contact">Contact</a></li>
	<li class="navend"></li>
	</ul>
					<!--[if IE 7]>
<br><br>
<![endif]-->

<h2>Hair</h2>
<div class="elements">
<div class="left-element">
<script type="text/javascript">

/***********************************************
 * Fading Scroller- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
 * This notice MUST stay intact for legal use
 * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
 ***********************************************/

var delay = 2000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(49,49,49); // start color (red, green, blue)
var endcolor=new Array(255,255,255); // end color (red, green, blue)

var fcontent=new Array();
begintag='<div align="center"><div style="font: normal 150% arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="Half Price Cut & Colour<br>Mon & Tues";
closetag='</div></div>';

var fwidth='180px'; //set scroller width
var fheight='25px'; //set scroller height

var fadelinks=1;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////


var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;


/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
	if (index>=fcontent.length)
		index=0
		if (DOM2){
			document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
			document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
			if (fadelinks)
				linkcolorchange(1);
			colorfade(1, 15);
		}
		else if (ie4)
			document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
	index++
}

// colorfade() partially by Marcio Galli for Netscape Communications.  ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
	var obj=document.getElementById("fscroller").getElementsByTagName("A");
	if (obj.length>0){
		for (i=0;i<obj.length;i++)
			obj[i].style.color=getstepcolor(step);
	}
}

/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
	if(step<=maxsteps) {	
		document.getElementById("fscroller").style.color=getstepcolor(step);
		if (fadelinks)
			linkcolorchange(step);
		step++;
		fadecounter=setTimeout("colorfade("+step+")",stepdelay);
	}else{
		clearTimeout(fadecounter);
		document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
		setTimeout("changecontent()", delay);
		
	}   
}

/*Rafael Raposo's new function*/
function getstepcolor(step) {
	var diff
	var newcolor=new Array(3);
	for(var i=0;i<3;i++) {
		diff = (startcolor[i]-endcolor[i]);
		if(diff > 0) {
			newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
		} else {
			newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
		}
	}
	return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

if (ie4||DOM2)
document.write('<div id="fscroller" style="border:0px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

</script>
</div>
<div class="right-element">
		<div style="font: normal 120%">We only use top quality products<br> including Wella - Ghd - Fudge +<br> many more<br></div>
</div>

</div>



<!--<img src="images/hair.jpg">

<div class="info">
<span><span><span><span>
<br>We only use top quality products including<br>
Wella - Ghd - Fudge + many more
</ul>

</span></span></span></span>
</div>-->

<div class="stuff">
<div class="left-stuff">

<div class="table">
<h3>ladies</h3>
	<div class="cell">
	<div class="left-cell">cut & blow dry	</div>

	<div class="right-cell">&pound;25.00</div>
	</div>
	<div class="cell">
	<div class="left-cell">dry cut from</div>
	<div class="right-cell">&pound;7.50</div>
	</div>
	<div class="cell">

	<div class="left-cell">wash/blow dry from</div>
	<div class="right-cell">&pound;13.00</div>
	</div>
	<div class="cell">
	<div class="left-cell">t-bar highlights</div>
	<div class="right-cell">&pound;45.00</div>
	</div>

	<div class="cell">
	<div class="left-cell">half head highlights</div>
	<div class="right-cell">&pound;55.00</div>
	</div>
	<div class="cell">
	<div class="left-cell">full head highlights</div>
	<div class="right-cell">&pound;65.00</div>

	</div>
	<div class="cell">
	<div class="left-cell">t-bar with tint from</div>
	<div class="right-cell">&pound;60.00</div>
	</div>
	<div class="cell">
	<div class="left-cell">full head tint</div>

	<div class="right-cell">&pound;35.00</div>
	</div>
	<div class="cell">
	<div class="left-cell">tint re-growth</div>
	<div class="right-cell">&pound;32.00</div>
	</div>
	<div class="cell">

	<div class="left-cell">hair up</div>
	<div class="right-cell">&pound;20.00</div>
	</div>
	<div class="cell">
	<div class="left-cell">hair extensions</div>
	<div class="right-cell">prices available on request</div>
	</div>

</div>

<div class="table">
<h3>hair treatments</h3>
	<div class="cell">
	<div class="left-cell">conditioning hair treatment<br>
	inc shiatsu or indian head massage</div>
	<div class="right-cell">&pound;10.00</div>
	</div>

</div>

<div class="table">
	<h3>gents</h3>
	<div class="cell">
	<div class="left-cell">wet cut</div>
	<div class="right-cell">&pound;7.50</div>
	</div>
	<div class="cell">

	<div class="left-cell">wet cut inc was & style finish</div>
	<div class="right-cell">&pound;10.50</div>
	</div>
	<div class="cell">
	<div class="left-cell">cut & highlights</div>
	<div class="right-cell">&pound;25.00</div>

	</div>
</div>

</div>
<div class="right-stuff">

</div>
</div>
				</div>
				</div>
			</div>
			<div class="col2">

			
<!--<div style="float:right;width:150px;color:#A28851;">
	<b>194 Crown Street<br/>
	New Gorbals<br/>
	Glasgow<br/>
	G5 9XT<br/></b>
	0141 420 6006<br><br>
	<b>Ladies & Gents Salon</b><br>
	Open 7 Days A Week<br/>
	9.30am - 9pm
</div>-->

<div style="float:right;width:165px;">
<img src="images/logos.jpg">
<br>

<div align="right">
<form action="http://maps.google.co.uk/maps" method="get" id="test">
<p>Directions<br><sup>(Enter Your Postcode)</sup><br>
<input type="text" name="saddr" id="saddr" value="" /><br>
<input type="submit" value="Go" />
<input type="hidden" name="daddr" value="194 CROWN STREET GLASGOW G5 9XT" />
<input type="hidden" name="hl" value="en" /></p>
</form>	


<a href="http://www.facebook.com/people/Illusion-Glasgow/100000394272592" target="_blank"><img src="images/facebook.jpg" border="0"></a><br>
<a href="http://www.minxnails.com/dnn/AboutMinx/tabid/57/language/en-US/Default.aspx" target="_blank"><img src="images/minx.jpg" border="0"></a>
</div>

			</div>
			</div>
			<div class="col3">

			
				
			</div>
		</div>
	</div>

 </div>


 <div id="footer">
	
 <br><b>
 <a class="footer" href="index.php?module=home">Home</a> | 
  <a class="footer" href="index.php?module=hair">Hair</a> |
 <a class="footer" href="index.php?module=beauty">Beauty</a> |
 <a class="footer" href="index.php?module=tanning">Tanning</a>|
 <a class="footer" href="index.php?module=contact">Contact</a><br/></b>

<sup><a class="footer" href="http://www.josephmcnelis.co.uk" target="_blank">Website Created By Joseph McNelis</a></sup>
<br><br><br><br>
 </div>


  

 </BODY>
</HTML>
  • 3 Contributors
  • 7 Replies
  • 163 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by drjohn

Recommended Answers

All 7 Replies

Member Avatar for macneato

Can tell you what the problem is, it's the way you approaching all your css. Doesn't make any logical sense. Why is everything negitive and 200% widths? From your layout, it should be really simple.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
		
		<style>
			body {
				margin: 0;
				padding: 0;
				background:url("http://www.illusionhairandbeauty.co.uk/css/steel.jpg") repeat scroll left top transparent;
			}
			
			#header {
				height:139px;
				border-bottom: 4px solid #111111;
				margin-bottom:1px
			}
			
			#footer {
				height:139px;
				border-top: 4px solid #111111;
				margin-top:1px;
				clear:both;
			}			
			
			#container {
				position:relative;
				width: 100%;
				background: url(http://www.illusionhairandbeauty.co.uk/css/right.jpg) #fff no-repeat top right;
				height:500px;
			}
			
			#nav {
				height: 26px;
				width: 760px;
				background: #484848  url(http://www.illusionhairandbeauty.co.uk/css/normal/normal_06.jpg) top right no-repeat;
				position:absolute;
				z-index: 2
			}
			
			#left_col {
				width: 196px;
				float:left;
				background: #e9e9e9;
				height:100%;
				top: 0;
			}
			
			#center_col {
				position:relative;
				margin-left:196px;
				height: 500px;
			}
		</style>
		
    </head>
    <body>
    	<div id="header"></div>
		<div id="container">
			<div id="nav"></div>
			<div id="left_col"></div>
			<div id="center_col"></div>
		</div>
		<div id="footer"></div>
    </body>
</html>
Member Avatar for josephmcnelis

I know its a bit of a mess, it was simple but then ended up with hacks for this that and everything.
I was thinking that it was caused by a n overflow problem but being that i keep having to jump onto virtual box to test anything its taking ages.

Member Avatar for drjohn

Start again, with less divs. Especially less deeply nested divs

eg

<div class="colmask holygrail">
	<div class="colmid">
		<div class="colleft">
			<div class="col1wrap">
				<div class="col1">			

					
				<div class="content">
					<ul class="menu">
	<li class="home"><a href="index.php?module=home">Home</a></li>
	<li class="hair"><a href="index.php?module=hair">Hair</a></li>

	<li class="beauty"><a href="index.php?module=beauty">Beauty</a></li>
	<li class="tanning"><a href="index.php?module=tanning">Tanning</a></li>
	<li class="contact"><a href="index.php?module=contact">Contact</a></li>
	<li class="navend"></li>
	</ul>

The menu is nested inside a div inside a div inside a div inside a div inside a div inside a div! Things should be a lot simpler than this, which in turn makes troubleshooting a lot simpler.

If a div has width:100%, floating left or right does nothing, as it has already filled the available space.

Having float:left, followed immediately by float:right means it will be floated right, so DELETE the float left, it is doing nothing.

And try starting with a fixed width wrapper div, which will stop the problem. But just adding that around everything would increase the level of nesting. Hence the start again advice.

Member Avatar for josephmcnelis

Thanks for the replies, the thing is that it works fine in everything but IE.
Thus why i was certain that there was a quick fix so to speak for the display problem.

Member Avatar for macneato

See the issue is, normally there would be a quick fix, but because of the structure of the code, it will take ALOT of fixes to reach the final outcome.

Member Avatar for drjohn

It's over-complicated, and probably intended to solve problems in IE6.
748 lines of css is rather a lot, especially if we are supposed to look at it and solve problems.

Edited by drjohn because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.