views:

72

answers:

3

I use html frame on my webiste, it's been running for I while, usually I only use Firefox to surf the net, my site looks and functions ok, but today I suddenly found IE8 has a problem with the frame on my site, if I click on the top menu items, it's supposed to display the content in the lower part of the frame, it does this correctly in Firefox, but in IE8, it displays the content in the upper part of the frame and replaces the menu items.

In order to give more details, I'll include a simplified version of my html pages, at the top level there are two items, an index.html page and a file directory, all the pages except the index.html are in the directory, so it looks like this :

index.html
Dir_Docs
  00_Home.html
  00_Install_Java.html
  00_Top_Menu.html
  01_Home_Menu.html
  01_Install_Java_Menu.html
  10_Home_Welcome.html
  10_How_To_Install_Java.html

[ index.html ]
<Html>
  <Head><Title>Java Applications : Tv_Panel, Java_Sound, Biz Manager and Web Academy</Title></Head>

<Frameset Rows="36,*" Border=5 Bordercolor=#006B9F>
  <Frame Src=Dir_Docs/00_Top_Menu.html Frameborder=YES Scrolling=no Marginheight=1 Marginwidth=1>
  <Frame Src=Dir_Docs/00_Home.html Name=lower_frame Marginheight=1 Marginwidth=1>
</Frameset>
</Html>

[ 00_Home.html ]
<Html>
  <Head><Title>NMJava Application Development</Title></Head>

  <Frameset Cols="217,*" Align=center BorderColor="#006B9F">
    <Frame Src=01_Home_Menu.html Frameborder=YES Name=side_menu Marginheight=1 Marginwidth=1>
    <Frame Src=10_Home_Welcome.html Name=content Marginheight=1 Marginwidth=1>
  </Frameset>
</Html>

[ 00_Install_Java.html ]
<Html>
  <Head>
    <Title>Install Java</Title>
</Head>

  <Frameset Cols="217,*" Align=center BorderColor="#006B9F">
    <Frame Src=01_Install_Java_Menu.html Frameborder=YES Name=side_menu Marginheight=1 Marginwidth=1>
    <Frame Src=10_How_To_Install_Java.html Name=content Marginheight=1 Marginwidth=1>
  </Frameset>
</Html>

[ 00_Top_Menu.html ]
<Html>
  <Head>Top Menu</Head>
<Body>
<Center>

<Base target=lower_frame>

<Table Border=1 Cellpadding=3 Width=100%>
  <Tr>
    <Td Align=Center Bgcolor=#3366FF><A Href=00_Home.html><Font Size=4 Color=White>Home</Font></A></Td>
    <Td Align=Center Bgcolor=#3366FF><A Href=00_Install_Java.html><Font Size=4 Color=White>Install Java</Font></A></Td>
  </Tr>
</Table>

</Center>

</Body>
</Html>

[ 01_Home_Menu.html ]
<Html>
  <Head><Title>Home Menu</Title></Head>

<Base Target=content>
<Body Bgcolor=#7799DD>
  <Center>
    <Table Border=1 Width=100%>
      <Tr><Td Align=center Bgcolor=#66AAFF><A Href=10_Home_Welcome.html>Welcome</A></Td></Tr>
    </Table>
  </Center>
</Body>

</Html>

[ 01_Install_Java_Menu.html ]
<Html>
  <Head><Title>Install Java</Title></Head>

<Base Target=content>
<Body Bgcolor=#7799DD>
  <Center>
    <Table Border=1 Width=100%>
      <Tr><Td Align=Center Bgcolor=#66AAFF><A Href=10_How_To_Install_Java.html>How To Install Java ?</A></Td></Tr>
    </Table>
  </Center>
</Body>

</Html>

[ 10_Home_Welcome.html ]
<Html>
  <Head><Title>NMJava For Software Development</Title></Head>
<Body>

<Center>
  <P>
  <Font Size=5 Color=blue>Welcome To NMJava For Software Development</Font>
  <P>

</Center>
</Body>
</Html>

[ 10_How_To_Install_Java.html ]
<Html>
  <Head>
    <Title>Install Java</Title>
  </Head>

  <Body>
    <Center>

    <Br>
    <Font Size=5 Color=#0022AE><A Href=http://java.com/en/download/index.jsp&gt;How To Install Java ?</A></Font>
    <Br>
    <P>
    <Table Width=90% Cellspacing=5 Cellpadding=5>
      <Tr><Td><Font Color=#0022AE>
        You need JRE 6 (Java Runtime Environment) to run the programs on this site. You may or may not have Java already installed on your PC, you can find out by going to the following 
site, if you don't have the latest version, you can install/upgrade it, it's free from Sun/Oracle at :<Font Size=4> <A Href=http://java.com/en/download/index.jsp&gt;http://java.com/en/download/index.jsp&lt;/A&gt;&lt;/Font&gt;.&lt;P&gt;
      </Font></Td></Tr>
    </Table>
    </Center>

  </Body>
</Html>

What's wrong with them, why the two browsers behave differently, and how to fix this ?

My site is at : http://nmjava.com , in case you want to see more details.

Frank

+2  A: 

You can force IE8 into behaving like IE7 with this in your HEAD.

<meta http-equiv="X-UA-Compatible" content="IE=7" />

While this does not explain the problem, it is often a quick fix.

In IE8, press F-12 for the debugging window. It can help you find the problem in your HTML. See which document mode your page is in. If it's in "quirks mode", you're in trouble.

What Quoo says is true, rethink your design without the use of frames.

alt text

Diodeus
To add on to this, I don't know if you have given IE8 a DOCTYPE (I notice you don't have one in your code samples above). If you don't have a DOCTYPE defined at the top of your HTML pages, you are going to enter quirks mode in IE8 which will give you some problems. - http://www.alistapart.com/articles/doctype/
JasCav
Thanks for the info !
Frank
+2  A: 

Your HTML isn't valid, and IE is known to trip up on invalid html, causing weird behaviors. And to be honest, it's a little hard to figure out whats going on in your code since it's so non-standard. You should familiarize yourself with html best practices - a list apart is a good resource (http://www.alistapart.com/) as is w3 (w3.org) and you may find their validator useful (validator.w3.org). To start with, any attributes in your html tags need to be in quotes, and html tags should be all lowercase.

Also, to target another frame, your anchor tag should look like <a href="myurl.html" target="_frameName" />

quoo
+1  A: 
<Body>
<Center>

<Base target=lower_frame>

That's your specific problem. <base> is only allowed inside <head>, not as part of <body>. Previous versions of IE let you get away with it; IE8 doesn't. It ignores the misplaced-base and so leaves links targeted at the current frame.

You are likely to have more odd problems, though, as your markup is invalid in a variety of really basic ways, beyond the frames being merely inadvisable.

bobince
Right on ! This is it ! Fixed, thanks !!!
Frank