IE 6.0 not displaying my website correctly? : Help!!!

[Fiery251]

Was not sure if I should post this in this section or the SIF Programming section, but I guess its Microsoft Windows related anyway.

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 the same, its displaying correctly but its all dropped down to the bottom of the page.

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.

I also have a similar problem with another website I completed recently at :-

www.glasgowkayakclub.com

On the Kayaking site, on the left hand side, the Nav bar, the top Nav section "Home" appears to have "jumped" upwards by a few pixels.

Also, when viewing the "Calendar of Events" and the "Gallery" the content has all dropped to the bottom of the page and the links on the right have shifted across to the left, moving the whole page and throwing it all out of line.

Are both these problems related in some way?. Is it my coding or is it IE 6.0 related, as 7.0 and FireFox display it perfectly?.

Any advice greatly appreciated.

[Fiery251]

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:-

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;
}

[Fiery251]

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.

Any further input on that fellas?.

[Paul Komski]

Don't have access to IE6 just now so can't check.

Just a general point that many glitches resulting in different rendering by different browsers are due to the default value for that html element (be it margin, padding, etc) not being defined in the css. Different browsers have different default settings for all sorts of things like style headings, paragraphs, etc, etc, and so dont render identically if the default values are used because they have been undefined.

[Sylvander]

Fiery251
I have IE6.
Looked earlier and again just now and all was and is just as you say.

[Fiery251]

I'm thinking this is not a browser compatibility problem, I reckon its something to do with the way I have coded the site.

I just cant figure it out though. :eek:

[Paul Komski]

Are the different browsers being viewed with the same screen resolution?

You might also like to try putting the three main css columns completely inside their own tds in a three cell wide table itself inside the main "container" div. Have no borders, margins, padding and no widths in these cells. Many web-authoring tools will keep putting in such td widths. Do this as an experiment just to help you discrimate/troubleshoot the other elements involved. It is obvious you want to use a 3-column css layout so this use of a table is just a troubleshooting "tool". In particular you seem to have problems on those pages where there are fixed width elements.

[Fiery251]

Well, I finally managed to kinda sort it out on both sites.

On the kayaking site, I resized the table that was causing problems on the calendar page and then on the gallery page I resized the pictures within Studio VII extension.

Its not perfect, but it is a lot better than the previous attempt.

You now need to resize the window a fair old bit before the content drops off towards the bottom of the page.

The error with the top of the nav bar jumping upwards was a fault in my style.css, changed that and it solved the problem there too.

On the driving site, again, similar, I removed the wide picture at the top of the training page and resized the gallery.

All a learning process, I'm going to tinker around with it further to see if I can eliminate the problems completely, but I'm pretty happy with the results so far.

Thanks again to everyone who replied and helped guys, appreciate it. :)