Frames: remove the outer borders in IE; background transparency

**Rain Lover** · 01-14-2012, 07:48 PM

Hi,

Here's a sample frameset:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Sample frameset</title>
</head>
<frameset rows="50%,50%">
  <frame src="http://dl.dropbox.com/u/4017788/Labs/frame_a.html">
  <frame src="http://dl.dropbox.com/u/4017788/Labs/frame_a.html">
</frameset>
</html>

a) How to remove the frames outer borders (NOT the separator resizing border between the frames) that appear in IE?
b) How to set the frames background to transparent?
c) If there aren't straightforward solutions to the above issues, what's a good alternative to the frameset that provides a resizing handle/border? Any different approach?

Many thanks in advance!
Mike

**jscheuer1** · 01-15-2012, 04:09 AM

If those pages aren't on the domain that the frameset is on (or even if they are), some things might not be possible. For transparency though, I'd try the the allowtransparency attribute, set it to true and apply it to both the frameset and the frames:

Code:

<frameset allowtransparency="true" rows="50%,50%">
  <frame allowtransparency="true" src="http://dl.dropbox.com/u/4017788/Labs/frame_a.html">
  <frame allowtransparency="true" src="http://dl.dropbox.com/u/4017788/Labs/frame_a.html">
</frameset>

It's for iframe I think, but it's worth a shot. You can also try style on the frameset page (though I have less confidence in this approach than with the attribute):

Code:

<style type="text/css">
frameset, frame {
	background-color: transparent;
}
</style>

If all else fails, set the background color for the html and body elements on the pages inside the frames to transparent.

It's basically the same deal with borders. You have the border attribute, which you could set to 0. But that would probably take away the ability to resize. Still - try it if you haven't already. Throw in the resizable attribute just for good measure:

Code:

<frameset border="0" resizable="true" rows="50%,50%">
  <frame border="0" resizable="true" src="http://dl.dropbox.com/u/4017788/Labs/frame_a.html">
  <frame border="0" resizable="true" src="http://dl.dropbox.com/u/4017788/Labs/frame_a.html">
</frameset>

You could set the border style. That gives you more flexibility as you can set top, right, bottom, and left borders separately, which might allow you to arrive at what you're looking for:

Code:

<frameset rows="50%,50%">
  <frame style="border: solid: #666; border-width: 0 0 1px 0;" src="http://dl.dropbox.com/u/4017788/Labs/frame_a.html">
  <frame style="border: solid: #666; border-width: 1px 0 0 0;" src="http://dl.dropbox.com/u/4017788/Labs/frame_a.html">
</frameset>

Once again, you can try setting the border style for the html and/or the body elements on the pages in the frames.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.

**Rain Lover** · 01-15-2012, 07:05 PM

Dear John,

Thanks for the ideas! But I'm afraid the <frameset> tag doesn't support the style attribute well and allowTransparency is only understood by IE.

I'm working on Real-time HTML Editor and trying to expand its features and finally embed it on my website. Instead of using a frameset I can simply use a textarea and iframe -- no extra borders, no default white background color, very "styleable". However, a very important quality is missing: I can't resize the iframe and textarea as easily as you see on the frameset. I agree that frames are "evil", but I like the framed layout and the ability to have easily resizable content panels. Any thoughts?

**jscheuer1** · 01-15-2012, 09:24 PM

I guess I was a little confused. I thought you were asking specifically about IE.

Maybe that was only for the border and resizable part. If you have resizable and borders worked out in other browsers, just give them a 1px border in IE if that will give you back resizability in that browser. If others resize without borders, then IE 9 might as well, you should test that.

I don't see any advantage to having these frames transparent. What are you trying to accomplish? Is it a single background change to the frameset page affecting the background of the frames? If so, you can use javascript to change both frame's background at once, or separately if you like. Colors would be easy. Images might require keeping abreast of any change in the size of the frames in order to keep the positioning of the background image in each frame in sync with the other so it looks like one continuous background image behind the two of them, if that's even a consideration. If the images in the two frames don't have to line up with each other, it's as easy as with a color.

I would think you wouldn't want a background image or certain background colors in the textarea frame anyway. It could make it hard to read the text.

Thread: Frames: remove the outer borders in IE; background transparency

Thread Tools

Search Thread

Frames: remove the outer borders in IE; background transparency

Bookmarks

Bookmarks

Posting Permissions