# Site doesn't display properly in IE



## AvvY (Oct 8, 2004)

My website - Burgerwiththelot.com for some reason fails to load properly in Internet Explorer. It use to work alright, but I noticed recently that the page content doesn't load.

It is setup so that pages load within a div area- but this setup isn't working anymore. My friend did the original code for me which I have now adapted, but I can't think of anything that would have altered things so they didn't work.

Does anyone have any idea as to why this would be the case? I'd ask my friend, but he isn't available at the moment. Thanx heaps 

Late,


----------



## hewee (Oct 26, 2001)

Looks ok in netscape but with IE there is a lot missing.
So not something I can help on but to say it is not your PC.


----------



## AvvY (Oct 8, 2004)

Thanx for the confirmation of that hewee 

It's always good to know I am not the one causing the problems  . haha.

Does anyone know why things would display perfectly in BOTH Firefox and Netscaped but NOT IE?

- My site isn't designed to be viewed with IE, but unfortunately I need to make it work so the rest of the world can find me.

Late,


----------



## Shadow2531 (Apr 30, 2001)

In your first table, you have height="".

On a side note, IE and Firefox by default have a body margin of 8px and body padding of 0px;

Opera follows according the spec and uses a body margin of 0px and a body padding of 8px;

To make things look the same across browsers (if you want to use default body margins), do this.


```
body {
    margin: 0px;
    padding: 8px;
}
```


----------



## AvvY (Oct 8, 2004)

I put that code into the CSS part in the head of the index.html file - but still no difference. I'm still not sure about the padding things you mention - I am not 100% sure of all this html code, I only know basic stuff.

- I uploaded the new version with the code in the head to the server so you can see what I did.

Late,


----------



## Shadow2531 (Apr 30, 2001)

Remove the part in red for starters.


```
<td align="center" width="100%">
    <img src="/images/bannerlogo.jpg"  width="100%" [color=red]height=""[/color]>
</td>
```


----------



## Shadow2531 (Apr 30, 2001)

Also, for IE, set the iframe height to a fixed size instead of a percentage.

To make use of percentages, the percentage has to be based on on a fixed size somewhere (usually its parent) and IE's not finding a base for calculations.


----------



## AvvY (Oct 8, 2004)

The reason why the banner img code is like that, is because otherwise the banner image gets stretched hight ways.

What is the equivilant in pixels to 100%?

Late,


----------



## Shadow2531 (Apr 30, 2001)

If the image gets stretched, set a fixed height for it.

100% height for the iframe would be the height of the cell that it's in.

And the height for that cell is going to be based on it's content and it's parent etc.


----------



## Shadow2531 (Apr 30, 2001)

You can get rid of the dtd uri in your doctype to put IE in quirks mode and it'll work, but that will also put other browsers in quirks mode and mess things up.

You may have to use IE-specific code. Or better yet, get rid of the tables and use a css layout.


----------



## AvvY (Oct 8, 2004)

I originally used a CSS templated but that didn't do what I needed. I wanted pages to be able to load independantly of the navbar and such so it would save loading time and make it easier to manage site content.

My friend made me that iframes setup which does the job I wanted it to do. I know basic CSS but I'm not sure I know enough to make a full layout - at least, wouldn't I still need to use iframes so that pages loaded within the content space independatly of the outter navbar and banner image?

Late,


----------



## Shadow2531 (Apr 30, 2001)

There's most likely a way to fix the IE problem. I haven't had a change to investigate a whole lot yet.

An alternative to iframes is using javascript and XMLHttpRequest methods. However, only the newest version of browsers support that and if javascript is turned of, it wouldn't work.

Anyway, to get IE to honor the 100% height, the table that it is in needs to have a fixed height.

Or, if you make the body have a position of absolute, with a height of 100% and the main table have a height of 100%, the 100% height of the iframe will be honored in IE.

Here's an example to show how you can get IE to honor the height of the iframe.


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
    <head>
        <title>IE Iframe height test</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <meta http-equiv="content-style-type" content="text/css"/>
        <meta http-equiv="content-script-type" content="application/x-javascript"/>
        <meta http-equiv="content-language" content="en-us"/>
        <style type="text/css">
            body {
                margin: 0px;
                padding: 8px;
                position: absolute;
                height: 100%;
                color: #000;
                background-color: #fff;
            }
            #main_table {
                height: 100%;
                width: 100%;
            }
            #main_table #iframe_cell {
                height: 100%;
            }
            #iframe_cell iframe {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <table id="main_table">
            <tr>
                <td id="iframe_cell">
                    <iframe src="http://burgerwiththelot.com/home.html">
                        <div>Your browser does not support iframes.</div>
                    </iframe>
                </td>
            </tr>
        </table>
    </body>
</html>
```


----------



## AvvY (Oct 8, 2004)

Ok well I made some modifications based on your code and I have some progress. I changed the following:


```
<td align="center" valign="top" width="80%"><!--webbot
                bot="HTMLMarkup" startspan --><iframe name=content height=100% width=100% src="home.html"></iframe><!--webbot
                bot="HTMLMarkup" endspan --></td>
            </tr>
        </table>
        </center></div></td>
```
to instead use your code:


```
<table id="main_table">
            <tr>
                <td id="iframe_cell">
                    <iframe src="http://burgerwiththelot.com/home.html">
                        <div>Your browser does not support iframes.</div>
                    </iframe>
                </td>
            </tr>
        </table>
```
Which now works - but the positioning of the box is wrong. When I added the CSS code you suggested it didn't show the box at all. To see what it looks like I uploaded the page to here: http://burgerwiththelot.com/beta/

It displays the box the way it should in IE now, I just need to shift its positoning which I don't know how to do.

Also, the banner image doesn't display properly. You can see it is ther - very thin line - but no matter what margins I set for the image it doesnt work. I changed its sizes to the actual image pixel size, but it won't work in IE - has it got something to do with the tabel code:


```
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td align="center" width="100%"><img
        src="/images/bannerlogo.jpg"
        width="100%" height=""></td>
    </tr>
</table>
```
???

Thank you ever so much for your help! 

Late,


----------



## Shadow2531 (Apr 30, 2001)

I actually meant that you need to modify the attributes of your existing table so they are more like the example. I did not mean for you to put the iframe in it's own table. Sorry about that.

I'll check it out though. There are lots of ie-specific css tricks and IE specifc comments that you can use. I do not know many because I do not worry about ancient browsers like IE.

I'll investigate more.

To get the image to display in IE, change the height of the image from height="" to height="122px" as that's the height of the image anyway.


----------



## Shadow2531 (Apr 30, 2001)

I couldn't get the IE height problem fixed with the table layout.

Using a div layout, IE can accept the height, but since IE doesn't support min-width, the div layout breaks.

So I'll call it quits and leave you with this XHTML 1.0 frameset version.

The borders for the frames are turned off, but to turn them off, I had to break the rules.

(Basically, no browser follows the border rules correctly)

Anyway, if you have trouble getting the source for each of the frames, you can just download the files to see what's going on.

Now frames are not considered the best thing to use , but using frames will allow you to easily support ol' IE in this situation.

Again, I don't know all the IE-specific workarounds, but if you want IE workarounds, you should look at setting up IE7 on your site. It basically, loads a bunch of scripts for the page etc. to fix all the problems IE has and its lack of css support.


----------



## AvvY (Oct 8, 2004)

Wow! Thank you so much! I reallyy appreciate all the work you have done, thank you thank you! I will work on this later on when I have some time 

Thanx again!

Late,


----------



## AvvY (Oct 8, 2004)

Shadow2531,

Thank you again for all your help, everything is working 110%! Just if you are interested as a follow-up, I have made all the changes needed and the site is now running with the new format you ever so kindly did for me - with a few minor alterations to suite the setup. Thanx!  All the best,

Late,


----------



## Shadow2531 (Apr 30, 2001)

O.K. I had time to think about it.

Here's a basic table design that looks like your framed version. Oh and btw, I took care of the iframe height problem in IE.

It's XHTML 1.0 Transitional compliant. (needed to be transitional instead of strict to allow for the target= on the links).

The css is also valid.

A few tips.

Attribute names and tag names should be lower case.
Attribute values need to be in quotes.
Tag names need to be in lower case.

[wrong]
google



google


etc.

tags, <img> tags, tags, 
tags don't requre end tags. In XHTML, they are considered empty tags and for emtpy tags, you but a / before the >.

Also, img tags require an alt attribute. If you don't want anything in it, you can just add alt="";

[wrong]









<br */*>









Also, in XHTML, most attributes for tags are not defined for the tag itself and you must use css.

That means, there's no width="" or height="" for cells or divs etc.

For example, width, height and border for just about everything should only be set with css. You can of course use the style attribute for each tag to put the css in there, but even that is deprecated.

Also, everything can be set with css for tables too, but IE doesn't support border-spacing for tables so you have to stick with the cellspaicng attribute for table tags.

Also, when you set a width or height for something, make sure it has a unit.

style="width: 345" will be ignored in certain situations because it doesn't have a unit on it.

I noticed you had html 4.01 images to show that the page is valid. You should make sure you page is valid before displaying them.

Also, if you are going to use xhtml, it'd be better to use the xhtml image on this page and the css image on this page

Always goto http://validator.w3.org and check your page. Once it shows that it is valid, click on the link to check your css too.

That should get your started.

(It's still ok to use html 4.01, but it's quite old. Like IE  )​


----------



## AvvY (Oct 8, 2004)

> I noticed you had html 4.01 images to show that the page is valid. You should make sure you page is valid before displaying them.


Well I did have the site valid for a while, then I buggered the code and the main index page code got messy - as for all the content pages, they are all 100% HTML and CSS valid - so it is fair enough to display the images  .

As for the rest - I have been playing around with the new xhtml file u created, and I am slowly working it out - it is different to html which is somewhat confusing, but i will figure it out.

What is the pros and cons of using this xhtml version as upposed to the other frame version you wrote up for me? - Its just that I found the first code easier to use, although this new one has some extra benefits. I will try and work more on it later when I have time and I will get back to you on it.

Thanx again for doing all this fantastic work! 

Late,


----------



## Shadow2531 (Apr 30, 2001)

bigavvystyle said:


> What are the pros and cons of using this xhtml version as opposed to the other frame version you wrote up for me? - Its just that I found the first code easier to use, although this new one has some extra benefits. I will try and work more on it later when I have time and I will get back to you on it.


Framed version:

You have to consider search engine problems.
Framespacing problems. Each browser has a different goofy way of dealing with framespacing. Getting rid of framespacing involves breaking the spec. Not only that, If you hide the framespacing and frameborders, you kind of defeat the purpose of a frameset.
Although you are dealing with multiple pages, it can make things easier because you are just including pages in windows.
A lot of people have frames turned off

Table version:

It's just one page with an iframe and in this case at least, it's still pretty simple.
You don't have the framespacing problem.
Using a table for layout purposes defeats the purpose of a table.
You don't have the problem with search engines like you do with frames.
A lot of people disable iframes, especially since most ads are loaded in iframes.
For any type of frame, browsers are picky for security reasons, so if do things with javascript, they might not work. (depends of course)

As for HTML or XHTML, it's not going to make much difference if you don't validate your pages. XHTML is very strict and forces you to use css more. XHTML looks nicer.

Now, to actually see the benefits of XHTML, you need to serve it as application/xhtml+xml instead of text/html. Doing that tells the browser to use its XML parser to render the page. That means, no errors allowed. The code has to be 100% correct or it won't render (or will render up to the error).

If you do serve XHTML as application/xhtml+xml, you automaticallly alienate IE because poor IE doesn't support application/xhtml+xml. You also alienate any text browser that can't handle application/xhtml+xml.

Also, the methods used for javascript are more strict with that mime type.

More and more people are serving as application/xhtml+xml and forgetting about IE. Some do make effort to serve IE a text/html version of the page.

For example, http://www.literarymoose.info/ .

Modern browsers get the XHTML 1.0 strict application/xhtml+xml version of the page and IE gets a text/html version.

XHTML 1.0 is a standard now and HTML 4.01 is old. Even if you are serving XHTML 1.0 as just text/html, that's still good. You need to know XHTML for today and tomorrow.


----------



## Shadow2531 (Apr 30, 2001)

Here's a css layout version of the page. If you view the source, you will see that it uses even less code than the table version and that the css is loaded in an external file.

A css layout version would be ideal, but you might run into layout breakage in IE.If you view the css version about in IE, you'll see IE's nasty resize bug.

With the css/div layout, the only real downside is IE and other old browsers.

Stick to the frameset version though if you like it.


----------



## AvvY (Oct 8, 2004)

So basically, no matter what type I use it wont work for people because some will be using IE which is a monster, or will have their own custom settings which will make the page unviewable... So - based on you having MUCH more knowledge than I - XHTML is the way to go, and I just have to accept that IE won't like it?

Late,


----------



## Shadow2531 (Apr 30, 2001)

I wouldn't say that. 

The table layout and the frameset page both work in IE. Extra work just had to be done for IE.

Also, millions of pages work in IE. Lots of css layouts work in IE too, but lots of them break.

As for frames; yes people can turn them off (in any browser), but if you have proper alternate text they'll know that a frame was supposed to load and they can turn frames on if they want.

Just basically saying that IE can hold you back on what you want to do or make a simple layout a pain. 

MS will be releasing IE7 for XP users soon enough. Maybe it'll have better css support and support xhtml served as application/xhtml+xml.

As for IE not liking XHTML, it will deal with it fine if it's served as text/html, which you'd do if you want to support IE. It's standard css support that it lacks.


----------

