Jump to content

iFrame's CSS


PrateekSaxena
 Share

Recommended Posts

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 :) .

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Thanks...I will try it out soon!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...