Opened 8 years ago

Last modified 8 years ago

#4921 confirmed Bug

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

Reported by: Wiktor Walc Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: IE Cc:

Description

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.

Change History (1)

comment:1 Changed 8 years ago by 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.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy