CSS - Class And Id Allowed Names

Hello everyone, l just wanted to know what browsers support the following:
Code:

<style>
td.test1 {
background-color: pink;
}
td.test2{
border-style: dotted;
border-width: 10;
border-color: orange;
}
</style>

<table>
<tr><td class="test2 test1">
THIS IS A TEST .. YAYA!!
</table>

Which is 1 element, with 2 class names...
It seems to work with the latest netscape, IE, and opera, just wanted to know if this is something l should be using on my web pages, or not due to the possible compatibility issues, any help is greatly appreciated, gents

Samantha Gram.

Hi all

I just wonder why IE6 (and I guess previous versions, too) does not allow a background-image on the <tr> tag of a table?

Code:

tr {
  background-image: url(...);
}

This does just delegate the background image to the child-td-tags, it's not really displayed on the tr tag!

So the following works in Firefox, but not in IE6:

Code:

tr {
  background: transparent url("red.gif") bottom left repeat-x; /* A 50*50px image */
}

td {
  height: 100px;
  background: transparent url("blue.gif") top left repeat-x; /* A 50*50px image */
}

Firefox displays the table cells as expected with red bottom (on the tr tag) and a blue top (on the td tag).

IE6 only displays the blue top.

Is there a clean hack for this? Or do I have to help myself with additional tags (e.g. a div within the td)?

Thanks for help
Josh

This may be a pretty vague question, so I'm sorry in advanced.

But I'm working on one of those recipe websites that you get as an assignment during school. Everything seems to be working, like adding comments, writing up recipes, etc. But for some reason, I'm having a huge issue with apostrophes.
Whenever I want to add a comment to a recipe that involves an apostrophe in any way, it says "Sorry, there was a problem with your comment."

I mostly want to know why this happens on websites instead of getting the direct "this-is-how-you-fix-it" answer, because i've seen this happen on other websites.

I am looking for a robust drop down menu solution. Javascript is fine for controlling the functionality but the items must be positioned with CSS so that they are SEO. At the moment we have full javascrip menu's but the links don't get picked up by the search engines as they are encapsulated.


I have tried the suckerfish stuff and it's a nightmare to be honest. Horrible to customise and very difficult to get a result you actually want.

So I have a myspace, and I like things neat and compact. And I like filling out lots of long surveys that most likely no one will ever read, and posting them on my myspace. But when I do that, my page becomes very long and I don't like that. So my idea was something like this:

There would be a series of links across the top that would correspond to the various surverys and/or other content that I deem necessary to share with the world. The many users who visit my page looking for more details about my life click on the link of their choice. The box below all the links shows that particular survey. They read it all, and of course want more, so they click the next link. And poof, a new survery shows up right where the other one was. Compact and efficient.

I've seen sites use a slightly similar system before, often in the help/faq sections. You find the topic you need help with, click on it, and it pops up below it. However I'm pretty sure they used javascript, which isn't allowed on myspace. ("Security" or some other overrated matter). Therefore I would have to do it with CSS. I was thinking have each survey in a different table, all absolute positioned in the same place. Then when you click the link, either all the rest get visibility turned to not visible, (and that one turned to visible), or perhaps the z-index is changed. However I'm not sure you can do that in a link, especially without javascript. So I may need to find an alternative. Unfortunately, I'm not very good with CSS at all, and I'm also not very creative in problem solving.

Does anyone have any ideas on how I could implement this system without javascript or using other pages? (I just get my one little myspace homepage, although I guess I could cheat and use blog pages too. But then all the other blog crap like comments would show up on it).

I apologize if this has already been covered, I tried to look through the more recent posts for something similar and found nothing, and I wasn't really sure what to search for, since it isn't really something concrete I'm working with. I don't necessarily need code, mostly just ideas right now.

Thanks in advance to anyone who helps, and if you don't know what I'm talking about/thought it was too long, tell me and I'll try to clear it up or shorten it up, respectably (and respectfully, as it were).

PS. My myspace account, if you care and didn't already guess, is www.myspace.com/mynameismolotov. Althought it's basically empty right now.

Hi!

Let's say I define this:

#gaga.baracuda {......}

#haha.baracuda {other info....}

Is this allowed?

hey,

I got a table, every <td> in the table got the css class .regular.
(<td class='regular'>).
When the user moves their mouse over a row, that row should change color. This works with the following code:
<tr onmouseover='this.className=\"hoverRow\"'>
However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this.

How can i overwrite the class of the td's by the class for the whole row?

thanks in advance

Using the following example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

a
{
	display: block;
}

a.one.on, a:hover.one, a:hover.one.on
{
	color: red;
}

a.two.on, a:hover.two, a:hover.two.on
{
	color: orange;
}

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}


</style>
</head>

<body>

<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>

<p>&nbsp;</p>

<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>


</body>
</html>

Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style:

Code:

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}

(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE.

I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated!

Code:

HTML Code

<div class="menu">
    <ul>
        <li><a href="#" class="search"></a></li>
        <li><a href="#" class="battery"></a></li>
        <li><a href="#" class="cart"></a></li>
        <li><a href="#" class="contact"></a></li>
    </ul>
</div>

CSS

.search, .contact, .cart, .battery
{
    width:100px;
    height:30px;
    margin-left:-1px;
    display:block;
}

.search
{
    background-image:url(Images/search.png);
}
.contact
{
    background-image:url(Images/contact.png);
}
.cart
{
    background-image:url(Images/cart.png);
}
.battery
{
    background-image:url(Images/battery.png);
}

ul li a.search:hover
{
    background-position:0px 60px;
}


ul li a.search:hover ul li a[class=battery]
{
    background-position:0px 60px;
}

Howdy,
Does anybody have, or has anyone ever seen a table for any form of database with CSS color names and/or hex codes in it?
I'm sure some web design sites have something like it, but I could be wrong.
If I don't get a reply in a couple of days, I'll go ahead and make my own and make it publically available (most likely in Access format).

Thanks in advance.
-colin

Hey guys, I'm SURE this has been asked before but I just can't find it. Is there any way to use a * in a selector name to match multiple selectors? Something like this:

Code:

row* {  padding-top: 10px; }

Which would match all of the following:

Code:

<div id="row1"> ... </div>
<div id="row2"> ... </div>
<div id="row3"> ... </div>

I'm thinking there's not, as the code above doesn't work. I'm thinking that the only alternative for dynamic ID names is in-line CSS styles, but I figured I'd ask just in case.

Thanks in advance

Sorry for the lousy title, can't come up with better wording....

What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one.

Thanks...

I am new to CSS and confused about when to use id # and when to use class .

Some enlightenment on the benefits/purpose of each would be helpful. I have read several tutorials - but the same pretty much the same to me so I must be missing something

Thanks!

Problem solved.

When defining css in a webpage, it can be done using either a class or id. My understanding is that css uses . notation with classes and # notation with id's, regardless of whether the actual css is in the webpage itself of linked externally. Please correct me in error. My css uses classes and external . notation. When I use id's only and # notation exernally, I lose all my styling. Its only when I use the # notation internally that the styling works. In order to use external css I need to declare both a class and id and dot notation. Internally only an id. Is this correct behaviour?