Hi folks,

I have recently redone a website for my fathers driving school:-

www.firstdriving.co.uk

Throughout the design of it, I previewed it regularly within my installed browsers, IE 7.0 and Firefox. It worked perfectly.

However, my father called me tonight after I uploaded the finished site to my web server and said it was not displaying correctly.

He uses IE 6.0 on his laptop.

The problem pages appear to be the "Training Available" page where everything seems to have dropped to the bottom of the page for some reason and the "Photo's" page where the Gallery is. The Gallery is not displaying as it should, with a scrolling bar of thumbnails at the top and each picture fading in below as you click the thumbnails.

Can anyone advise me on how to fix this for him?.

I updated his previous website which was very basic and I am slightly peeved that these problems have cropped up, not having IE 6.0 on either my desktop where I do my website work or my laptop means I had no idea that this was going to happen.

Any advice greatly appreciated.

Regards,

Gary.

Only a biker understands why a dog sticks its head out of a car window!!.

I'm wondering if its to do with the right hand side of the page where the link images are as it seems to fall on its face and move all the content down when you slowly move the right side of the page in and reduce the window size. Just tried it in IE 7.0 as well and when moving the right side of the window in, it does the same at a certain point. So I would assume that this points to something wrong with my code rather than a browser compatibility problem?.

Anyhow, here's the style.css:-

<pre id=code><font face=courier size=2 id=code>body {
margin: 0 0 0 0;
background-color: #fff;
}

a {
text-decoration: none;
color: #06f;
}

a:hover {
text-decoration: underline;
color: #06f;
}

#preload {
width: 0;
height: 0;
display: inline;
background-image: url('menubg.jpg');
}

#header {
width: 100%; height: 150px;
margin: 0 0 0 0;
background-color: #3b3b3b;
vertical-align: bottom;
z-index: 1;
}

#header h1 {
display: block;
position: absolute;
margin: 116px 0 0 0;
padding: 0;
background-color: transparent;
color: #fff;
font-family: 'trebuchet ms', 'century gothic', verdana, sans-serif;
font-size: 35px;
font-weight: 400;
z-index: 4;
top: -43px;
}

span {
color: #06f;
}

#header big {
float: right;
margin: 50px 0 0 0; padding: 0;
color: #444;
font-family: 'trebuchet ms', 'century gothic', verdana, sans-serif;
font-size: 100px;
letter-spacing: -11px;
}

#menu {
position: absolute;
top: 108px;
width: 100%;
height: 118px;
margin: 0 0 0 0;
background-color: #000;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
z-index: 3;
text-align: center;
left: 0px;
}


#menu ul {
margin-top: 20px;
}

#menu ul li {
display: inline;
}

#menu ul li a {
background-color: transparent;
background-repeat: repeat-x;
padding: 14px 20px 14px 20px;
font-size: 0.8em;
font-family: 'century gothic', verdana, sans-serif;
color: #666;
font-weight: bold;
text-decoration: none;
border: solid 1px #000;
}

#menu ul li a:hover {
background: #06f url('menubg.jpg') repeat-x top;
color: #fff;
text-decoration: none;
border: solid 1px #fff;
}

#main {
position: absolute;
top: 205px;
width: 100%;
background: url('main.jpg') repeat-x top;
left: -7px;
}

#container {
width: 90%;
margin: 0 auto;
padding-top: 50px;
font-family: arial;
font-size: 0.9em;
}

#subnav {
clear: left;
float: left;
width: 140px;
padding: 0;
font-size: 0.6em;
font-family: "Century Gothic";
}

#subnav ul {
list-style: none;
width: 140px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}

#subnav li {
margin-bottom: 1px;
}

#subnav li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #cccccc;
display: block;
padding: 5px;
background: #3b3b3b;
border-right: 10px solid #fff;
}

#subnav li a:hover {
background: #06f;
color: #ffffff;
border-right: 10px solid #06f;
}

#subnav .child {
font-size: 0.9em;
padding: 0;
}

#subnav .child a {
height: 14px;
padding-left: 10px;
border-right: 10px solid #fff;
background: #bbb;
color: #666;
}

#subnav .child a:hover {
color: #06f;
background-color: #e0e0e0;
border-right: 10px solid #fff;
}

#content {
margin: 0 160px 10px 165px;
border-right: 1px solid #ccc; padding: 0 20px 0 0;
line-height: 1.6em;
color: #666;
font-size: 0.9em;
}

#content p {
padding-bottom: 5px;
}

h1 {
margin-top: 0px;
color: #06f;
letter-spacing: -2px;
font-family: 'trebuchet ms', 'century gothic', verdana, sans-serif;
}

h2 {
margin-top: 20px;
margin-bottom: 10px;
color: #666;
letter-spacing: -1px;
font-size: 1.3em; font-weight: 400;
font-family: 'trebuchet ms', 'century gothic', verdana, sans-serif;
}


.right {
float: right;
margin: 0 0 8px 12px;
padding: 4px;
background-color: #FFF;
border: 1px solid #CCC;
}

#footer {
padding: 5px;
margin-top: 50px;
margin-bottom: 3px;
color: #aaa;
font-size: 0.7em;
text-align: center;
border-top: 1px solid #ccc;
}

#extras {
clear: right;
float: right;
width: 140px;
margin-left: 10px;
margin-bottom: 20px;
padding: 0;
color: #666;
}

#extras p {
line-height: 1.5em;
margin: 0 0 1.5em 0;
font-size: 0.7em;
}

#box1 {
background: #fff url('boxbg.jpg') repeat-x top;
border: 1px solid #ccc;
width: 30%;
float: left;
margin: 0 2px; text-align: left;
padding: 1px;
}

#box2 {
background: #fff url('boxbg.jpg') repeat-x top;
border: 1px solid #ccc;
margin: 0 auto;
width: 30%; text-align: left;
padding: 1px;
}

#box3 {
background: #fff url('boxbg.jpg') repeat-x top;
border: 1px solid #ccc;
width: 30%;
float: right;
margin: 0 2px; text-align: left;
padding: 1px;
}


#box1 h2, #box2 h2, #box3 h2 {
margin-left: 4px;
}

.center {
text-align:center;
display:block;
margin-top: 15px;
}

.box {
margin: 0 4px 10px 4px;
line-height: 1.3em;
font-size: 0.8em;
border: 0;
}
.image-right {
margin: 10px;
}
.image-right {
float: right;
margin-bottom: 10px;
margin-left: 10px;
}
</font id=code></pre id=code>



Edited by - fiery251 on 15 Jul 2007 17:46:06

Update!!!!

I fixed the www.firstdriving.co.uk site.

I set the padding on the right hand cell where the Flash animation and the addition links are to 3px ( it was originally 20px and then adjusted the size of the photos being displayed with the Studio VII Gallery extension to a smaller size.

And that seems to have done the trick!!!.

However, I'm still having problems with the kayak website:-

www.glasgowkayakclub.com

Any further input on that fellas?.

Only a biker understands why a dog sticks its head out of a car window!!.

Edited by - fiery251 on 16 Jul 2007 00:47:30