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">£25.00</div>
</div>
<div class="cell">
<div class="left-cell">dry cut from</div>
<div class="right-cell">£7.50</div>
</div>
<div class="cell">
<div class="left-cell">wash/blow dry from</div>
<div class="right-cell">£13.00</div>
</div>
<div class="cell">
<div class="left-cell">t-bar highlights</div>
<div class="right-cell">£45.00</div>
</div>
<div class="cell">
<div class="left-cell">half head highlights</div>
<div class="right-cell">£55.00</div>
</div>
<div class="cell">
<div class="left-cell">full head highlights</div>
<div class="right-cell">£65.00</div>
</div>
<div class="cell">
<div class="left-cell">t-bar with tint from</div>
<div class="right-cell">£60.00</div>
</div>
<div class="cell">
<div class="left-cell">full head tint</div>
<div class="right-cell">£35.00</div>
</div>
<div class="cell">
<div class="left-cell">tint re-growth</div>
<div class="right-cell">£32.00</div>
</div>
<div class="cell">
<div class="left-cell">hair up</div>
<div class="right-cell">£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">£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">£7.50</div>
</div>
<div class="cell">
<div class="left-cell">wet cut inc was & style finish</div>
<div class="right-cell">£10.50</div>
</div>
<div class="cell">
<div class="left-cell">cut & highlights</div>
<div class="right-cell">£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>