Forum Moderators: open
Here is my source code, why does Fameborder=0 not remove the border in IE and Firefox for either the valid XHTML, or valid HTML, like it does in Iframes?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Genesis</title>
<link href="mailto:name@example.com" rev="made" />
<link href="/Global.css" rel="stylesheet" type="text/css" />
<link href="Global.css" rel="stylesheet" type="text/css" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="First Middle Last" name="author" />
<meta content="list, of, keywords" name="keywords" />
<meta content="Description" name="description" />
</head>
<frameset class="fs" rows="9%,*">
<frame id="TitleI" class="TitleC" frameborder="0" marginheight="0" name="Title" noresize="noresize" scrolling="no" src="Special_Study.htm" />
<frameset class="fs2" cols="10%,*">
<frame id="StudyI" class="StudyC" frameborder="0" marginheight="0" name="Study" noresize="noresize" scrolling="auto" src="Special_Study_Index.htm" />
<frame id="ScrollI" class="ScrollC" frameborder="0" marginheight="0" name="Scroll" noresize="noresize" scrolling="auto" src="Special_Scroll_Index.htm" />
</frameset>
</frameset>
</html>
[edited by: tedster at 7:45 am (utc) on Dec. 14, 2008]
So in your CSS file - something like:
frame#titleI, frame#studyI, frame#scrollI {border:0;}So why all the frames?
the moment you add color to your pages, both IE and Firefox show a white border around the Frames
This sounds like it might be padding, rather than a border, so do be aware of that in the pages that you are framing.
At any rate, back when I used to code frames, I found that cross-browser happiness could only be achieved for a borderless look with a combination of three separate elements:
1. frameborder="no" - in the frameset tag
2. border="0" - also in the frameset tag
3. frameborder="0" in the frame tag
I doubt that it will all validate to a frameset doctype, but it may give you starting place for some experimenting. Note the variations between "0" and "no" - as well as the deifferent treatment between the frameset tag and frame tag.
I've used the following frameset for the last eight or nine years and seems to work in every browser I've tried. About the only thing I can say is the file should exist (ie, be saved on the drive AND the supporting files are AVAILABLE) for display when tested or the frame areas will display WRONG.
I've also included a suggested NOFRAMES section.
<!-- frames -->
<frameset cols="144,*" frameborder="0" border="0" framespacing="0">
<frame name="menu" src="menu.html" marginwidth="5" marginheight="5" scrolling="no" frameborder="no" framespacing="0">
<frameset rows="64,*">
<frame name="header" src="header.html" marginwidth="0" marginheight="0" scrolling="No" frameborder="no" noresize framespacing="0">
<frame name="splash" src="splash.html" marginwidth="20" marginheight="10" scrolling="Auto" frameborder="no" framespacing="0">
</frameset>
<noframes>
<body bgcolor="#B9DFFF">
No Frames content here
<br>
<!--#include virtual="/includes/ifyouwantthem.html"-->
</body>
</noframes>
</frameset>
After not messing with (i)frames for many years, I'm working with one of these projects right now. Part of it involves completely removing borders (video iFrame.)
Without using deprecated elements marginheight or marginwidth, you should be able to style away the borders:
<iframe id="movie-frame" name="movie-frame" src="some-script.cgi" frameborder="0"></iframe>
#movie-frame {
height: 265px;
width: 426px;
margin: 12px 18px 12px 18px;
padding:0;
border: none;
overflow:hidden;
}
- Border is indeed invalid for frames
- use overflow:hidden to hide scrollbars (You can use overflow-x and overflow-y to hide only horizontal or vertical scrollbars)
- Mind the margins of the actual file in the frame. You wouldn't think so, but zeroing out the iframe document may be the fix:
body { margin:0; padding:0; text-align: center; }
That was actually the problem for me, it worked. :-)
Also, don't be afraid to use HTML 4.01 transitional if your document and server are actually only outputting HTML. (4.01 strict will not validate with iFrames.) There's no real reason to use an XHTML doctype if XHTML is not the content of your document. Details [webmasterworld.com]
border-style: none; margin :0px; padding: 0px; border: 0px; border: none; border: no;
and Framespacing=0 is invalid and does not work either.
And someone asked why all the frames? Well, I am writing a Study Site in many Languages, each with multiple sets of large menus, menus that are easier to load one time into a frame, where the links bring the Data from multitudes of places to the target Frame for Study.
In that context, I have converted Data Files into Unicode, and from Unicode into Unicode UTF-8 files. Many of the Data files has Right to Left Encoding, and many Left to Right Encoding, and the ones that were mixed, caused some of the Sentences and words to come out backwards. I tried Loading just the Text Files into Text Areas where the Students could access them, and Edit the Text, Copy it, and send it with their own Programs Encoding, but FireFox will only load one Chapter or Paragraph into the Text Area, so I need a Script that will allow them to select the next Chapter or Paragraph, and load the Text into the Text Area.
Also if i write dir="rtl" in <TEXTAREA cols="" rows="" dir="rtl"> IE lines the Text up Right to Left, but Firefox does not. Is there any way of getting the Text in the Text Area lined up Right to Left in Firefox, without having to place it in the <HTML dir="rtl"> like so, because that places the Scroll bar on the opposite side of the Window, and not on the opposite side of the Text Area like IE Does. Here is the Code I am working with.
<!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">
<head>
<title>Page Title</title>
<link href="/Global.css" rel="stylesheet" type="text/css" />
<link href="Global.css" rel="stylesheet" type="text/css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function init(){
var extText = window.frames.messageTxt.document.body.lastChild.lastChild.data;
extText = extText.replace(/[\r\n]/g," ");
document.forms[0].txt.value = extText;
}
window.onload=init;
</script>
</head>
<body>
<table class="verse" style="color: black;">
<tr>
<td class="bgskyblue"><b>This is from a Data Text File used for making Bile
Programs, that contain a few errors here and there, because of bad programming,
so we need both Corrections and Variant Readings from MSS.</b>
<p class="j">I converted the Data Texts, and Unicode Text Files, to Unicode
UTF-8 without a byte order mark, (BOM), so that you can copy and Edit these
Files in any Editor that has a Unicode UTF-8 Encoding, and the best Font
to use to make it look like the common Printed Scripture Texts, is Times
New Romans.</p>
<p class="j">If you cannot see the [Various Languages] Letters
on this site, you need to set the Default Character Encoding in your Browser
to UTF-8. In Firefox, go to the Tools menu and click Options, click on Contents,
and next to Fonts and Colors, click on Advanced, and set your Default Character
Encoding to Unicode (UTF-8).</p>
<p class="j">Then to Edit these Files, Simply click inside the window below,
use your cursor to highlight the script, and copy (type Control-c or Apple-c)
the Script into a new file in your text editor (such as Note Pad or Simple
Text or Scribe fire or an E-mail Editor) and save (Control-s or Command-s).
Edit the Text any way you like, and if you have Corrections or Variant MSS
readings, just E-email me the Corrections or Variant MSS Readings in an
attached .txt file, and I will correct the Site here, and the Data Texts
for the Programs. </p>
</td>
</tr>
<tr>
<td class="bgskyblue">
<div class="c">
<table class="verse" style="color: black;">
<tr>
<td >
<form name="copy" class="c">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" />
<br />
<iframe name="messageTxt" src="1_2_3_John/Aramaic/Text/1_John.txt" style="display: none;">
</iframe>
<textarea cols="90" name="txt" rows="20" style="width: 98%"></textarea>
<br />
Did you use this Study? Do you like this
Site? You are Welcome to Study with us anytime!
</form>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
[edited by: tedster at 8:35 am (utc) on Dec. 17, 2008]
