Design and CSS styles
Version 7.x > Design and CSS styles > Using CSS, png sprite and table View modes: 
User avatar
Member
Member
positivepurchasing - 11/27/2013 8:21:47 AM
   
Using CSS, png sprite and table
Hope someone can help.

I have created a page that a has a webpart (Editable Text). Within this "source" contains a table with columns and rows and these cells contain images from a class from within a css file. (<link rel="stylesheet" type="text/css" href="xxxxxxxxxxxxx" />
These classes are just an image with a rollover when the mouse goes over. the image is on a sprite that contain 6 to 24 images. (there are 48 classes)

example Css;
.Bargaining_1 {
display: block;
width:100px;
height:100px;
text-indent: -10000px;
background:url("../../APP_Themes/Images/Sprites/Bargaining.png") 0px 0;
}

.Bargaining_1:hover {
background: url("../../APP_Themes/Images/Sprites/Bargaining.png") 0px -100px;

Html
<tr>
<td align="center" class="Tactics"><a class="Bargaining_1" href="/Tactics/Bargaining/Salami-Slicing.aspx" title="Salami Slicing"></a></td>
</tr>

Works fine within a browser (direct to page) but fails to show the CSS formatting / image sprite within the "page" layout with CMSDesk - but it does show correctly within the "Design" page (in CMSDesk)

But.
If I go back into the source of the web part, and then exit it or edit the page, change text, delete a space etc it alters my table code into a list.
<ul>
<li><a href="/Tactics/Bargaining/Salami-Slicing.aspx" >Salami Slicing</a></li>
</ul>

This obviously rips out all the styling etc... but why is kentico system screwing with my HTML code?

1. can I get Kentico to stop it?
2. Display my css formatting within the "Page" view

Thanks.
Dave

User avatar
Member
Member
positivepurchasing - 11/27/2013 8:52:02 AM
   
RE:Using CSS, png sprite and table
Sorry --- it doent change it to a list.

It changes my
<td align="center" class="Tactics"><a class="Bargaining_1" href="/Tactics/Bargaining/Salami-Slicing.aspx" title="Salami Slicing"></a></td>

to

<td align="center" class="Tactics"> </td>

Also... why cant you alter your original text when you post in this forum! :(

Thanks for any help you can give about the table with css classes.

User avatar
Member
Member
kentico_sandroj - 11/30/2013 3:29:41 PM
   
RE:Using CSS, png sprite and table
Hello,

This may be an issue with the Web part is it is meant for Page content as opposed to the Static HTML Web part which is meant for HTML content. However, it is possible that this may work, but the CKEditor is causing the issue. If you try the demo site for CKEditor, do you get the same behavior? What about with the Static HTML Web part in Kentico? Also, which hotfix has been applied to your instance if any?

Best Regards,
Sandro

User avatar
Member
Member
positivepurchasing - 12/5/2013 3:38:54 AM
   
RE:Using CSS, png sprite and table
CKEditor demo site strips the html.

I will have to change the web part to the static ans see if that sorts it!

Thanks for all your help

Dave

User avatar
Kentico MVP
Kentico MVP
Accepted solutionAccepted solution
Brenden Kehren - 12/2/2013 7:46:13 AM
   
RE:Using CSS, png sprite and table
As Sandro mentioned it's an issue with the CK Editor. It is removing the < a > tag because there is no value between the opening and closing < a >tags.