Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post

    Help with class designation for style

    I've spent hours trying to figure this out. I don't know why my class="placemarkJunk" is being ignored.

    In .placemarkJunk, I set {height:150; width:200; color:red; border:1px solid black;}.

    Nothing. Zip, zero, nada. All properties in my div with class="placemarkJunk" still use the parent's class of "Senate."

    Here is the html tree from Firebug.

    <table id="AL" border="1px solid black">
    <tbody>
    <tr>Alabama</tr>
    <tr>
    </tr>
    <tr>
    <td>
    <img id="ALSenate" class="statesCheckBox"
    src="VSCheckBoxSelected.jpeg"/>
    </td>
    <td class="Senate" style="color: black; font-style: normal;
    cursor:default; text-decoration: none;">
    Senate
    <div class="placemarkJunk">Jeff</div>
    </td>
    </tr>
    </tbody>
    </table>

    PS: I see my post is not formatted with indents. Any help there would be appreciated, too, so I can make my code snippets more legible in the future.

  • #2
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    I think I just figured it out. I created a mousover change in the style for Senate. On mousing over it, I see it appended a "style=..." next to my class "Senate."

    This latter "style=..." must be controlling. I'll re-code and see if that doesn't take care of it.

    In the meantime, if I am wrong and someone spots another issue, please post.

    Thanks.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jeffmatthews View Post
    PS: I see my post is not formatted with indents. Any help there would be appreciated, too, so I can make my code snippets more legible in the future.
    Wrap your code in to get the scroll box
    You can get them with the # button in the post edit window.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    Well, that wasn't it. Here is the updated html tree from firebug:

    This is really baffling me!!!!

    Note "SenateNormal" is now controlling over "placemarkJunk." Two completely different styles, and the placemarkJunk style is being totally ignored.

    Code:
    <table id="AL" class="stateTable">
         <tbody>
            <tr>Alabama</tr>
            <tr>
            </tr>
            <tr>
                <td>
                    <img id="ALSenate" class="statesCheckBox" src="VSCheckBoxSelected.jpeg"/>
                </td>
                <td class="SenateNormal">
                Senate
                    <div class="placemarkJunk">Jeff</div>
                </td>
            </tr>
         </tbody>
    </table>
    P.S. Thanks for the tip on posting structured code.
    Last edited by jeffmatthews; 10-31-2009 at 11:11 PM.

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    Here is a good rule book for order of operations for CSS class designations:

    http://www.hwg.org/resources/faqs/cssFAQ.html

    As far as I can tell, my structure fits right in, and the "placemarkJunk" class designation should control.

    I am beginning to think I found an systematic HTML/CSS bug, but that just can't be. Somewhere I am missing something.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    So, I've never done anything with tables but... when styling text it usually helps to put some kind of text tag around it. Gives you something to style in your CSS that way.
    The snippet you give doesn't provide enough information, without the CSS we don't know what your trying to do in .placemarkJunk.
    I tried to recreate your problem and could not style the text but I could style other things, like background color.

    Have a look at this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	background: #ccc;
    }
    .Senate {
    	color: #00f;
    	font-style: normal;
    	cursor: default;
    	text-decoration: none;
    }
    .placemarkJunk {
    	color: f00;
    	background: #00f;
    }
    </style>
    </head>
    <body>
        <table id="AL" border="1px solid black">
            <tbody>
                <tr>Alabama</tr>
                    <tr>
                    </tr>
                        <tr>
                            <td>
                            <img id="ALSenate" class="statesCheckBox" src="VSCheckBoxSelected.jpeg"/>
                            </td>
                                <td class="Senate">
                                Senate
                                <div class="placemarkJunk">Jeff</div>
                                </td>
                        </tr>
            </tbody>
        </table>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    Hi. Thanks! I'm looking at the code you posted and can't see how it's different than mine. What did you change to get any style control whatsoever? I didn't see text tags in yours.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I didn't change anything. It does not style the text. All it will do is style the div, the text is inheriting from the parent .Senate.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    Hmmmm. You think we've found a bug in HTML or CSS?

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    No, I think you should wrap text in text tags.

    http://htmldog.com/guides/cssadvanced/specificity/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    I never considered needing text tags and will give it a try. I just figured a text tag was a peculiar way to format, but would have no effect on the hierarchy within the element tree. If it works, I will be very surprised, happy and confused!

    Is there any particular rule behind your suggestion, or is it just a guess based on
    "if you don't have test tags, something is wrong."

  • #12
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    I hope you didn't take my question wrongly. I wasn't smarting-off by wondering whether you might be guessing. The way things have been going, just about everything at this point is becoming a guess for me. There's nothing wrong with guessing and then, going for it. It beats sitting around doing nothing and fixing nothing.

    I was going through the tag list but don't really see one that is just plain-old "generic."

    I need a tag that doesn't mess around very much with formats and styling. I don't want inadvertent line breaks and such once I go through.

    This will tend to be a large task, as I have a 1000-line program and not a text tag to be seen.....

    I want to risk as little damage as possible in going through this. Any tag suggestions?

    What is just a plain-old 12 or 14pt normal text tag with no line breaks or spacing or anything else?

    Thanks.

  • #13
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    <p>'s and <h>'s (1-6) are messing everything up. They have built-in line-breaks and do not print like normal text.

    I can't find a normal text tag. I am feeling very lost. I can't believe I can't find a normal text tag.

    Must be fatigue....

  • #14
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    your text should be in the <p> tag.

    You should also be sure that your ntml validates. (validator.w3.org). I doubt you can have a <tr>text</tr>. It ought to be <tr><td>text</td></tr>

    And I don't recommend you have css in the head and in the <body> code; quite the opposite. Better still, put it in an external stylesheet (.css file).

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Put a reset at the top of your CSS and use <p></p> for your text.

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    see http://perishablepress.com/press/200...-reset-styles/


    See the example below. I've given the text more specificity so it has something you can use to style it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	background: #ccc;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    .Senate {
    	color: #00f;
    	font-style: normal;
    	cursor: default;
    	text-decoration: none;
    }
    .placemarkJunk {
    	color: f00;
    	background: #00f;
    }
    h1 {color:#000;}
    p {color:#0F0;}
    </style>
    </head>
    <body>
        <table id="AL" border="1px solid black">
            <tbody>
                <tr>Alabama</tr>
                    <tr>
                    </tr>
                        <tr>
                            <td>
                            <img id="ALSenate" class="statesCheckBox" src="VSCheckBoxSelected.jpeg"/>
                            </td>
                                <td class="Senate">
                                <h1>Senate</h1>
                                <div class="placemarkJunk"><p>Jeff</p></div>
                                </td>
                        </tr>
            </tbody>
        </table>
    </body>
    </html>
    See what I mean about specificity now? I doubt I'm explaining it very well...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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