CSS - Different Colored Link

I know the user can enable printing of bg grcs and colour,
this is an administrative thing so I can put in the manual that they need to do that in their browser if they want to print a certain page. I have certain rectangles on the page that align perfectly with areas on the background graphic on the screen. However, when I print preview in Firefox this synch is lost and the rects don't line up with the bg graphic. Kravvitz will hate this page cuz it has a few xhtml errors. I don't know how to make those errors go away without ruining something else. For example,
"no system id specified."

Quote:
Your document includes a DOCTYPE declaration with a public identifier (e.g. "-//W3C//DTD XHTML 1.0 Strict//EN") but no system identifier (e.g. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"). This is authorized in HTML (based on SGML), but not in XML-based languages.



so if I put that system identifier in it then
the page fails to lock if I render a secure version of it because http://www.w3.org is insecure content, and erodes consumer confidence.


The "name" attribute well if you don't have it when you post, I don't think the posts will register it, will they?

I have proprietery attributes also and they are kinda necessary.
The rest of the errors I could probably clear, but 21 is not so bad compared to 2,874.....


Anyway here is an example
http://demo.tixrus.us/98

How can I get this page to print correctly???

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}

Hi

I have this which IE needs to call "menu-ie.css" and all other browsers need to call the "menu.css".

Code:

<!--[if IE]>
   <LINK rel="stylesheet" href="inc/menu-ie.css" title="contemporary" type="text/css">
<![endif]-->
<LINK rel="stylesheet" href="inc/menu.css" title="contemporary" type="text/css">

Just tested and it doesn't work... it only calls "menu.css"

Tried it with "if IE7" and "if IE6" with no avail.

--------------

IE Style:
Code:

 #menu * {margin:0;} 
#leftcolumn {width:150px; float:left; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
 .dropdown dd {position:absolute; top:0; overflow:hidden; width:207px; display:none; background:#fff; opacity:0}
.dropdown ul {width:203px; border:2px solid #C7DDCE; list-style:none} 
.dropdown li {display:inline}
#top a.loook, #top a.loook:active , #top a.loook:visited{display:inline;padding:2px;  text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
 .dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:199px} 

All Others Style:
Code:

 #menu * {padding: 0;margin:0} 
#leftcolumn {float:left; width:150px; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
 .dropdown dd {position:absolute; top:0; overflow:hidden; width:184px; display:none; background:#fff; opacity:0}
.dropdown ul {width:180px; border:2px solid #C7DDCE; list-style:none} 
.dropdown li {display:inline}
#top a.loook, #top a.loook:active, #top a.loook:visited {display:inline;padding:2px;  text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
 .dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:180px} 

Anyone know how this is done?

I want to change a link within a set of links. It is a vertical menu and it appears as a sub-category which i want it to look different.

How do i reference the sublinks? I did this which has no effect.
<a href='".$mypath."' id='catsub2'>";



//these settings override it still.
#blanksideboxContent.sideBoxContent a{
color: #000000;
font-size:1em;
font-family:verdana;
font-weight:bold;
text-decoration: none;
border:2px outset #000000;
background-color:#5ec82a;
width:125px;
display :block;
margin-left:2%;
}


#catsub2 a{
width:80px;

}

hi everyone,
im wondering why my a:link etc is not working on the following page www.think2go.ch/index_template.htm, namely on the top menu where it says "seite drucken" "weiter empfehlen" "home" and "kontakt". it works fine with IE, but does not in other browsers.
what its suppossed to look like is:
a:link.2{
color: white;
text-decoration: none;
font-weight: bold;
}
a:visited.2{
color:white;
text-decoration: none;
font-weight: bold;
}
a:hover.2{
color: #85ADC0;
text-decoration: none
font-weight: bold;
}
a:active.2{
color:white;
text-decoration: none;
font-weight: bold;
}

sample code: <a class="2" onClick="window.print()" href="#">Seite drucken</a>

any help is greatly appreciated!
thanks...

I'd like to be able to make some links on my page one color and others a different color so they show up appropriately on different backgrounds. how would i go about doing this?

thanks

Hi, i was wondering how to stop it putting hyperlink decorations on images, i thought that this following code would work but it doesnt could someone post the right code please.

{text-decoration: none;
}

To start with, here's a block of code:

my style.css

Code:

.main { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 11pt;
 	color: #FFFFFF;
 	background-color: #666666;
 	text-align: center;
 	vertical-align: top;
 	border: #000000; } 

a.main:link  {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #666666; }

a.main:visited { 
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #666666; } 

a.main:hover {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FF8A00;
  text-decoration: underline overline line-through;
 background-color: #666666;} 

a.main:active {  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FF6F00;
  text-decoration: blink;
  background-color: #666666; }

my html-file's thingies:

Code:

 <div id="Main" style="position:absolute; width:50%; z-index:5; left: 25%; top:
 25%; background-color: #333333;
 layer-background-color: #333333;
 border: 3px none #000000;" class="main">

And the problem:
With Windows XP /w IE and Linux /w Opera I get the same stupid looking detail - the backgrounds of the links are different from the div's background. So that the dark grey part is broken by the links and their light grey boxes. Looks horrific..

By the way, is there a good place for language references for CSS, PHP and HTML in the internet (URL)?

Hi, I am having trouble setting up different link styles in my site.

My code is:

Code:

.menu {
	font-family: Helvetica;
	font-size: 18px;
	color: #FFFFFF;
	
}

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

a.menu:visited {
	color : #FFFFFF;
	text-decoration : none;
}

a.menu:hover {
	color : #FFFFFF;
	text-decoration : underline;
}




a:link {
	color : #FFFFFF;
	text-decoration : underline;
}

a:visited {
	color : #FFFFFF;
	text-decoration : underline;
}

a:hover {
	color : #FFFFFF;
	font-weight : bold;
	text-decoration : underline;
}

From what I've read this should setup a default style for all links to follow, as well as define an alternate link style for anything in the menu class.

So when I use the following code:

<div class="menu"><I>01</I> &nbsp; <a href="">HOME</a></div>

.. I would have thought the link would follow the style for .menu

But it doesn't. It takes the style of the default links as well.

How do I properly setup an alternate link style??

Hi,

Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website?

Thanks

hi, i have this style for a div hover effect, but how cani stop my other links having this efect? i want 2 different link styles.

Code:

<style type="text/css">     
a:link
{
text-decoration:none;
color:#000000;
background:#B1DB9D;

width: 200px;
display:block;
}
a:active
{
text-decoration:none;
color:#000000;
background: #A2D389;

width: 200px;
display:block;
}
a:visited 
{
text-decoration:none;
color:#000000;
background:#B1DB9D;

width: 200px;
display:block;	  
}
a:hover
{
text-decoration:none;
color:#000000;

width: 200px;
background: #A2D389;
display:block;	  
}

</style>

Any ideas?

I know how to use the class etc but i can't get he link part right.

Thanks