# Web design question (iframes, css)

**URL:** https://boards.straightdope.com/t/web-design-question-iframes-css/254617
**Category:** Factual Questions
**Created:** [July 11, 2004, 10:57pm UTC](https://boards.straightdope.com/t/web-design-question-iframes-css/254617 "2004-07-11T22:57:04Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Trigonal\_Planar](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Trigonal\_Planar](https://boards.straightdope.com/u/Trigonal_Planar)
#### Post date: [July 11, 2004, 10:57pm UTC](https://boards.straightdope.com/t/web-design-question-iframes-css/254617/1 "2004-07-11T22:57:04Z")

</div>

I have an iframe that I’ve made transparent:

\<IFRAME  
src=“bla.html”  
width=350  
height=250  
style=“filter:alpha(opacity=80);”\>  
\</IFRAME\>  
This works great, except the entire content of bla.html comes out transparent. I want the iframe control itself to be transparent, but I want the content (ie, the text and images within bla.html) to come across solid. Any ideas how I could accomplish this?

---

<div class="post-metadata">

### Author: ![Trigonal\_Planar](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Trigonal\_Planar](https://boards.straightdope.com/u/Trigonal_Planar)
#### Post date: [July 11, 2004, 10:58pm UTC](https://boards.straightdope.com/t/web-design-question-iframes-css/254617/2 "2004-07-11T22:58:56Z")

</div>

[This webpage](http://www.kalisti.com/test/) demonstrates the effect. Look at the grey floating frame on the right. Its transparent but the text is not.

I’ve looked at the guy’s source, but there are so many other effects going on that I can’t parse it.

---

<div class="post-metadata">

### Author: ![Khadro](https://avatars.discourse-cdn.com/v4/letter/k/f07891/32.png) [@Khadro](https://boards.straightdope.com/u/Khadro)
#### Post date: [July 12, 2004, 12:06am UTC](https://boards.straightdope.com/t/web-design-question-iframes-css/254617/3 "2004-07-12T00:06:39Z")

</div>

The area on the right, the one that contains “hiking tips”, “about me”, “local trails” etc, is not an iframe.

If you resize the text so it’s too large for the container, it will break the bounds, rather than disappearing or adding scrollbars.

The one on the right is simply a DIV called “menu\_block”. I guess you could use that effect, and have “overflow: scroll” in your style declaration.

What he seems to have done though, is to create a separate DIV element that is the exact height required to fill the menu (the size of the outside div, minus the border-widths, and the height of the top controls), and given that a background, and an opacity of 80%. The three different variations on filters there are all doing the same thing, just for different browser levels.

```auto

filter: alpha(opacity=80);  

```

is simply the way it SHOULD be done, the

```auto

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);   

```

and

```auto

-moz-opacity: 0.80; 

```

are browser extensions that are added by MS and Mozilla in order to get them to work.

Because he declared that DIV element before the text, it will be rendered beneath it. If he declared it after the rest of the contents, the background would be on top, and the text would be seen through it.

If you notice also, the iframe on the left that has the scroll controls on it, the controls are also 80% transparent in IE. Mozilla and other browsers ignore styles that try to act on the scrollbars, reasoning (for good or ill) that they are part of the window, not the web page itself, and should therefore be outside the realm of CSS.

---

<div class="post-metadata">

### Author: ![Khadro](https://avatars.discourse-cdn.com/v4/letter/k/f07891/32.png) [@Khadro](https://boards.straightdope.com/u/Khadro)
#### Post date: [July 12, 2004, 12:15am UTC](https://boards.straightdope.com/t/web-design-question-iframes-css/254617/4 "2004-07-12T00:15:22Z")

</div>

I forgot to finish.

I am not sure that it’s possible to do what you want. You will not be able to get transparent controls under anything but IE.

You could try playing around with the scrollbar attributes in IE, but AFAIK they are all related to simply coloring them. Maybe making it part of the color scheme will be enough to get by with?

I would love to be corrected though. I can think of a few places an effect like this would look very nice.

---

<div class="post-metadata">

### Author: ![Trigonal\_Planar](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Trigonal\_Planar](https://boards.straightdope.com/u/Trigonal_Planar)
#### Post date: [July 12, 2004, 12:37am UTC](https://boards.straightdope.com/t/web-design-question-iframes-css/254617/5 "2004-07-12T00:37:43Z")

</div>

Not sure I quite follow your last post. Using the code I have does in fact render the entire iframe partially transparent - that includes the scrollbar portion. This is fine - I want the control transparent. What I don’t want is the text/images used as the source html for the iframe; however the background should still be transparent.

It very well may not be possible. I don’t really understand css inhereitance…is it possible to have to a sublevel CSS definition that doesn’t inherit the filter style?

---

<div class="post-metadata">

### Author: ![Trigonal\_Planar](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Trigonal\_Planar](https://boards.straightdope.com/u/Trigonal_Planar)
#### Post date: [July 12, 2004, 12:55am UTC](https://boards.straightdope.com/t/web-design-question-iframes-css/254617/6 "2004-07-12T00:55:14Z")

</div>

Here’s a link to my experimental page:

[Transparent Iframes](http://www23.brinkster.com/boxofstupid/csstest4.html)

Don’t worry about what everything else looks like…just notice the iframe I have in the center.

Also, its likely none of this will work in non-IE browsers. I haven’t bothered with compatibility yet.

---

<div class="post-metadata">

### Author: ![Vision\_of\_Love](https://avatars.discourse-cdn.com/v4/letter/v/5f8ce5/32.png) [@Vision\_of\_Love](https://boards.straightdope.com/u/Vision_of_Love)
#### Post date: [July 12, 2004, 1:43am UTC](https://boards.straightdope.com/t/web-design-question-iframes-css/254617/7 "2004-07-12T01:43:05Z")

</div>

I’ve done this before. Learned it on–get this–teen-made webdesign tutorials. 🙂

[JennysPage.net - Transparent iFrames](http://www.jennyspage.net/transiframes.html)  
Just look at the last two textboxes for the code. The top two lead to a lightening of your text, which you indicated you didn’t want. Note: I think there’s a typo in that last textbox… I don’t think the “none” should be there, it should only be "transparent, IIRC.

[JennysPage.net - Transparent scrollbars](http://www.jennyspage.net/transscroll.html)  
Pretty cool effect.