In FF, Opera, IE the CKEditor is working and looks great. But in Chrome and Safari it is not sizing correctly, and is extending past the container that it is inside. I assume this is because Chrome and Safari are currently the most standards compliant. See the images below.
Chrome
Opera
I tried removing all of my CSS files to see if it was my css causing the issue, but that did not fix it either. Here is my call to CKEditor
//Make all textareas use the ckeditor
$('textarea.WYSIWYG').ckeditor({
toolbar: [
['Styles', 'Format'],
['Bold', 'Italic', 'NumberedList', 'BulletedList', 'Link']
],
height: 100,
width: "225px",
enterMode : CKEDITOR.ENTER_BR,
resize_enabled: false
});
Any ideas what could cause this?
UPDATE
Here is a VERY dumbed down version of the code still causing the error.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Title</title>
<script type="text/javascript" src="library/javascript/global/JQuery.core.js"></script>
<script type="text/javascript" src="resources/local_javascript/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="resources/local_javascript/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="resources/local_javascript/base.js"></script>
</head><body>
<div id="outerWrapper">
<table id="FAQTable">
<tr id="editingRow">
<td class="fixedWidth">
<textarea class="WYSIWYG" id="FAQQuestionInput" rows="5" cols="1"></textarea>
</td>
<td class="fixedWidth">
<textarea class="WYSIWYG" id="FAQAnswerInput" rows="5" cols="1"></textarea>
</td>
</tr>
</table>
</div>
And here is the new image
