NOTE: You should never use a hack/filter in a page unless there just isn't any other choice. The following cross-browser filter is your only choice. Now Internet Explorer users can use framespacing="0" in their frameset page and the page will still validate.
On nearly every web design formum I have seen atleast one question about how to validate a frameset page. You probably think that it shouldn't be any more difficult than validating any other page in your site. That would be true if Microsoft followed the HTML/XHTML standards.
You see Internet Explorer browser allows you to change the spacing between HTML/XHTML frames. That wouldn't be a problem if they had made the default value framespacing="0". However in their infinite wisdom they made it framespacing="2".
To fix this problem web designers have always had to either put it in the <frameset> tag and leave their page unvalidated or left it out and not worried if Internet Explorer users had a space in the frames or not. The problem with the space is it is often colored differently than the background color of each frame. Do you want a thin stripe down or across your page? The space between the frames uses the color you set in your computer's system settings on your desktop.
<p>Well I figured out how to fix the problem. It's really quite simple. You make two sets of <frameset> code. The first one has framespacing="0" attribute in it and the other one doesn't. The first set is surrounded with Internet Explorer's Conditional Comments
http://www.javascriptkit.com/howto/cc2.shtml
Internet Explorer will read the first <frameset> code and stop at </frameset>. Then all other browsers will jump past the first one and load the second one. When you validate the page the validator will ignore the Internet Explorer Frameset Filter and validate the second framset code instead.
Below are two examples. One is for the XHTML 1.0 Frameset DTD and the other is for the HTML 4.01 Frameset DTD. Both examples will validate just fine.
XHTML 1.0 FRAMESET DTD
Code:
<!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" xml:lang="en" lang="en">
<head>
<title>Validating Frameset</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<!-- Begin Internet Explorer Frameset Filter -->
<!--[if IE]>
<frameset rows="20%,80%" cols="100%" framespacing="0">
<frame name="top" src="menu.htm" scrolling="no" noresize="noresize" frameborder="0" />
<frame name="bottom" src="main.htm" scrolling="no" noresize="noresize" frameborder="0" />
</frameset>
<![endif]-->
<!-- End Internet Explorer Frameset Filter -->
<!-- All Other Frames Capable Browsers Will Load This -->
<frameset rows="20%,80%" cols="100%">
<frame name="top" src="menu.htm" scrolling="no" noresize="noresize" frameborder="0" />
<frame name="bottom" src="main.htm" scrolling="no" noresize="noresize" frameborder="0" />
<noframes>
<body>
All screen readers and text only browsers will load this. Place links here to your other pages or menus for screen readers and text only browsers. Be sure to put the title attribute in the links and use ALT attribute in any images you use. Also use summary="" in your tables.
</body>
</noframes>
</frameset>
</html>
HTML 4.01 FRAMESET DTD
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Validating Frameset</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<!-- Begin Internet Explorer Frameset Filter -->
<!--[if IE]>
<frameset rows="20%,80%" cols="100%" framespacing="0">
<frame name="top" src="menu.htm" scrolling="no" noresize="noresize" frameborder="0">
<frame name="bottom" src="main.htm" scrolling="no" noresize="noresize" frameborder="0">
</frameset>
<![endif]-->
<!-- End Internet Explorer Frameset Filter -->
<!-- All Other Frames Capable Browsers Will Load This -->
<frameset rows="20%,80%" cols="100%">
<frame name="top" src="menu.htm" scrolling="no" noresize="noresize" frameborder="0">
<frame name="bottom" src="main.htm" scrolling="no" noresize="noresize" frameborder="0">
<noframes>
<body>
All screen readers and text only browsers will load this. Place links here to your other pages or menus for screen readers and text only browsers. Be sure to put the title attribute in the links and use ALT attribute in any images you use. Also use summary="" in your tables.
</body>
</noframes>
</frameset>
</html>
HORIZONTAL SCROLLBARS
After you get your frameset page to validate in the Standards Mode you are going to see a horizontal scrollbar in all of your framed pages when you view them with Internet Explorer. Maybe IE for Mac doesn't do this? I don't know since I don't have it.
There is only one method that will get rid of this horizontal scrollbar. You have to put your page into the Quirks Mode for Internet Explorer and in the Standards Mode for all other browsers. Internet Explorer is the only browser that requires the Doctype to be on the very top line of your HTML/XHTML source code with no space above it. Other browsers don't care if it's down one line or not.
Placing the following HTML/XHTML comment above the Doctype will solve your problem. Don't worry newbies comments don't show up on your page just in the source code.
Code:
<!-- Comment To Put Page Into Quirks Mode For IE and Standards Mode For Other Browsers -->
<!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" xml:lang="en" lang="en">
<head>
AFTER THOUGHTS
I see a lot of people in forums these days that post their frameset code asking why it doesn't validate. Very simple, they didn't take 5 minutes to visit the reference pages. There are a lot of newbies in forums that answer questions that shouldn't be doing so. They give you the wrong answer thinking they now what they are talking about and you end up with bad code that won't validate.
Don't place border="0", border="no", framespacing="yes", or framespacing="no" in a frameset tag or frame tags. Also don't put frameborder="0" in the Frameset tag because it only goes in the Frame tag. They will stop you from validating your page. I see this nonsense everywhere I go. I laugh because I remember doing those same dumb things when I first started on the web back in 1996.
In all forms of HTML it doesn't matter if your HTML tags and attributes have capital letters or not. But I suggest you only use lowercase for two reasons. 1) You may want to convert your pages to XHTML someday. XHTML does not allow you to use capital letters period. Even the Javascript event handlers like onClick when used in XHTML have to be lowercase like onclick. 2) If you use a file name with caps in your source code and the filename in your directory doesn't have caps your file will not load.
Learn HTML/XHTML/CSS the correct way:
http://www.w3schools.com/
http://www.w3schools.com/html/html_reference.asp
http://www.w3schools.com/xhtml/xhtml_reference.asp
http://www.w3schools.com/css/css_reference.asp
DISCLAIMER: The validation method above will NOT get rid of the space between frames for Mozilla and Firefox browsers. But that is a browser bug not a validation problem. I can't solve browser bugs. If the code above crashes your browser or gives you one of those nasty little skin rashes you are on your own.
Subscribe
framespacing="0" problem solved
Linear Mode
