Why does html frame behave differently in Firefox and IE8?
I am using html frame on my website, it works for me, generally I only use Firefox to browse the net, my site looks and works fine, but today I suddenly found that IE8 has frame problems on my site. if i click on top menu items it should display content at the bottom of the frame, it does it correctly in Firefox, but in IE8 it displays content at the top of the frame and replaces the menu items.
To provide more details, I'll include a simplified version of my html pages, there are two elements at the top level: the index.html page and the file directory, all pages except 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>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 free from Sun/Oracle at :<Font Size=4> <A Href=http://java.com/en/download/index.jsp>http://java.com/en/download/index.jsp</A></Font>.<P>
</Font></Td></Tr>
</Table>
</Center>
</Body>
</Html>
What's wrong with them, why are the two browsers behaving differently and how to fix it?
My site is located at: http://nmjava.com if you want to see more details.
Franc
a source to share
<Body>
<Center>
<Base target=lower_frame>
This is your specific problem. <base>
allowed only internally <head>
, not as part <body>
. Previous versions of IE allow you to deal with it; IE8 is not. It ignores the misplaced base and leaves links targeting the current frame.
You are more likely to have weirder problems as your markup is invalidated in a lot of really basic ways outside of which it is simply impractical.
a source to share
You can make IE8 behave 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 debug window. This can help you find the problem in your HTML. See which document mode your page is in. If you're in "quirk mode" you're in trouble.
What that says Quoo, right, rethink your design without using a framework.
(source: moveable.com )
a source to share
Your HTML is invalid and IE has been known to disable invalid html causing weird behavior. And to be honest, it's a little tricky to figure out what's going on in your code as it's non-standard. You should familiarize yourself with html best practices - the list is well-resourced ( http://www.alistapart.com/ ) as is w3 (w3.org) and you may find their validator useful (validator.w3.org). To begin with, any attributes in your html tags must be quoted, and html tags must be all lowercase.
Also, to target a different frame, your anchor tag should look like <a href="myurl.html" target="_frameName" />
a source to share