CSS - Square Brackets In Css Classes

I've been trying to clean up my code and in the past I never seemed to make use of predefined html element tags like the H1-H6...and instead I just find that I just make a new class but I was wondering if there is anything wrong with using the H-tags in place of a few classes? Obviously it would have to make logical sense to use, but I'm wondering if there has been any changes in how browsers use those tags in the past few years as I wouldn't want to be using an outdated, soon to be phased out element.

Hi people,

critique this piece of code for a yellowheader and a blue id and tell me what the problem is. It seems both end up as black

<style type="text/css">
h3.Big Bird{color:yellow;}/*Class
Font#CookieM{color:blue;}/*Id*/
</style>

<h3 class="BigBird">Big Bird</h3>
<font Id="CookieM">Cookie Monster</Id>

Hope to hear from you soon.
kaz

ok here is the question. i have done two websites, i have tested them out in multiple browsers and all seemed fine. When i test them in IE the text runs into to image. I am using div classes to control the image. Any insight on why this is happening would be greatly appreciated and hints or solutions would be more then welcomed. I am banging my head against a will trying to figure this out.

Thankyou All

heya this doesnt seem to work the second class complety overwrites the first ? id like it to append the second one ? any ideas eg

main.css
.main-header-back {
background-repeat: no-repeat;
background-position: 793px 0px;
overflow: hidden;
}

index.php
.main-header-back {
background-image:url('/images/main/image.gif');
}

www. cooperworkskilns.com/kilns.html

Two things:

The .section classes (images and borders in the middle) are not stretching the width of the parent <div> in IE. Do I have to specify a width with IE?

The margin below the images in the .section classes is greater than what it should be. (noticeable when compared to FF)

CSS:

#subnav
{
margin: 15px 0px 0px 10px;
padding:0px;
}

.section
{
width: 51em;
border: solid #999999 1px;
padding: 10px;
margin: 0 0 10px 0;
overflow:hidden;
text-align:left;
}

.section img, img a
{
float: left;
border: solid #999999 1px;
margin: 0 10px 0 0;
}

I am very confused how best to define my style sheet for a given goal. Here is what I need to do:

I need to have various styles of tables. Some whose text is centered (like the table header), some whose text is left justified. I need to be able to define link colors for each different type of table (i.e. a.link, a.active, etc).

I just don't know how to proceed. It seems that I would do something like

Code:

TD.centered {
text-align: center;
}


TD.left{
text-align: left;
}

But then I don't know how to define the link colors. Would I have to do something like

Code:

.centered a:link {
color: #000000;
}

Isn't there a way I can create one selector that contains everything without having to have all these separate entries?

Any help is vastly appreciated!

Also, I am confused by the use of SPAN. Is this still used? Or is it best to specify the class in the element tag?

thanks,

brian

is it possible to use two classes for one element.
I want to use two classes for one element I thought perhaps it is possible not to create another class to combine both of them.

perhaps there is a form of superclass and subclass in css.

hey all, i have a image which is a link and i wanted to change the blue box around it to something more inkeeping with the site. So i did this css

Code:

a.greenToblack {
	color:#000000;
	font-size:13px;
	text-decoration:none;
	font-weight:600;
	font: Georgia;
	}
a.greenToblack:link {color:#000000; font: Georgia;}
a.greenToblack:visited {color:#000000; font: Georgia;}
a.greenToblack:hover {background-color:#667138; color:#667138; font: Georgia;}

and impletmented it as so
Code:

<a class="greenToblack" href="product.php?range_id=<?php print ($row->range_id) ?>"><img src="images/tmbnail/<?php print ( $row->tmbnail )?>" width="75" height="75" border="2"></a>

it works perfectly in FF but not in IE..... any ideas why??


thanks

RF

i have

<div class="h">this is type 1</div>
<div class="h offer">this is type 1 with backgroundA</div>
<div class="hd">this is type 2</div>
<div class="hd offer">this is type 2 with backgroundB</div>

how do I achieve the CSS for accessing only divs with a class of h AND offer?

thanks in advance

I cant seem to get my cellpadding working for tables, what do i have to input. I have tried:

.header {background:#2D759F; width:100%; cellpadding:5}

all the others work, jus the cellpadding which does not.

I have encountered a really annoying bug in IE6 and would be very interested to know if anyone else hase encountered it and found a solution. Look at the following example:

PHP 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" lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />        
    <style type="text/css" media="screen">
        .class1,.class2,.class3 {
            border: 1px solid black;
            width:400px;
            line-height: 100px; 
            text-align: center;
            }
        .class1 {    background: none;    }    
        .class2 {    background: red;    }    
        .class3 {    background: blue;    }        
        .class1.class2.class3 {    background: black;    }          
    </style>
</head>
<body>
    <div class="class1">Test Content 1</div>
    <div class="class2">Test Content 2</div>
    <div class="class3">Test Content 3</div>
    <div class="class1 class2 class3">Test Content 4</div>
</body>
</html> 





The four divs should all be different colours as follows:

div1: transparent/white
div2: red
div3: blue
div4: black

However, both divs 3 & 4 are black. The rule: .class1.class2.class3 { background: black; } is incorrectly effecting divs with only .class3.

Any ideas?

I have a series of image buttons with rollovers that are generated in CSS so I've applied a class to each like this:

<a class="homebutton" title="Home" href="#">This is the Home Button</a>

This works great but I now would like to apply a second class to the href that calls an animated scroll function from a javascript file. I've tested the function on a simple button and it worked perfect:

<a href="#divtwo" class="scroll">Scroll Down</a>

What I would like to do is essentially combine the two so that it would be something like:

<a class="homebutton" title="Home" href="#divtwo" class="scroll">This is the Home Button</a>

But when I do that it ignores the "scroll" class and simply jumps to the #divtwo location on the page without the animation.

Ideas on how to have two classes on one button?

Any help would be GREATLY appreciated!

Hi, I'm trying to use multiple classes: div class="class1 class2". As usual, IE 6 does all but not what you would expect. Please allow me to post a code snippet:

Code:

<html>
<head>
<style type="text/css">

.class1 {
    background-color: red;
}

.class2 {
    background-color: green;
}

.class1.class2 {
    background-color: yellow;
}

</style>
</head>
<body>

    <div class="class1">
        .class1 -- should be red
    </div>

    <div class="class1 class2">
        .class1.class2 -- should be yellow
    </div>

    <div class="class2">
        .class2 -- should be green
    </div>

</body>
</html>

Sadly, the rule for .class1.class2 is also applied to the third div, where it should clearly NOT apply, so it is yellow instead of green. I know that using subclasses "is not safe for IE", as is CSS in general -- but is there a workaround that doesn't force me to abandon the technique?

Thank you, answers appreciated!

If i set an id to a transition like so:

Code:

Code:

<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>

<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>

Then it works fine, but if i use the class ".trans" instead, it doesnt. Im looking for a way to use a style more than once on a page and classes are the only way i know how to do it. Any help?

I have a question.
If i create a custom class :

p.q {color: black !important;}

and a user has a css with the fallowing code:

p {color: red !important;}

will my text <p class="q">My text</p> be red or black
and how can i prevent the user css from overriding my css