www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to have an element only get some styles?

  1. #1
    Join Date
    Nov 2010
    Posts
    67

    How to have an element only get some styles?

    Lets say I have a page with a CSS with lots of lines of code (for fun lets say 10k lines of CSS). Then i have a calendar that ive used many times that works good, but when I put it in the page with 10k css it completely breaks the calendar...

    Is there an easy way to set this up to have this single element only use CSS from one source and ignore the page CSS? I seem to waste so much energy going over CSS and overriding page styles just for a single element... there has got to be an easier way.

    To make things more difficult, I often have things work perfectly in all my browsers but IE, which makes my job even harder since firefox has the debugging tools.

  2. #2
    Join Date
    Apr 2010
    Posts
    121
    You probably have overlapping styles.

    For example:

    In your calendar you have a "event" class, and you have the same class in your page.

    Make sure everything is unique. The only quick way to fix this is search and replace!

    Also, make sure you close all of your brackets.
    "If life gives you lemons, make delicious chocolate baked goods and have the world wonder how you did it." ~Anna McNutt

  3. #3
    Join Date
    Nov 2010
    Posts
    67
    Yeah I know what the problem is, and I know how to fix it. My problem is I am looking for a problem that wont potentially take 30m to find and fix when im dealing with thousands of lines of CSS and several different CSS pages.

    I think this is a major oversight with HTML and im surprised it has yet to be fixed. If this was done right, you would be able to use easily use as many styles in your page as you wanted to, even if they were all generic and badly written.

    For example: Lets say style1.css had 10000 lines of css, while some of that effected every table. Then you had a second style2.css with 20000 lines of styles and some of it also effected every table.

    Now if you put in a table, other then the specific styles gotten from a specific id/class, you have no know of telling that table what CSS to use.... Which is my problem. Because even if just 5% of a 20000 line style page has styles that apply to all elements without id/class, then it can still turn into a headache fixing this problem.

  4. #4
    Join Date
    Apr 2010
    Posts
    121
    "I think this is a major oversight with HTML and im surprised it has yet to be fixed."

    I'm sorry, but other programming languages are not any better. I advise that you don't learn them. CSS/HTML is one of the easiest as far as how things are loosely formatted. They can be VERY generous in the way that they allow you to code them.

    I don't believe that this is an 'oversight'. To implement another set of rules or fixes for this would introduce more complications, and then people would be complaining, asking: "How to have an element many styles?"

    I don't know if this makes sense, but you should be grateful it is as easy as it is.

    Anyway, I hope everything works out.
    "If life gives you lemons, make delicious chocolate baked goods and have the world wonder how you did it." ~Anna McNutt

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    The problem should be solved by creating those CSS classes ergonomically and accurate.

    Yes, it is possible to give different elements the same class, but to have, in fact, different behaviors. Use compound DOM selectors:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    .fontcolor{
    color:#F00;
    }
    .bluediv .fontcolor{
    color:#00F;
    }
    </style>
    </head>
    <body>
    <div class="fontcolor">this is red</div>
    <div class="bluediv">
    <div class="fontcolor">this is blue</div>
    </div>
    </body>
    </html>
    Or another example:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    div.fontcolor{
    color:#F00;
    }
    span.fontcolor{
    color:#00F;
    }
    </style>
    </head>
    <body>
    <div class="fontcolor">this is red</div>
    <span class="fontcolor">this is blue</span>
    </body>
    </html>

  6. #6
    Join Date
    Nov 2010
    Posts
    67
    "I think this is a major oversight with HTML and im surprised it has yet to be fixed."

    I'm sorry, but other programming languages are not any better. I advise that you don't learn them. CSS/HTML is one of the easiest as far as how things are loosely formatted. They can be VERY generous in the way that they allow you to code them.
    Id advise you to learn how to use simple quote tags before acting smug. I do OOP PHP prorgamming for a living, but I also know JS/ajax/jquery, assembly, c++/c#, vb6/vb.net, etc.

    When you start grabbing code from multiple sources and try to make them all work on a single page = often get these CSS problems = I need to spend my time fixing it.

    The problem should be solved by creating those CSS classes ergonomically and accurate.

    Yes, it is possible to give different elements the same class, but to have, in fact, different behaviors. Use compound DOM selectors:
    I know that, but the css is often not done correctly and I get problems.

    I still think its weird how there is no way to tell the HTML to ignore all styles other then the one you specify as a the class.

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