Question

My Problem

We are using Sitecore, a content editor is filling in a rich-text box field.

This rich-text box field gives them an option to put in html to have more control over the content styles. So they decide to put in some CSS.

They provide the html and CSS below. The CSS adding images below relating to .button and .button145x28 do not work.

The odd thing is when we do the same method of adding an image using back-ground image for .cutOffCorner it works.

We are trying to see what would be stopping the below from actually working.

The rich text box control is an asp.net control from telerik. We are on Sitecore version 6.4.1 update 3.

My Code

HTML/CSS

Some of you may notice not all the html is there but if I can get the button image to appear on the link below I am pretty sure I can get it working on the rest of them.

<style>

.GenericSignupCallToAction .button a {padding: 6px 20px 10px 22px; border: none; background-image:url('~/media/Images/Content/Register-generic-page/button_off.ashx'); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}

.GenericSignupCallToAction .button a:hover {padding: 6px 20px 10px 22px; border: none; background-image:url('~/media/Images/Content/Register-generic-page/button_on.ashx'); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}

.GenericSignupCallToAction .button145x28 a {padding: 8px 30px 10px 26px; border: none; background-image:url("~/media/Images/Content/Register-generic-page/button_off_145x28.ashx"); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}

.GenericSignupCallToAction .button145x28 a:hover {padding: 8px 30px 10px 26px; border: none; background-image:url("~/media/Images/Content/Register-generic-page/button_on_145x28.ashx"); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}

.GenericSignUpCallToAction .cutOffCorner { background-image:url("~/media/Images/Landing-Pages/MyHiFX/corner_left_top.ashx"); position:absolute; top:-1px; left:-1px; background-repeat:no-repeat; height: 14px; width: 12px; }

</style>

<div class="GenericSignUpCallToAction">

    <div class="box">

        <div class="cutOffCorner">
        </div>


        <div class="headerText">
            <h1>blah</h1><br /><br />
            <p>blahblah</p>
        </div>


        <div class="button">
            <a href="somelink" title="Sign Up Now">Proceed</a>
        </div>

    </div>
</div>

Answer 1

Craziest game of spot the difference:

.GenericSignupCallToAction should be .GenericSignUpCallToAction

This resolved this issue.