PDA

View Full Version : Site not displaying correctly in IE 6.0: HELP!!!


Fiery251
07-14-2007, 07:53 PM
Hi folks,

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

www.firstdriving.co.uk (http://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.

davidj
07-14-2007, 08:25 PM
you have some irregular code...
<p align="justify" class="style1">&nbsp;</p>
this is not the problem but you need to resolve the basics

Fiery251
07-15-2007, 01:36 PM
Not sure what those are.

So if I just go through my code and delete the entire line of:-

<p align="justify" class="style1">&nbsp;</p>

....anywhere I see it, would that be safe enough to do?.

Still cant figure out how to fix the IE 6.0 issue.

I have Googled for info, but have only ended up more confused!!!. :(

davidj
07-15-2007, 02:30 PM
when designing and developing you have to test across the versions as well as the browsers. Im pleased i dont have that worry

Fiery251
07-15-2007, 02:34 PM
I have just found a "Standalone" multiple installer for most of the popular browsers going back over the years.

Just installed IE 6.0 Standalone so I can use it to test in the future.

However, thats not any help to me now!!.

Need to work out what to do for this site to get it to display properly.

I have dug through my code over and over and cant find a solution. :confused:

Fiery251
07-15-2007, 03:49 PM
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
07-15-2007, 05:01 PM
Update!!!!

I fixed the www.firstdriving.co.uk (http://www.firstdriving.co.uk/) site. http://www.eukhost.com/forums/images/smilies/14.gif

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!!!. http://www.eukhost.com/forums/images/smilies/biggrin.gif

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

Any further input on that fellas?.

Fiery251
07-15-2007, 10:51 PM
Anyone??!!!. :(

cocoonfx
07-15-2007, 10:53 PM
Whats the problem with the kayak website?

Fiery251
07-15-2007, 11:00 PM
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.

www.glasgowkayakclub.com

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.

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?.

Fiery251
07-17-2007, 01:43 PM
Managed to improve it a fair bit.

I had this relating to the nav element "Home" in the style.css:-

<li><span class="style5"><span class="style6"><a href="index.html">Home</a></span></span></li>

I changed it to :-

<li class="style7"><a href="index.html">Home</a></li>
.....and it did the trick, stopped the "Home" part of the nav bar jumping up.

Now for the problems to appear at all, you really need to resize the viewing window a good bit till its very small indeed.

Made a few changes to my style.css sheet and adjusted the sizes of the pictures down a bit, same with the table on the calendar page.


Its not perfect yet, but its better.