Problems with IE6

debauchedfish · May 4th, 2009, 06:22 AM

despite my urge to not make my website compatible with IE6 (they should have switched to something better by now!), I have to.
However, this is causing me lots of problems

my design is based almost entirely on iframes & div layers. The div layers aren't aligning properly in IE6 at all.
At first, they weren't working in IE7 or 8 either until I added doctype tag.

Also, the iframes—whose height (100%) is now actually working in IE7 and 8—won't appear at all in IE6.

Any thoughts? What could be causing this? What should I do?

It seems pretty clear that the answer lies in either something very fiddly and minute or in javascript somewhere, which I don't know very well.

Any help would be appreciated.

Here is the relevant part of my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<link rel="stylesheet" type="text/css" href="library/style.css"> 
<link rel="shortcut icon" href="favicon.ico">
</head>

<div id="sidebar1" style="position:fixed; top:190px; left:20px; width:140px">
<p align="right" class="largewhite"><a href="camp.htm" target="iframe">Camp</a></p>
  <p align="right" class="largewhite"><a href="class.htm" target="iframe">Classes</a> </p>
  <p align="right" class="largewhite"><a href="camp2.htm" target="iframe">Registration & Info</a>   
  <p align="right" class="largewhite"><a href="faculty.htm" target="iframe">Faculty</a> </p>
  <p align="right" class="largewhite"><a href="testimonials.htm" target="iframe">Testimonials</a>
</div>

<div id="iframe"; style="position:absolute; left:181px; top:80px; bottom:24px; right:0px; overflow="auto"; z-index:3">
<iframe name="iframe"; id="iframe"; src="/campclassinfo.htm"; ALIGN="top"; HSPACE="0"; VSPACE="0"; frameborder="0"; style="height:100%;min-height:400px;bottom:0px;width:100%;border:0;frameborder:0"; allowtransparency="true">
</iframe> 
</div>

<div id="base" style="position:fixed; bottom:0px; left:0px; right:0px; height:24px; background-image: url(/library/images/btm_bar.gif); background-repeat:repeat"></div>

</body>
</html>

Basically, in IE6, the sidebar aligns with the top of the page instead of where it's supposed to be (190px from the top) and the iframe won't appear at all.

snazzy · May 4th, 2009, 09:58 AM

I have no idea what the solution is ( as I dont use iframes because they are no longer used generally ), but my suggestion is that you get away from iframes and look into css, you can create that effect without destroying your search engine optimisation and without causing any issues with your layout once you have done a bit of research

p.s - a doctype should be included on ALL web documents as it tells the browser what type of coding you are using ( in your case html - you have used the right one for someone that is just starting in web development ) but this could be xhtml or any number of possibilities, There are many reasons for this which I wont go into now.

debauchedfish · May 4th, 2009, 07:16 PM

what exactly do you recommend in lieu of iframes? I chose them because they make it very easy to add new content. How do I use css to this same effect?

I could put the content directly into the div layer holding the iframe, but then to add content I'd have to edit each individual content page... Is there a way to bypass that with css?

I haven't done web design in 5 or 6 years. It must show.

moojoo · May 5th, 2009, 09:57 AM

The problem with frames in general is that they "break" your pages, navigation etc etc.. You can simulate a frame effect fairly easily with CSS and you can use includes so you can have a single file used wherever you need so updating is quick and easy. All major programming languages such as PHP, ASP etc support including of files and you can also do it with jQuery using ().load if needed. so for example you could have something like:

Code:

<?php include "includes/php/global_header.php"; ?>

<h2>Heading Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<?php include "includes/php/global_footer.php" ?>

and as such when you edited global_header.php or global_footer.php the change would take effect site wide. if your server does not support or have PHP etc installed you can use javascript/jQuery like so:

Code:

$('#foo').load("path/to/file");

snazzy · May 5th, 2009, 12:48 PM

on top of what moojoo said, have a look here for an idea on how to do it http://www.cssplay.co.uk/layouts/fixed.html have a play with the css etc, will be allot better than trying to explain it to you

F0kke · May 6th, 2009, 01:30 PM

Also have a look at the W3 browser stats. Depending on what kind of visitors you have, generally speaking 20% is still using IE6, a number I wouldn't want to ignore.

moojoo · May 7th, 2009, 11:29 AM

Quote:

Originally Posted by F0kke

Also have a look at the W3 browser stats. Depending on what kind of visitors you have, generally speaking 20% is still using IE6, a number I wouldn't want to ignore.

The problem with those stats is they are just numbers for visitors to the w3c pages so the stats are biased to a more tech savvy crowd. but yeah IE 6 is roughly still in the 20% range across the board.

Dubbs · May 8th, 2009, 10:39 AM

I would like to point out that your style attribute is coded incorrectly. You are closing the attribute before you finish defining what each style attribtue is.

Code:

<div id="iframe"; style="position:absolute; left:181px; top:80px; bottom:24px; right:0px; overflow="auto"; z-index:3">

You should change it to the following:
[code]
<div id="iframe" style="position:absolute; left:181px; top:80px; bottom:24px; right:0px; overflow:auto; z-index:3">
[code]

See if this makes any difference to your code.

Also, I noticed that you have when ever you are "closing" an HTML attribute you use a quote then a semi-colon. The semi-colon isn't needed to close the attribute.