CSS - Link Styles Not Behaving

Hi there,

If i have a css class called td.header_menul how do i change the link colour for this class?

I know how to change normal link colours but how do i change them to that specific one?

Thanks!

Hi there,

Is it possible to have the same name for a link style to a text style?

For example:

a.small:link{....

and

.small{...

Many thanks!

Does anyone know if there is a css property that applies to links that are linked to anchored tags on the page?

Can there be a selector just for links that go to an anchor tag?
I don't want to use a seperate class for only those links.

thanks

hi guys,

I'm sure this is an easy fix but it's driving my little non-technical mind nuts...

I have an external style sheet for a site, and it appears to be linked correctly as altering it does affect the text in my site.

HOWEVER, the elements I've included to keep web links displaying as normal text aren't working (visited, hover, active, etc etc)

Please help.

Code below.

.main {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
link {text-decoration: none;
visited {text-decoration: none;
hover {text-decoration: none;
active {text-decoration: none;
}

I have 2 content areas. One with id sidebar2 and another with id maincontent.

I want the links in these separate content areas to have different hover colors and possibly other characteristics.

My problem is, the styles for sidebar2 are being overwritten by the styles in maincontent as it is below it in the style sheet (cascade).

The hover of the words "Good Game" in this example is green which clashes with the background of the sidebars content. It should be a blue color.

Why does a completely separate id overwrite the styling in a previous id? How can I improve this code to get the desired results.

Line numbers eg (line 140) are just referencing where the code appears within the stylesheet and are not actually in the css sheet.

HTML example:

<div id="sidebar2">
<h1>Daily Content</h1>
<ul>
<li>
<a href="(URL)">Good Game</a>
</li></ul>
</div>


#sidebar2 li a:link, li a:visited (line 140)

{

text-decoration: none;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
color: #336699;

}

#sidebar2 li a:active, li a:hover (line 148)

{

text-decoration: none;
color: #2986aa;
text-indent: 5px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;

}

#mainContent a:link, li a:visited (line 157)

{

text-decoration: none;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
color: #003366;

}

#mainContent li a:active, li a:hover (line 166)

{

text-decoration: none;

color: #99cc66;
text-indent: 5px;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;

}

I need to create signature files for (Outlook) for my group. Until 2 days ago I knew nothing about css but I am learning. Coz Outlook only picks up the body from an html file I cannot use external css sheets, so all coding must be done inline. Only thing I can't figure out is the style for a weblink.

Here's s snip of the relevant line:
<a href="http://www.blabla.com.au" style="font: bold 8pt arial,sans-serif">
<span style="color:#ef812a; font-decoration: underline">www.blabla.com.au</span></a>

The code (probably shabby) renders fine in Dreamweaver, but the sig in Outlook the underline shows blue - I want the underline for any link (visited, not visited) to show as #ef812a which is sort of orange. I can't figure out how to insert the a:link etc stuff.

Thanks
James

Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks.

P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-)

Is it possible to set link styles that are defined inside of a heading tag...

for example,

h1 a:link{bleh}
h1 a:visited{bleh}
h1 a:hover{bleh}

I tried it... but it doesn't want to go, I'm thinking I might have to think of another solution

Hey all,

So i have two files my html file:
Code:

 
<html>
<head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<a href="#">this is a test</a>

</body>
</html>

And my css file:
Code:

a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}

except that the styles don't work on the links. If i put the styles in <style> tags in the html head it works, but in a seperate file they don't, can someone help me?

thanks!
- legit


Edit, whoops sorry, I had the wrong name for my css file

I need some really rediculous link styles, like all of the cool fading/pixelating ones that work on IE - but I can't find any for Firefox. Does anyone know if they exist, or where to find them?

Anyone know how to fix the bottom bars width?
Page he
http://www.milztech.net/

Cheers!

I am almost finished with a site, but the buttons in the main navigation are behaving badly; when you put the mouse over them (only in IE of course..) they only activate when you are about 10 pixels away from the top of the page.

Link-
http://www.hamlettinstruments.com/beta/

can someone help me figure out why this is?
Thanks, ad

Ok ive got this small concept i need to work in order for me to implement it on the actual website.

this code works 100% correct to how i want it to in FireFox.

I have an image within a table TD tag , but i need the image to float outside the tables borders, i can do this with the margin-right: -20px;
In firefox i can still see the full image been displayed, but in IE the image falls behind the table limits and then does not display any more.

Please help me sort this one out.

Code:

<html>
<head>
	<title>Untitled</title>
    <style>
    .test {
        margin-right: -30px;
        float: right;
	    z-index: 2;
    }
    .table{
        z-index: 10;
    }
    </style>
</head>
<body>
<table align="center" width="300" border="1" class="table">
<tr>
	<td>&nbsp;</td>
	<td><img class="test" src="http://nexxon.galore.co.za/images/stories/animated_slidshow_02gif.gif" /></td>
</tr>
</table>
</body>
</html>

I have a new layout I'm currently working on. It's got a container with 2 columns, one floated left and one floated right.

Inside the left column (lcol) I have a series of content areas making up two columns.

Floated left and on the upper left is a flash video. Below that and also floated left is a table of contents list.

On the right side of lcol, my intent is to add a news list and an events list. I have the news list floated right with the left floats cleared.

My issue is that the news list is pushing way to the bottom of the screen even though my width is not larger than the available width for that column.

In IE6, the list is behaving as expected, but not in FF which I always do my primary testing in, so that's what led me to believe something is wrong.

Here is my code (remember the site is in its initial development) I've also attached a screenshot of the appearance in FF.

Code:

<!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>Orion Main</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
			var flashvars = {};
			var params = {};
			params.play = "true";
			params.loop = "false";
			params.menu = "true";
			params.quality = "high";
			params.scale = "showall";
			params.wmode = "window";
			params.devicefont = "false";
			params.allowfullscreen = "false";
			params.allowscriptaccess = "sameDomain";
			var attributes = {};
			swfobject.embedSWF("orion_intro_video.swf", "intro", "320", "310", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
  <div id="logo"><img src="images/orion_logo.jpg" alt="Orion Logo" title="Orion Home" width="154" height="100"/></div>
  <div id="container">
  <div id="lcol">
    <div id="intro">
        Your browser cannot display FLASH, please follow the link below to install it.<br/>
        <a href="http://www.adobe.com/go/getflashplayer">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
    </div>
    <ul id="nav">
      <li><a href="#">Thought Leaders</a></li>
      <li><a href="#">Success Stories</a></li>
      <li><a href="#">Validation</a></li>
      <li><a href="#">Strategic Partners</a></li>
      <li><a href="#">Environmental Stewardship Award</a></li>
      <li><a href="#">Newsletter</a></li>
      <li><a href="#">Energy Solutions</a></li>
      <li>
        <a href="#">Media</a>
        <ul>
          <li><a href="#">News Releases</a></li>
          <li><a href="#">Media Kit</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </li>
      <li><a href="#">Investor Relations</a></li>
      <li><a href="#">Partners for Profits™</a></li>
      <li><a href="#">Agricultural Division</a></li>
      <li><a href="#">Orion Asset Management</a></li>
    </ul>
    <ul id="latest_news">
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
    </ul>
    <ul id="events">
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
    </ul>
    </div><!-- end lcol -->
    <div id="rcol">
    
    </div><!-- end rcol -->
  </div>
</body>
</html>

CSS

Code:

@charset "utf-8";
/* CSS Document */
body {
  font-family: Verdana, Geneva, sans-serif;
  margin: 15px auto 0;
  padding: 0;
  text-align: center;
  background: url('../images/body_back.jpg') repeat-x #373737;
}

#logo {
  width: 960px;
  height: 100px;
  margin: 0 auto;
  text-align: left;
  background: url('../images/header_back.gif') repeat-x #b4de5a;
}

#container {
  width: 940px;
  margin: 0 auto;
  height: auto;
  text-align: center;
  background-color: #FFFFFF;
  clear: left;
  padding: 0px 10px 10px 10px;
  overflow: auto;
}

#lcol {
  float: left;
  width: 626px;
  height: auto;
  overflow: auto;
  text-align: left;
}

#intro {
 text-align: left;	
 float: left;
 width: 320px;
 height: 310px;
 background-color: red;
}

#nav {
  clear: left;
  width: 320px;
  height: auto;
  list-style-type: none;
  text-align: left;
  padding: 0;
  margin: 0;
  float: left;
}

#latest_news {
  background-color: green;
  height: auto;
  width: 250px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
  float: right;
  clear: left;
}

#events {
  clear: right;
  float: right;
  width: 250px;
  height: auto;
  background-color: yellow;
  list-style-type: none;
  
}

#rcol {
  float: right;
  width: 303px;
  height: 500px;
}

www.clydesdaleframes.com/test/fortran.html

Does anyone know why my "next page" button's background is extending the full width of the text like that?

css is www.clydesdaleframes.com/test/styles.css

thanks in advance,
Chris