CSS - Multiple Link Schemes ?

I want to create a schema for different colored links.

I'm stumped because I am pretty sure my syntax is correct, but it's not working correctly. I have created a class called "add" but my links in add are still showing up as the default.

A portion of my css:
Code:

  a.add:link{
  color: #FFFFFF;
  text-decoration: none;
}

a.add:visited {
  color: #0000FF;
}

a.add:hover {
  color: white;
  text-decoration: underline;
}

 

My link using "add":

Code:

 <a class="add" onclick="window.open('add_tnosc_password.jsp', 'window_one');" style="cursor:hand">Add</a>

I'm building a site that will have a style sheet that should be applied site wide (main.css) and then some pages will have styles that should only be applied to them (custom<X>.css).

Should I use multiple <link> tags to import each stylesheet or should I edit custom<X>.css and add @import "main.css"; to the beginning. Doing this would make the code look cleaner, but will the browser still cache the main.css file?

Am I being too persnickety about the look of my code and just use multiple <link>s?

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

Hello
Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link?
PS. no Javascript code needed, is their an alternative in css?

I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file.

Here is a sample file:

http://www. shawkey.com/test/imagebordertest.html

Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS?

Hello

is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color.

html:

<td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td>

css:

Code:

td.nodecoration {
	background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}

A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}

I would like to have multiple id and all using hover link for all

#test1, #test2, #test3, #test4 a:hover{
color:#0F0;
}

this doesn't work. NOT sure why??
thanks

Hello!

I'm gonna try to keep this as simple as I can, I don't know css at all...

I have a site where I'm gonna feature trailers in Quicktime and I'm planning on using a script called clearbox to open these trailers. Go to my site and view the trailers to see what clearbox is.

Now, to my problem. I'm gonna have 20 trailers per page, but all the trailers are not the same size. If you check out the trailers on my site you can see that the close button for the Pirates 2 trailer is a bit off, as to the National Treasure trailer where the button is where it's supposed to be. That's because the trailers are in different sizes, and the boxes/windows also are in different sizes. To change the position of the close button, I have to edit the clearbox.css file.

What I'm getting at is that I must have one clearbox.css file for each trailer/window and that every clearbox.css file needs an id or something so I can call it from within the html/php file.

Here's the code for clearbox as I have right now on my site. First up is the code I have within the head section...

Code:

<link href="piratesofthecaribbean2/css_trailer/clearbox.css" rel="stylesheet" type="text/css" />
<script src="piratesofthecaribbean2/js/clearbox.js" type="text/javascript"></script>
<link href="nationaltreasure/css_trailer/clearbox.css" rel="stylesheet" type="text/css" />
<script src="nationaltreasure/js/clearbox.js" type="text/javascript"></script>

And here are the links for the "View trailer"-buttons...

Code:

<a href="piratesofthecaribbean2/trailer.php" rel="clearbox(668,,330,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a>

Code:

<a href="nationaltreasure/trailer.php" rel="clearbox(668,,342,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a>

Clearly, this setting doesn't work.

What I wanna know is if I can have multiple clearbox.css files with different settings (to suit each trailer/window) and if I can call these clearbox.css files in this link:

Code:

<a href="nationaltreasure/trailer.php" rel="clearbox(668,,342,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a>

I hope someone understands what I want, I really want this to work!

Thanks in advance!

Hi, i need to delvelop something like "SomeName X". Currently i am doing with DIV(1 DIV for 'SomeName' and 1 DIV for 'X' and finally float-left to another DIV). Since these names(like "Somename1 X",'Somename2 X"...) are populated in the div container, when it reaches the right end of the container, "X" alone getting wrapped to the next line. But it has to be along with 'SomeName' always. As other forums says, I tried with table but it didn't work since the final div container is fixed and i get multiple names with variant length. I tried clear:both, float left - it too didn't work. I have seen like the one in facebook - compose page. I would like to know how to implement this. Any help appreciated. Thanks in advance.

Is it possible to use CSS to "call" multiple PHP scripts and display them on one page?

I want to display several different RSS feeds on a page. I have tried using plain tables, but I get an error:

"Cannot redeclare startelement() (previously declared........."

I put the script in a table he

http://rottweilerconnection.com/test1.php

This is the RSS feed (script) without the table:

http://rottweilerconnection.com/test11.php

And here is the script itself

http://rottweilerconnection.com/test11.zip

does anyone know of a good, non-outdated method for installing and /or using both IE6 and IE7 on one machine (windows xp)?

right now I have IE6 installed because it is the most different from FF3 (my true love), but I can't test sites on IE7.

and I know (well, assume) that if I just install IE7, I can't switch back.

Hi all,

I have several CSS files to look after different browsers, but I use javascript to match the IE css with IE browsers, etc.

Can you only have one CSS file that looks after ALL browsers? So that if the user doesn't have javascript it's not a problem? I've heard of css hacks and css filters being used but I'm not all that familiar.

Ben

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?

Based on CSS, on a static XHTML-written site, can multiple languages be used? And can they be user-switchable?

Thanks,

Chris