CSS Styling not being applied

Squiz Matrix General Discussion
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

2

Got a link?

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)

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?

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.

6

Do you see any errors in the Safari console?

7

Nah nothing showing in the Safari console Nic.

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?

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.

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.

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.