iFrame's CSS

[PrateekSaxena]

Hi guys,I am using iFrames to make a WYSIYG editor. I want the border of the text area in the iframe to be completely gone. But when I say that border:none it does not affect the border at all. But if I wrtie border:solid; border-width:10px;, then a new border is formed around the iFrame. I just want to completely remove the border of the textare and also put some left and right padding to the text that will be written inside the iFrame. How can I do this. Please give even mall piece of information if you have it as I do not have any idea how to do this myself .

[jesh]

Rather than border: none;, you might try:

textarea { border-width: 0px; }

It works for me in Firefox and IE.

[PrateekSaxena]

It is not a textarea...it is an iframe

[jesh]

It is not a textarea...it is an iframe

Hah! I thought you said textarea.Well, changing the above css to iframe { border-width: 0px; } works for me in Firefox but not IE (as I am sure you are aware...). I looked on Google and found this:http://archivist.incutio.com/viewlist/css-discuss/17054

You need to apply these properties from within the _iframed_ document,not within the container document. You can apply the properties as:<style type="text/css"> html, body { border: none ; overflow: hidden ; }</style>

I haven't tried this myself, but it looks like you simply set those properties on the document that you are displaying in the iframe and it'll take care of it. Hope this helps!EDIT: OK, I just tried it and it works. You'll have to put this in the main document so that Firefox doesn't display the border:

iframe { border-width: 0px; }

And then put the above css in the document that you are displaying so that IE doesn't display the border.

[PrateekSaxena]

Thankks....I will try it ourEDITThis is my Js file :

function loadRTE(){	RTE.innerHTML="<div id='menu'></div><div id='buttons'></div><div id='tabs'></div><div id='work'></div><div id='footer'></div>";	work.innerHTML='<iframe id="iView" style="position:absolute;top:5px;left:155px;width:706px;height: 600px;"></iframe>';	iView.document.designMode = 'On'; }

And this is my CSS:

html,body{	padding: 0px;	margin: 0px;	background: #DCDCDC url("img\page.PNG") repeat-y 50% 0;	border: none ;	overflow: hidden ;}textarea{	border: none;	border-width: 0px;;}iframe { border-width: 0px; }

And the grooves of the Textpart of the ifram are still not going

[ScottR]

You need to add frameborder="0" in your iframe code to remove the border on an iframe.ScottSorry I misread your post. I thought you were trying to remove the border on your iframe.

[PrateekSaxena]

Thanks...I will try it out soon!