SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unwanted inheritance

    Hello everyone,

    It seems I do not understand something about inheritance which has caused problems in my design.

    I have a series of styles defined for a specific form class "SearchForm", but every other form in my application inherits some properties from it (even forms with no class or other classes).

    These are the css definitions related to SearchForm:

    Code:
    /*----- SearchForm Styles -----*/
    .SearchForm .rowElem {
        height:35px;
        width:100%;
        clear:both;
    }
    .SearchForm input, select, textarea,input[type=text],input[type=password], input[type=email] {
        font-family:Arial, Helvetica, sans-serif;
        font-size:13px;
        vertical-align:middle;
        font-weight:normal;
        color:#444444;
        margin:-3px 0;
        padding:0;
        float:left;
        line-height:20px;
        background:#fff;
        border:1px solid #a3a3a3;
        padding:2px 3px;
    }
    .SearchForm fieldset {
        border:0;
    }
    .SearchForm label {
        color:#222222;
        font-weight:bold;
        float:left;
        font-size:.857em;
        line-height:19px;
    }
    
    .SearchForm input[type=submit], input[type=reset] {
        border:none;
        background-color:#d41e33;
        outline:none;
        font-size:.786em;
        color:#fff;
        height:29px;
        width:87px;
        font-family:Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        cursor:pointer;
        float:right;
    }
    .SearchForm input[type=submit]:hover, input[type=reset]:hover {
        background-color:#000;
    }
    .SearchForm input[type=checkbox] {
        width:13px;
        height:13px;
        padding:0;
        outline:none;
    }
    .SearchForm textarea {
        overflow:auto;
    }
    Could someone please tell me why every form is inheriting from this class?

    Regards

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The problem is that you can't write your selectors like this:

    Code:
    .SearchForm input, select, textarea,input[type=text],input[type=password], input[type=email]
    Rather, it needs to be like this:

    Code:
    .SearchForm input, .SearchForm select, .SearchForm  textarea, .SearchForm input[type=text], .SearchForm input[type=password], .SearchForm input[type=email]
    Nothing is carried over across commas, so all those without the .SearForm class were targeting every input, label etc. on the site.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooooh, thanks I deserved to be laughed at

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sarmadys View Post
    I deserved to be laughed at


    Only kidding.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you are concerned about Ie6 (or as a general matter of interest) then attribute selectors and pseudo elements should be listed separately and not like this.

    Code:
    textarea, input[type=text]{etc....}
    In the above IE6 doesn't understand the attribute selector and the rules state that if a browser doesn't understand one of the comma separated values then the whole rule should be dropped and IE6 would not get the input styled at all.

    Of course IE6 is probably not being supported anyway but the same holds true for css3 advanced pseudo element selectors and chaining then together is risky because if a browser doesn't understand one of them then the whole rule is dropped.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •