Hi

 

We have noticed that the rendering of CSS within the editor does not seem quite right.

Problems we are having are...

 

1. Fonts seem much bigger than they should, which throws out alignment of text and graphics.

2. When using divs and placing them side by side they all appear below each other.

3. When Placing text round an image using the float thingy it doesnt flow round it.

4. Some inline styles work whereas others dont, highlight works below but blue doesnt!

 

In firefox 1 and 2 seem ok, but it still fails with 3 and 4.

 

I have pasted some html which show 3 and 4 not working.

When pasted in dreamweaver or the final html it works fine.

The below example uses inline styles but we have the same problem when using the EditorwysigmodeCss property to point to an external css file.

 

Are there any workarounds to make CSS work properly?

I am really hoping that this is improved in Version 6 along with other things....

When is version 6 due out now???

 

 

<style type="text/css">
    <!--
.left {
      float: left;
      margin-top: 0px;
      margin-right: 1em;
      margin-bottom: 0px;
      margin-left: 0px;
}
.blue {
      color: #0000FF;
      font-weight: bold;
      background-color: #FFFFFF;
}
.highlight {
      font-weight: bold;
      color: #333333;
      background-color: #FFFF00;
}
-->
  </style>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tempus auctor ipsum. Sed imperdiet condimentum magna. Morbi accumsan elit congue neque. Mauris hendrerit orci eu arcu. Donec arcu justo, volutpat sed, imperdiet nec, dignissim ac, dui. Vestibulum consequat tempus turpis. Donec sed justo. Quisque in nunc at enim porta dictum. In hac habitasse platea dictumst. Phasellus ullamcorper ullamcorper eros. Nulla enim augue, faucibus sit amet, ornare at, nonummy eu, diam. Curabitur lacinia. Proin lacus dui, blandit eget, iaculis a, viverra a, elit. Nullam semper. Nulla facilisi. Sed fermentum. Vivamus justo. </p>
<p>Vivamus erat. Aliquam commodo leo in turpis. <span class=highlight>Suspendisse potenti.</span> Suspendisse pharetra, ante sit amet ornare sollicitudin, lorem nisl congue elit, a porta leo velit vitae magna. Fusce turpis. Donec sagittis, nibh id tempor vehicula, est nunc pulvinar leo, ac tempor pede sem nec libero. Etiam pellentesque, risus in vulputate vestibulum, velit nunc tincidunt dui, ac semper sem nisl a mi. <span class=highlight>Praesent sem.</span> Curabitur ut libero id libero condimentum adipiscing. Integer purus mi, pretium ac, mollis id, faucibus vel, turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec ornare felis. Cras urna eros, mollis egestas, iaculis et, semper ac, nibh. Nullam rhoncus massa eget justo. <span class=blue>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris lacus. Sed faucibus orci id sapien. Proin et magna. Donec mi diam, pellentesque at, suscipit vitae, condimentum sed, massa. </span></p><img class=left height=234 alt=/@@autoalt/9083@@@ src="previewfile.ashx?id=9083" width=200 border=0>
<p>Proin nisi metus, facilisis id, hendrerit vel, posuere in, nisi. Maecenas nec leo. Mauris diam. Aenean suscipit accumsan diam. Duis eget odio. Integer at lacus in leo volutpat tempus. Fusce eget lorem in quam accumsan rutrum. Pellentesque mattis tortor tristique elit. Aliquam erat volutpat. Fusce congue, eros quis molestie dignissim, massa tortor faucibus arcu, in ullamcorper lectus metus vel diam. Ut pellentesque. Integer a metus. Etiam tristique diam tincidunt purus. Vestibulum id lacus sit amet metus luctus faucibus. Maecenas semper porttitor arcu. Aenean gravida eleifend quam. Morbi commodo, nibh at tincidunt ullamcorper, libero turpis pellentesque lorem, at varius tortor sapien et tellus. </p>
<p>Praesent at ipsum. Aliquam feugiat posuere neque. Vivamus lectus. Cras egestas sapien a lectus. Pellentesque eros magna, interdum et, mattis ut, tincidunt eget, risus. Aliquam placerat consectetuer massa. Suspendisse a turpis sit amet est porttitor tristique. Vivamus mattis. Donec sodales mattis dui. Nullam eu purus nec leo commodo rhoncus. Praesent condimentum. Duis in mauris. Vivamus nec libero. </p>
<p>Pellentesque rhoncus, orci non venenatis venenatis, neque leo vestibulum nisl, laoreet cursus felis mauris ultricies quam. Aliquam condimentum volutpat dui. Fusce condimentum lacus non massa. In vel orci. Sed tincidunt lectus ac arcu. Integer commodo aliquet arcu. Aenean volutpat mi a arcu nonummy consequat. Nam a urna id nisl vehicula laoreet. Quisque ante nisi, malesuada sit amet, convallis at, sagittis sit amet, nisi. Etiam pretium. Aenean ultrices diam eget metus. Aliquam erat volutpat. Duis et ligula nec augue viverra pharetra. Maecenas venenatis nunc ac risus. Duis et ligula eu ligula consectetuer bibendum. Mauris lacus libero, porttitor sed, pharetra vel, porta id, tortor. Morbi vitae nulla. Nunc ipsum dolor, mollis sit amet, pellentesque vel, tempus in, diam. </p></div>

>>2. When using divs and placing them side by side they all appear below each other.

 

DIV is a block level element. It should alway appear below each other. Try copy the following code into any HTML page and test it in your browser.

 

<div>Div 1</div>
<div>Div 2</div>

 

For more information, please check the following article:

 

>>1. Fonts seem much bigger than they should, which throws out alignment of text and graphics.

 

Font size and font family are controled by your own style sheet. Try put the content into a separate HTML page and test it untill you find the idea solution for your situation.