Html – How to remove gaps between FRAMEs without hurting HTML validity

framehtml

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);

Best Answer

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);
Related Topic