CODEWITHSUNDEEP
csscss-selectors
stackover
stackover

Reputation: 6925

classname not being recognised CSS styling

i have a submit button with the code inside a form 

<li>
   <input id="zip" name="zipcode" type="submit" 
          class="zip-button" value="Find" tabindex="{counter name=tabindex}"/>
</li>

.zip-button{
    height:30px;
    ------}
.zip-button:focus,.zip-button:hover{------}

for some reason the zip is not getting any style.but if manually add it in jquery like

$("#zip").css({"height":"30px",...});

its working.As am very new to styling i couldn't figure it.

Upvotes: 0

Views: 169

Answers (3)

stackover
stackover

Reputation: 6925

sometimes we might be referring to minified css(abc.css.min) file in which some classes might be missing (my case)instead of the original source css.this might result in styles missing for few class which are absent in css.min ....we can find out this using FireBug...in this case we need to go back and set reference right...[am a beginner so bare with my technical terms usage]

Upvotes: 0

giftnuss
giftnuss

Reputation: 529

Sometimes the cascade in CSS is a possible reason for the that case. Another rule with higher precedence is able to overwrite the definition. Firebug is a great tool for "debugging" css code. It shows, how the browser interprets the style sheets.

Upvotes: 1

&#181;Bio
&#181;Bio

Reputation: 10748

Is your css directly in the page like that? if so, that is the reason. You need to use inline styles, a style tag or an external css file.

inline: 

<input style='height:30px;' ...

style tag:

<html>
     <head>
        <style type='text/css'> 
            .zip-button{ height:30px; }
        </style>
     ...

external file

Upvotes: 1

Related Questions