CSS - Link Styles

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;
}

My link hover style isn't happening consistently in either browser. It seems to work better in FF than in IE7. Does anyone have a clue as to what I could look at to see what is causing this?

All my navbar links behave just fine...

URL removed

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

I am trying to use the following in my external style sheet for my links:

Code:

a:link, a:visited{
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

}

a:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

}

a.big {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;

}

a.big:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;

}

a.bigger {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;

}

a.bigger:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}

My problem is that I can't get big & bigger to work properly in Internet explorer. When I hover over the link it goes to its proper size but when not hovering it stays at 11px.

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;

}

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

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. :-)

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?

Hello -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body.

Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag.

I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place.

So, how do we handle using different style properties for the same tag within the body?

Perplexed,
Mike

I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this:
Quote:
hr
{
border: none 0;
border-top: 1px dashed #000;
width:98%;
height: 1px
}

However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap?

Any ideas?

Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me.

The code is as follows

<div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '>

Now what happens is the words I type in this box are beautifully laid out because of the padding...

The images placed in the box should stretch border to border - but obviously don't because of the padding....

Can anyone please tell me what I can change to give my text padding but images with no padding?

Thanks so much

is it possible to modify the look of a checkbox input field with CSS? (background, check color, border, etc)

thanks,

--Lone

On the site I am starting, I am following the suckerfish style of using a ul/li menu. That works fine. A little position difference I have to figure out between IE and the real browsers but it does work. Problem I run into is when one of my pages includes a ul in the content. Using the css as is, that ul in content is displaying incorrectly. It should just go down the page but instead goes across the page. In the stylesheet, I tried making two li's, li.menu and li.info. That broke the menu but the content list worked. I tried adding .menu to various other components in the css but couldn't get both to work. I use php to include the code for the menu so I don't have to go to each page if I want to make a change.
Could someone give me a hand on making two the two li's work from a style sheet so that both the menu and the content work on that page. Here are the pages.
The web page:
http://www.cacct.com/new/faq.php
The stylesheet:
http://www.cacct.com/new/css/sitestyle.css
The menu code:
http://www.cacct.com/new/php/menu.html

This is the first page I built using other methods before changing to stylesheets: You can see what the content should look like.
http://www.cacct.com/new/faq.html

Thanks

tk

i imagine this has to be one of the easiest questions, yet i have looked at tons of css table pages and cant find the answer.

All im trying to do is create different styles for my tables on my website for example:

Code:

<table class="table1">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>

<table class="table2">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>

table 1 would have the following:
black background
white text
underline text

table2 would have the following:
green background
black text
larger fonts

the above colors are just an example, but my question is how would i do my CSS to support this if i wanted it to look this way?

Thanks for any help.