www.webdeveloper.com
Results 1 to 3 of 3

Thread: Best way to fix CSS conflicts

Hybrid View

  1. #1
    Join Date
    Oct 2008
    Posts
    50

    Best way to fix CSS conflicts

    Can some of you pros tell me what's the best way to go about fixing CSS conflicts when combining multiple, pre-made templates, scripts etc.?

    I have a pre-made website template and I added a PHP script that includes some HTML on certain pages. Both the template and the script have there own CSS and when you combine the two, some of the template's CSS overrides the CSS included with the script.

    I already use FireFox with FireBug but many of the conflicts are not apparent so I have resorted to temporarily deleting lines of CSS till I find the problem but this approach takes FOREVER.

    One example is the template using the following "reset" CSS:

    HTML Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, 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,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video, textarea, input {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    	text-decoration: none;
    }
    The font-size: 100% is causing a problem for the HTML generated by the script. I can't figure out how to "undo" that font size setting for just one part of the HTML generated by the script. I can't delete that from the template's CSS because it screws up text on the rest of the page. I know it a matter of correctly nesting the CSS but I can't figure this one out.

    Any suggestions?
    Last edited by jeffshead; 04-12-2013 at 04:18 PM.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,108
    That CSS seems to be part of a popular CSS reset stylesheet. It was created by a respected author, so I assume that he had a good reason to include the font-size:100% for all of those elements, but it's not the way I would do it. I'd remove that setting from the bulk definitions, and add a supplemental definition underneath:
    Code:
    html, body { font-size:100%; }
    That might help your immediate problem.

    In the long run, you have to keep in mind that not all addons or plug-ins for template-driven packages like WordPress, Joomla, etc. are well-written and some of them are liable to cause problems. So you just have to be careful when you add these things to your site, and be prepared to remove bad ones and look for alternatives. Good luck!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Oct 2008
    Posts
    50
    Quote Originally Posted by rtrethewey View Post
    Code:
    html, body { font-size:100%; }
    Thank you for your reply

    I have a typo in my original post. It's not font-size:100%; that's the problem. It's font: inherit;.

    I tried your suggestion with font: inherit; but it does not work. It removes font: inherit; from everything so it changes the entire page.

    I'm stuck. I can't figure out which inherited font property is causing the issue for a particular button.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles