How to remove gaps between FRAMEs without hurting HTML validity?
Question
I know frames are bad. However I have to stick with them a little longer. My problem comes from the non-standard "border" attribute of the "frameset" element:
<frameset border="0">
...
</frameset>
If I don't use that attribute browsers put a gap between each frame. If I use the attribute, HTML validators throw error about "unsupported attribute".
Now I hear you saying "use it and ignore the validator", that's fine. I think I can live with one validator warning, and browsers seem not too worried about it either :)
My question is mostly about HTML trickery. How can I set border to 0 and yet stay browser compatible? Think of this as an exercise for similar problems in the future. For instance I tried:
<frameset onload="this.border='0'">
and it didn't work.
I tried using stylesheets in inner frames to set "border:0;margin:0;padding:0", it didn't work either. Gap seems to come from an unknown source.
I thought of writing in Javascript like:
document.write('<frameset border="0">');
But I have a hunch that it wouldn't validate anyway.
Can you think of an alternate solution?
Other solutions that didn't work:
- @Donut: "frameborder" attribute on either "frame" or "frameset" elements
- @kangax: frameSetObj.setAttribute('border', 0);
Solution
According to my tests, these should work :
For Opera (10) :
frameSetObj.setAttribute("framespacing", "0");
For IE8 :
frameSetObj.setAttribute("framespacing", "0");
//set rows and cols attributes again if the frameset already had them.
frameSetObj.setAttribute("rows", rows);
frameSetObj.setAttribute("cols", cols);
For FireFox 3.5 and Chrome 3
frameSetObj.setAttribute("frameborder", "0");
//same idea as IE8
frameSetObj.setAttribute("rows", rows);
frameSetObj.setAttribute("cols", cols);
To summarize, this code should work on every browser:
frameSetObj.setAttribute("framespacing", "0");
frameSetObj.setAttribute("frameborder", "0");
frameSetObj.setAttribute("rows", rows);
frameSetObj.setAttribute("cols", cols);
OTHER TIPS
Use the frameborder
attribute on your frame
tags instead of border
on the frameset
tag. According to the HTML spec, there is no border
(or frameborder
) attribute defined for frameset
tags.
In fact, all of the the W3C's page on frames is worth checking out. The example found there might be helpful to take a look at. You'll also want to make sure you're using a correct DOCTYPE
.
In the example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">