Hi all,I am trying to embed the Yahoo Rich Text Editor in my site. It works fine in FF3 but in IE 7 its positioning is all gone to pot....

 

http://www.lambwatch.co.uk/forum-thread-89...?showinput=true

 

I have literally copied and pasted the code from http://developer.yahoo.com/yui/examples/ed...itor_clean.html ...

 

I apologise that the CSS for the RTE is compressed, but that is how it came... I am convinced it has something to do with strange positioning but I just cant fathom it out. Any advice greatly appreciated! Here is the code:

 

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script>

<div id="thread_response_input" class="yui-skin-sam">


			<textarea id="editor" name="editor" rows="20" cols="75"></textarea>

</div>

<script>
			(function() {
				var myConfig = {
					height: '300px',
					width: '600px',
					animate: true,
					dompath: false,
					focusAtStart: true
				};

				myEditor = new YAHOO.widget.Editor('editor', myConfig);


				YAHOO.util.Event.onAvailable('iconMenu', function() {
					YAHOO.log('onAvailable: (#iconMenu)', 'info', 'example');
					YAHOO.util.Event.on('iconMenu', 'click', function(ev) {
						var tar = YAHOO.util.Event.getTarget(ev);
						if (tar.tagName.toLowerCase() == 'img') {
							var img = tar.getAttribute('src', 2);
							YAHOO.log('Found an icon, fire inserticonClick Event', 'info', 'example');
							var _button = this.toolbar.getButtonByValue('inserticon');
							_button._menu.hide();
							this.toolbar.fireEvent('inserticonClick', { type: 'inserticonClick', icon: img });
						}
						YAHOO.util.Event.stopEvent(ev);
					}, myEditor, true);
				});


				myEditor.on('toolbarLoaded', function() { 
					YAHOO.log('Editor Toolbar Loaded..', 'info', 'example');

					var imgConfig = {
						type: 'push', label: 'Insert Icon', value: 'inserticon',
						menu: function() {
							var menu = new YAHOO.widget.Overlay('inserticon', { width: '165px', height: '210px', visible: false });
							var str = '';

								<?php foreach($Misc->ScanDir($_SERVER['DOCUMENT_ROOT']."/$directory/public/img/smilies/") as $smiley) { ?>
								str += '<a href="#"><img src="/img/smilies/<?=$smiley;?>" border="0"></a>';
								<?php } ?>

							menu.setBody('<div id="iconMenu">' + str + '</div>');
							menu.beforeShowEvent.subscribe(function() {
								menu.cfg.setProperty('context', [myEditor.toolbar.getButtonByValue('inserticon').get('element'), 'tl', 'bl']);
							});			
							menu.render(document.body);
							menu.element.style.visibility = 'hidden';
							return menu;
						}()
					};
					YAHOO.log('Create the (inserticon) Button', 'info', 'example');
					myEditor.toolbar.addButtonToGroup(imgConfig, 'insertitem');

					myEditor.toolbar.on('inserticonClick', function(ev) {
						YAHOO.log('inserticonClick Event Fired: ' + YAHOO.lang.dump(ev), 'info', 'example');
						var icon = '';
						this._focusWindow();
						if (ev.icon) {
							icon = ev.icon;
						}
						this.execCommand('inserthtml', '<img src="' + icon + '" border="0">');
						return false;
					}, myEditor, true);

				});
				myEditor.render();
			})();
			</script>

Pants I forgot to include the CSS:

 

<link rel="stylesheet" type="text/css" href="http://www.lambwatch.co.uk/css/rte.css" />