SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stop inheritence?

    Hi all,

    I have developed a JavaScript Widget for a client, and I tested it on all my sites and it works and looks perfect.

    My client dropped it into his blog, and the styles donít show quite as they should.

    Although Iím not sure which of his styles are conflicting yet, I know its some of his styles interfering because I removed his styles from the blog page momentarily and the widget displayed correctly.

    Is there anyway I can override the other styles? I donít know who might use the widget in the future so I need to make sure this wont happen on another website.


    Here is my style sheet:

    Code CSS:
    #widget_sm{
    	width:180px;
    	height:150px;
    	border: 1px solid #000000;
    }
     
    #search_area_sm{
    	width:176px;
    	border:1px solid #909ea6;
    	margin-left:1px;
    }
     
    #language_banner_sm{
    	font-size:1.2em;
    	color:#ffffff;
    	background-color:#2d7fb5;
    	cursor:pointer;
    }
     
    #search_cont_sm{
    	width:176px;
    	height:88px;
    	background-color:#d4eef6;
    }
     
    #radio_area_sm{
    	width:176px;
    	height:25px;
    	padding-top:2px;
    	font-size:0.8em;
    	color:#a0a0a0;
    }
     
    #search_sm{
    	width:168px;
    	margin-left:1px;
    	margin-top:5px;
    	color:#a0a0a0;
    }
     
    #search_button_sm{
    	float:right;
    	padding:3px;
    	margin:5px 2px 0px 0px;
    	color:#ffffff;
    	border: 1px solid #ffffff;
        background: #df2131;
    }
     
    #search_button_sm:hover{
    	background: #ea5864;
    }

    Many thanks!

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Sounds like you're getting tagged by specificity problems - even though you're specifying styles on an specific element using the id specifier, if there are other styles which have a higher specificity count (say two classes or a tag and a class), those will take precedence. I know it doesn't make sense, especially if you're a programmer, but that's the way it works.

    I asked a similar question last year, and as you'll see in the thread, it took a while for me to accept it.....I still don't understand why, but I just go with it....

    Here is an amusing infographic which will hopefully explain how the specificity works (original blog post here).
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnuk View Post
    I don’t know who might use the widget in the future so I need to make sure this wont happen on another website.
    In this case, it's probabably best to pull out the CSS sledgehammer and just add !important to any declaration that's likely to meet with conflict. E.g.

    Code:
    #widget_sm{
    	width:180px !important;
    	height:150px !important;
    	border: 1px solid #000000 !important;
    }
    A bit nasty, in a way, but probably the easiest solution in this case. (I've never used !important, but then I don't make widgets. )
    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."

  4. #4
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Dave, thanks very much for the usefull Info will read that now.

    @Ralph, yes I had considered the !important tags, I will add them in they cant do any harm

    Thanks again guys, you are ever helpful !!


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
  •