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>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>http://java.com/en/download/index.jsp</A></Font>.<P>
</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
<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.
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" />
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.
(source: moveable.com)
Related
I'm trying to split html file into 2 different files:
<html>
<head>
</head>
<body>
<frameset cols="25%,75%">
<frame src="addNewEvent.html" />
<frame src="totalEvents.html" />
</frameset>
</body>
</html>
addNewEvent.html:
<html>
<head>
</head>
<body>
Left
</body>
</html>
totalEvents.html:
<html>
<head>
</head>
<body>
Right
</body>
</html>
The 3 files (main html and addNewEvent.html, totalEvents.html) are in the same directory.
(I just learning html, so for now, I'm not using server, and open the main page with the browser.
When opening the main page in the browser, is seems that the addNewEvent.html, totalEvents.html are not loaded. (There is no error in console log)
What an I doing wrong ?
Is it right to split the page into little pages with frameset ?
What an I doing wrong ?
You didn't use a validator which would have told you that a <frameset> element is not allowed inside a <body> element.
Frameset documents have a <frameset> instead of a <body> element. Since the HTML document already had its own <body>, the browser ignored the <frameset>.
Is it right to split the page into little pages with frameset ?
That's largely a matter of opinion. They do cause various issues with how they interact with browser navigation controls and do not exist in HTML 5.
i created mailing but there is a vertical gap between 2 images and i read all solutions about this problem and not solved.
last chance is typing this portal and ask you guys :(
first i open below code on notepad++ and change it then outlook 13 attach file => as a text => then boom vertical gap showing up.
here is my code
<html>
<head>
<title>mailing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1">
<a href="mailto:info#ygtur.com">
<img src="http://yucel.ygtur.com/mailing/erkenrez/images/mailing_12.jpg" style="display: block;"></a></td>
<td colspan="1" rowspan="1">
<a href="http://www.ygtur.com/">
<img src="http://yucel.ygtur.com/mailing/erkenrez/images/mailing_13.jpg" style="display: block;"></a></td>
</tr>
</table>
</body>
</html>
here is the picture of the problem
You could try using css to style the table instead of using border= cellpadding= etc. In fact you already tagged the question as css, so I guess you saw it coming :-)
Perhaps Outlook adds its own css if it does not find any, or the view engine that it uses may apply defaults that you are not expecting.
EDIT:
You have whitespace between the <a href> and <img> tags. You should remove that, it may be the cause of your problem. It wouldn't be a problem if the link had just text, but now it has text(whitespace) + an image, and both will show.
I'm trying to segment the total window into 2 frames.In those two frames I'm trying to load the html page.I'm able to segement an entire window into frames but unable to load a html page within that frame.
My test.html:
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="200, *">
<frame src="/home/divya/html_docs/current/menu.html" name="menu_page" />
<frame src="/home/divya/html_docs/current/main.html" name="main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
Can anyone suggest me about this issue ...
You are putting absolute server paths of the files.
In your case you will get then:
http://yourdomain.com/home/divya/html_docs/current/menu.html
put there urls relative to your test.html file. like: src="current/menu.html"
or if the files are in the same directory just src="menu.html"
I'm trying to embed a pdf into webpage and found a strange phenomenon. When I use this html:
<html>
<head>
</head>
<body marginwidth="0" marginheight="0" style="background-color: rgb(38,38,38)">
<embed width="100%" height="100%" src="some.pdf" type="application/pdf">
</body>
</html>
Everything worked as expected. However, when I insert <!DOCTYPE html> into the first line, my browser only display part of the pdf.
Will anyone explain this strang behavior to me? It took me hours to figure out that it's the doctype line that's causing the problem so I'm really curious why.
Doc types tell validators which version of HTML to use in checking the document's syntax. Here's a list of DOCTYPES that helps explain what each of them do.
You can probably also have the PDF file align & scale itself automatically by wrapping the embed tags with "p align" like this:
<html>
<head>
</head>
<body marginwidth="0" marginheight="0" style="background-color: rgb(38,38,38)">
<p align="center"><embed width="100%" height="100%" src="some.pdf" type="application/pdf"></p>
</body>
</html>
First of all, why use a frame set in the first place you ask?
answer: Because my boss told me.
That been said, I have 2 files. Index.html and Head.html.
Contents of index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Site Title</title>
</head>
<frameset rows="122,*" FRAMEBORDER=NO FRAMESPACING=2 BORDER=0>
<frame name="t" src="head.html" scrolling="no" marginheight="0" marginwidth="0">
<frame name="b" src="http://www.website.com">
</frameset>
<noframes>
<p>You have frames turned off on your browser, please turn it on and reload this page.</p>
</noframes>
</html>
Contents of head.html:
<div style="border-bottom:2px solid #000;height:120px">
<center>This is the frame head.</center>
</div>
The code works fine in all browsers except Internet Explorer 7 and 8 (I don't care about 6). Is there anything I am doing wrong, and if not then can the same effect be achieved without frames and if so how?
#ricebowl If you run the 2 pages you will see that the website trying to be framed does not show up at all in IE but does show up in all other browsers.
i tried in IE 7,it works well.i don't know exactly what is your problems。