...

View Full Version : Help with class designation for style



jeffmatthews
10-31-2009, 11:18 PM
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.

jeffmatthews
10-31-2009, 11:31 PM
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.

Excavator
10-31-2009, 11:36 PM
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.

jeffmatthews
11-01-2009, 12:07 AM
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.



<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.

jeffmatthews
11-01-2009, 12:55 AM
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.

Excavator
11-01-2009, 01:57 AM
So, I've never done anything with tables but... when styling text it usually helps to put some kind of text tag around it (http://www.w3schools.com/css/css_text.asp). 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 -
<!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>

jeffmatthews
11-01-2009, 02:35 AM
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.

Excavator
11-01-2009, 02:37 AM
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.

jeffmatthews
11-01-2009, 02:43 AM
Hmmmm. You think we've found a bug in HTML or CSS?

Excavator
11-01-2009, 03:13 AM
No, I think you should wrap text in text tags.

http://htmldog.com/guides/cssadvanced/specificity/

jeffmatthews
11-01-2009, 03:30 AM
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."

jeffmatthews
11-01-2009, 04:27 AM
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.

jeffmatthews
11-01-2009, 04:55 AM
<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....

bazz
11-01-2009, 05:31 AM
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

Excavator
11-01-2009, 05:33 AM
Put a reset at the top of your CSS and use <p></p> for your text.


* {
margin: 0;
padding: 0;
}

see http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/


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


<!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...

godofreality
11-01-2009, 07:42 AM
<td class="Senate">
<h1>Senate</h1>
<span class="placemarkJunk">Jeff</span>
</td>


use a <span> tag if all u want to do is change the style of the text

jeffmatthews
11-01-2009, 08:21 AM
I've tried the text tags, by encapsulating with <p>'s. NoGo.

I doubt any other tag will do. I really think there is some other issue going on here.

jeffmatthews
11-01-2009, 08:21 AM
I have used span tags as well....

godofreality
11-02-2009, 07:35 AM
can u post all of your css here so i can have a look at it



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum