15 {{ upvoteCount | shortNum }}
15 {{ upvoteCount | shortNum }}

CSS question: How to reset styles for a single DIV?

by markowe
6 replies
  • WEB DESIGN
    • |
OK, I am a bit of a CSS dummy (I WILL outsource this stuff out one day soon!) - I need to do a typical CSS reset, but for just ONE DIV in my template. Why? Because the CSS is for a plugin, which could be used on any (Wordpress) template you can imagine, and I want it to display the same across as many themes as possible so I am resetting the wrapper DIV for the plugin content and then defining the styles as specifically as possible. Currently I am doing this:

Code:
div#mypluginwrapper div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, span, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	text-decoration: none;
	font-size: 100%;
	font-family: arial, sans serif;
	color: black;
	line-height: normal;
}
...but some styles (ul and li to name two) are passing on styles to elements outside the wrapper.

I am pretty sure that the font-size: declaration is what is messing things up, but why would it affect things outside the wrapper div? ALL my subsequent declarations are child ids or classes to the wrapper div, so where have I gone wrong, how are these styles 'escaping' ?

Thanks,

Mark
#css #div #question #reset #single #styles
  • Profile picture of the author mahesh2010
    Originally Posted by markowe View Post

    OK, I am a bit of a CSS dummy (I WILL outsource this stuff out one day soon!) - I need to do a typical CSS reset, but for just ONE DIV in my template. Why? Because the CSS is for a plugin, which could be used on any (Wordpress) template you can imagine, and I want it to display the same across as many themes as possible so I am resetting the wrapper DIV for the plugin content and then defining the styles as specifically as possible. Currently I am doing this:

    Code:
    div#mypluginwrapper div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, span, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    text-decoration: none;
    font-size: 100%;
    font-family: arial, sans serif;
    color: black;
    line-height: normal;
}
    ...but some styles (ul and li to name two) are passing on styles to elements outside the wrapper.

    I am pretty sure that the font-size: declaration is what is messing things up, but why would it affect things outside the wrapper div? ALL my subsequent declarations are child ids or classes to the wrapper div, so where have I gone wrong, how are these styles 'escaping' ?

    Thanks,

    Mark
    Just make a Jquerry script that will replace a class dynamically this will do
    Signature
    Mobile Website Design
    {{ DiscussionBoard.errors[2926098].message }}
  • Profile picture of the author phpbbxpert
    First thing, in CSS the order of the selector rules counts in CSS.

    So your reset which is usually first on the CSS stylesheet
    declaring div#mypluginwrapper there will not work.

    Because somewhere farther down the sheet it is declared again over writing the reset.

    The only thing that should be in the CSS reset is native CSS selector elements.

    To reset an #Id or .Class declare it last on the sheet so it is after any previous declarations.

    Don't use jQuery or any other JavaScript for styling, that is not what it was meant for.
    JavaScript is for enhancing the users experience, not styling or style fixes.
    {{ DiscussionBoard.errors[2928215].message }}
  • Profile picture of the author markowe
    Thanks for this. Yes, I would rather not use JS, I want this as clean and standards-compliant as possible.
    So are you saying I cannot reset styles for a wrapper div? Hmm, dunno why I even went for that option. Would I be better off declaring all the styles in the wrapper explicitly? Kind of a drag but seems more foolproof...
    Signature

    Who says you can't earn money as an eBay affiliate any more? My stats say otherwise

    {{ DiscussionBoard.errors[2930233].message }}
    • Profile picture of the author SteveJohnson
      Originally Posted by markowe View Post

      Thanks for this. Yes, I would rather not use JS, I want this as clean and standards-compliant as possible.
      So are you saying I cannot reset styles for a wrapper div? Hmm, dunno why I even went for that option. Would I be better off declaring all the styles in the wrapper explicitly? Kind of a drag but seems more foolproof...
      Yes, you would be better off doing that than trying to 'reset' all the styles - a waste of time.

      Just for reference, the single div#mypluginwrapper isn't enough in the example you gave. You have to preface every element with your target element:
      Code:
      div#mypluginwrapper div,
div#mypluginwrapper p,
div#mypluginwrapper ul,
etc.
      Then when you set your styles, you also have to be specific:
      Code:
      div#mypluginwrapper div { background-color: #000; color: #fff; }
div#mypluginwrapper p { background-color: #0f0; color: #f0f; }
etc.
      You're better off not trying to 'reset' - people usually want plugin-driven HTML to match their site in look and feel at least to some degree. You should only force changes when you absolutely have to.
      Signature

      The 2nd Amendment, 1789 - The Original Homeland Security.

      Gun control means never having to say, "I missed you."

      {{ DiscussionBoard.errors[2931143].message }}
  • Profile picture of the author markowe
    Steve, thanks, that's really cleared it up for me. Yes, I initially tried letting the plugin inherit some styles from the main template, but layout is really critical - it's a kind of shopping comparison table and I can't cater for what inherited styles might do to the display. Maybe I could allow colours to inherit, that's about it... Anyway, this way I can sell custom templates They won't be done by me I hasten to add!
    Signature

    Who says you can't earn money as an eBay affiliate any more? My stats say otherwise

    {{ DiscussionBoard.errors[2931293].message }}
    • Profile picture of the author jariel.james
      Additionally I'd recommend installing firebug plugin to firefox. This way you can easily check exactly which css rules apply to the element you want to inspect.
      And its a great tool anyways
      {{ DiscussionBoard.errors[2932198].message }}

Trending Topics