CKEditor 4
Thu, 12/09/2010 - 12:35
#1
rosc0
rosc0's picture
Joined: 07/10/2009
Posts: 8

Background image inline style problem




<div style="width:120px; height:40px; background:no-repeat url('http://static.reddit.com/reddit.com.header.png');">Testing</div>


<div style="width: 120px; height: 40px; background: url(&quot;http://static.reddit.com/reddit.com.header.png&quot;) no-repeat scroll 0% 0% transparent;">Testing</div>


<div http:="" no-repeat="" reddit.com.header.png="" scroll="" static.reddit.com="" style="width: 120px; height: 40px;">Testing</div>


<div http:="" no-repeat="" reddit.com.header.png="" scroll="" static.reddit.com="" style="width: 120px; height: 40px;">Testing</div>











Top
Thu, 12/09/2010 - 18:48
batman42ca
batman42ca's picture
Joined: 27/11/2008
Posts: 46

Re: Background image inline style problem

What happens if you don't use quotes at all in the url? They aren't necessary.
Top
Thu, 12/09/2010 - 20:09
rosc0
rosc0's picture
Joined: 07/10/2009
Posts: 8

Re: Background image inline style problem

The same thing happens.
Top
Thu, 12/09/2010 - 21:29
elentirmo
elentirmo's picture
Joined: 28/04/2010
Posts: 7

Re: Background image inline style problem

Is there a "correct" way to add inline background images that will work in all browsers?
Top
Thu, 12/09/2010 - 21:30
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Background image inline style problem

<div style="width: 120px; height: 40px; background: url(&quot;http://static.reddit.com/reddit.com.header.png&quot;) no-repeat scroll 0% 0% transparent;">Testing</div>



Top
Thu, 12/09/2010 - 21:40
elentirmo
elentirmo's picture
Joined: 28/04/2010
Posts: 7

Re: Background image inline style problem



<div style="width: 120px; height: 40px; background: url('http://static.reddit.com/reddit.com.header.png') no-repeat scroll 0% 0% transparent;">Testing</div>




<div http:="" no-repeat="" reddit.com.header.png="" scroll="" static.reddit.com="" style="width: 120px; height: 40px;">Testing</div>




Top
Thu, 12/09/2010 - 22:12
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Background image inline style problem

You didn't understand what I said.

Look at the html of the page where CKEditor is used, check that it's valid HTML and it's indeed what you need.

How to know if it's a problem in CKEditor?:
Go to source mode, paste your content, switch back to design, and back to code.
If you get the same code that you pasted (minus spacing and new lines) then the javascript is working correctly and you have to look at the php side, check what is sent to CKEditor.
Top
Thu, 12/09/2010 - 23:33
elentirmo
elentirmo's picture
Joined: 28/04/2010
Posts: 7

Re: Background image inline style problem






<div style="width: 120px; height: 40px; background: url('http://static.reddit.com/reddit.com.header.png') no-repeat scroll 0% 0% transparent;">
   Testing</div>




<div style="width: 120px; height: 40px; background: url(&quot;http://static.reddit.com/reddit.com.header.png&quot;) no-repeat scroll 0% 0% transparent;">
   Testing</div>



<html>
<head><script type="text/javascript" src="http://mysite/ckeditor/ckeditor.js"></script>   
</head>
<body>

                     <textarea name="pagecontent"><div style="width: 120px; height: 40px; background: url(&quot;http://static.reddit.com/reddit.com.header.png&quot;) no-repeat scroll 0% 0% transparent;">
   Testing</div>
</textarea>
                     <script type="text/javascript">
                                                <script type="text/javascript">

                        CKEDITOR.replace( 'pagecontent',
                        {
                           uiColor: '#E4E4E4',
                           height : 600
                           
                        });
                     </script>

</body></html>



<div http:="" no-repeat="" reddit.com.header.png="" scroll="" static.reddit.com="" style="width: 120px; height: 40px;">
   Testing</div>


Top
Fri, 12/10/2010 - 15:09
batman42ca
batman42ca's picture
Joined: 27/11/2008
Posts: 46

Re: Background image inline style problem

rosc0 wrote:The same thing happens.


That strikes me as odd. In your original post, you said that firefox was taking the quote character in the url and changing it to &quote;. How can the same thing be happening when you remove the quotes from the url?

And are you suggesting that even when you don't put quotes in the url, quotes are appearing in the database?
Top
Fri, 12/10/2010 - 16:41
rosc0
rosc0's picture
Joined: 07/10/2009
Posts: 8

Re: Background image inline style problem


<div style="width:120px; height:40px; background:no-repeat url(http://static.reddit.com/reddit.com.header.png);">Testing</div>


<div style="width: 120px; height: 40px; background: url(&quot;http://static.reddit.com/reddit.com.header.png&quot;) no-repeat scroll 0% 0% transparent;">
   Testing</div>





Top
Fri, 12/10/2010 - 17:05
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Background image inline style problem

You are still missing the important part: I said that you should check that your page is valid HTML and if you do, you'll find that it isn't because you haven't escaped the content. You can also look at the content of the textarea before CKEditor is executed and you'll be able to see the problem.
Top
Mon, 12/13/2010 - 10:26
rosc0
rosc0's picture
Joined: 07/10/2009
Posts: 8

Re: Background image inline style problem

I have fixed this now, by putting htmlentities() around the data from the database.

This fixes it but does not make much sense to me as the code would only get all garbled if there was a background image in the code, everything else has been working fine and has been heavily used for about a year or so.

Its only when we tried to put in a background image that we had problems..
Top
Tue, 12/14/2010 - 05:40
elentirmo
elentirmo's picture
Joined: 28/04/2010
Posts: 7

Re: Background image inline style problem

btw alfonsoml the page IS valid HTML, we created a new empty valid HTML document to test it with. The content of the textarea is fine before CKeditor is executed, and after, it's only when you switch to Source mode the content gets garbled.
Top
Tue, 12/14/2010 - 16:04
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Background image inline style problem

http://martinezdelizarrondo.com/bugs/quotes.html

http://validator.w3.org/check?uri=http% ... ne&group=0


<div style="width: 120px; height: 40px; background: url("http://static.reddit.com/reddit.com.header.png") no-repeat scroll 0% 0% transparent;">
Testing</div>


Top
Tue, 12/14/2010 - 23:11
elentirmo
elentirmo's picture
Joined: 28/04/2010
Posts: 7

Re: Background image inline style problem

alfonsoml that just shows me a textarea with the div code in it. If you have the full CKEditor wrapped around it and switch to source mode what happens?
Top
Tue, 12/14/2010 - 23:23
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Background image inline style problem

That shows a text area with four quotes for the style attribute. And that's not good.

How do you expect that CKEditor or any other system can handle that properly?

Just look at it: First quote starts the style attribute, the second one closes the style (no, it's not part of the style because if it was it should be encoded as &quot;, but you didn't encode the input html), after that there's some garbage that it's parsed as some strange attributes.
Top
Tue, 12/14/2010 - 23:32
elentirmo
elentirmo's picture
Joined: 28/04/2010
Posts: 7

Re: Background image inline style problem



<div style="width:120px; height:40px; background:no-repeat url(http://static.reddit.com/reddit.com.header.png);">Testing</div>




<div style="width:120px; height:40px; background:no-repeat url('http://static.reddit.com/reddit.com.header.png');">Testing</div>




<div style="width: 120px; height: 40px; background: url(&quot;http://static.reddit.com/reddit.com.header.png&quot;) no-repeat scroll 0% 0% transparent;">
   Testing</div>



Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check