CSS Styling not being applied

(Oliver Kass) #1

Hi,

 

I'm trying to restyle a search box on our site to fit across a different section of a page. My approach was to copy the CSS applied to a smaller version (.left_box_finder) of the box and then scale it up in some new css (.rhs_box_finder).

 

I've added in the new CSS to "styles.css" and added changed the div classes on the relevant page contents from "left_box_finder" to "rhs_box_finder" but it doesn't appear in the live page. I just get a search box minus the styling...

 

When I inspect the elements on the page it show the right tags though.

 

Any ideas why this might be happening? 

 

Oli

(Clementoke) #2

Got a link?

(Oliver Kass) #3

The sites not live I'm afraid so I can't send a link. Looking at the same page in Safari / Firefox. Firefox is picking up most of the styling but Safari ain't. Have attached a couple of screengrabs and here's the code:

 

HMTL:

<div class="rhs_box_finder">    <h3>Expertise finder</h3>
   <form method="get" action="%globals_asset_url:15504%">            
      <fieldset>
         <legend class="hide">Expertise finder</legend>
                    
          <div class="rhs_box_finder_fields">
             <div class="rhs_box_finder_fields2">
                 <div class="rhs_box_finder_input">
                   <input type="hidden" value="%globals_asset_url:15500%" id="fb_url"><textarea name="query" rows="2" cols="8" title="What kind of expertise are you looking for?">What kind of expertise are you looking for?</textarea>
                 </div>
                 <div class="rhs_box_finder_btn"><button><span>Find</span></button></div>
             </div>
          </div>
                   
      </fieldset>
   </form>
</div>

 

 

CSS as follows:

 

.rhs_box_finder {
width: 725px;
padding: 13px 10px 15px;
background: url(mysource_files/light_gray_bg.png);
margin-bottom: 20px;
}

.rhs_box_finder h3 {
font-family: Arial;
font-size: 1.05em;
color: #E90026;
padding: 0px 0px 10px 2px;
}

.rhs_box_finder.rhs_box_finder2 h3 {
font-size: 1.15em;
}

.rhs_box_finder_fields {
background: url(mysource_files/dark_gray_bg.png);
padding: 3px;
}

.rhs_box_finder_fields2 {
width: 716px;
overflow: hidden;
border: 1px solid #cdcdcd;
background: #fff url(mysource_files/lhs_box_finder_bg.png) repeat-x;
}

.rhs_box_finder_input {
display: inline;
float: left;
width: 693px;
}

.rhs_box_finder_btn {
display: inline;
float: left;
width: 23px;
}


.rhs_box_finder_input textarea {
border-width: 0px;
background:transparent;
width: 677px;
height: 43px;
color: #727272;
padding: 3px 8px 0;
resize: none;
font-size: 12px;
line-height: 20px;
overflow: auto;
font-family: Verdana;
}

.rhs_box_finder_input input {
border-width: 0px;
width: 677px;
height: 16px;
color: #727272;
padding: 5px 8px;
resize: none;
font-size: 12px;
line-height: 20px;
}

.rhs_box_finder_btn span {
display: none;
}

.rhs_box_finder_btn button {
width: 23px;
height: 43px;
background: url(mysource_files/pink_search.png) no-repeat 3px 19px;
cursor: pointer;
border-width: 0px;
}

.rhs_box_finder2 .rhs_box_finder_btn button {
height: 26px;
background-position: 3px 6px;
}

 

 

 

  Screen Shot 2013-12-12 at 15.10.27.png (7.23 KB) Screen Shot 2013-12-12 at 15.12.36.png (17.7 KB)

(Clementoke) #4

Is there a space between .rhs_box_finder.rhs_box_finder2 h3 as I can't see this in your html? Does the added CSS appear after the lhs classes?

(Oliver Kass) #5

It does appear after the LHS classes, do you think this could be the issue?

 

Have commented out the .rhs_box_finder.rhs_box_finder2 code as it's not in use. No difference though.

(Nic Hubbard) #6

Do you see any errors in the Safari console?

(Oliver Kass) #7

Nah nothing showing in the Safari console Nic.

(Nic Hubbard) #8

We really need a working page to help you through this. Can you make one page live, or at least post the contents on jsfiddle?

(Oliver Kass) #9

Ok thanks Nic. Leave it with me. The issue is that the whole site is in build. I'll take a look at jsfiddle and get back to you.

(Oliver Kass) #10

Hi folks,

 

Just to give you an update. The CSS is now being applied in both browsers. Haven't changed anything. Bit strange.

 

It still doesn't look quite right but at least I can tweak it now.

 

Thanks again for all your help.

(Joel Porgand) #11

Hi folks,

 

Just to give you an update. The CSS is now being applied in both browsers. Haven't changed anything. Bit strange.

 

It still doesn't look quite right but at least I can tweak it now.

 

Thanks again for all your help.

 

Caching of the css file is the likely culprit then. Ctrl-r will force your browser to re-download resources such as css files. If it's matrix level caching then try using the cache manager to clear the cache on it.