CKEditor - broken layout in IE when specific CSS is used on a web site

[Wiktor Walc]

It is quite a common scenario when content of a page is placed inside of a div with some id ("main", "wrapper") and CSS rules are defined for that div.

For IE we're creating "accessibility label" using label and fieldset. Unfortunately, it is possible to accidentally change the style of those elements and make CKEditor looking strange or even unusable.

Steps to reproduce

• take the replacebyclass sample
• in the head section add the following:

  	<style type="text/css">
  	#main fieldset {padding:20px; margin:20px; width:400px}
  	#main legend {padding:40px; margin:40px; width:400px}
  	</style>
  

• put the form element inside of <div id="main">:

  	<div id="main">
  	<form action="sample_posteddata.php" method="post">
  			<p>
  				<label for="editor1">
  					Editor 1:</label><br/>
  				<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  			</p>
  			<p>
  				<input type="submit" value="Submit"/>
  			</p>
  		</form>
  	</div>
  

• save the sample and lauch it in IE
• result: the editing area is broken.

[Frederico Caldeira Knabben]

It looks like we have problems with the inheritance order of CSS rules, where the in-page styles are overriding the reset rules.