Designing frames using CSS?

[anulaibar]

Hi!

I want to design my frameset in CSS, so instead of writing

<frameset frameborder=0 border=0 framespacing=0 noresize frame scrolling=no>

I want to write something like

frameset {frameborder: 0; border: 0; ...}

And the same goes for frames. Does anyone know how to do this?

Thanx,
Olle

[SuzyUK]

Hi anulaibar and Welcome to WW

In theory yes you can, but the practicality is somewhat different

here is a quote from blooberry.com research into the support of CSS for frames:

* CSS: Before IE v5.5 Beta 1, FRAMEs and IFRAMEs could not use the 'z-index' property (they would always be on the "top" of the rendering surface and nothing could be placed "above" them) and could not be transparent (such that content from positioned content beneath would "shine through".) Beginning in IE v5.5 Beta 1, these capabilities now exist.

* Netscape 6 and CSS: Even though support for the %Core% attributes is listed here, in direct testing it seemed that VERY few CSS properties could successfully be applied to this element.

if it's any help I found that using the "normal" HTML properties to set the main settings on the <frameset> element then it's easier to customise the individual <frame> elements...as frameset didn't want to accept border: 0px; and I don't think there's an equivalent of the "framespacing" attribute

e.g. this example shows the same effect being achieved on the two frames one the usual way, the other the external way
CSS:

frame.test{
overflow: auto;
border-width: 3px;
border-style: dashed;
border-color: #000080;
}

Frameset:

<frameset cols="150,*" frameborder="0" framespacing="2">
<frame name="contents" target="main" scrolling="auto" style="border-width: 3px; border-style: dashed; border-color: #000080">
<frame name="main" class="test">
<noframes></noframes>
</frameset>

Suzy

<edit>sp</edit>

[DrDoc]

There were two threads a little while ago on a similar subject: How to emulate frames using CSS.

[webmasterworld.com...]
[webmasterworld.com...]

I have since then improved the CSS to work better in browsers that support overflow:auto in combination with position:fixed.

I can post the updated code if you're interested.