CSS - Link Styles In Seperate File Wont Work

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;

}

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!

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

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.

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

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!

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

I have the following coding

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>CSS Sample Page</title></head>

<body>

<table style="width: 765px; height: 426px;">

</table><div style="text-align: center;"><!-- First Row contains banner and tagline--></div><table style="width: 765px; height: 426px;">
<tbody>

<tr>

<td style="text-align: center;" width="50%"><font size="7">Web News</font></td>

<!-- spacer cell -->
<td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>

<td style="font-weight: bold; text-align: left;">"The latest in up-to-the-minute Web news,discussion, techniques, and <br>trends"</td>

</tr>

<!-- Second Row contains headline-->
<tr>

<td colspan="3">
<h1 align="center"><br></h1><h1 align="center">Web Developers Embrace CSS</h1>

</td>

</tr>

<!-- Third Row contains sub-head -->
<tr style="font-family: Helvetica,Arial,sans-serif;">

<td colspan="3"><h2 style="text-align: center;">Simple syntax, powerful design
tool</h2>

</td>

</tr>

<!-- Fourth row contains article columns -->
<tr valign="top">

<td>
<p class="copy"><span style="font-variant: small-caps;">&nbsp;&nbsp;&nbsp; Cascading Style Sheets (CSS)</span> is a style language for the
web. It uses common printing and display terminology to allow HTML and
XML authors control over the way web pages look.</p>

<p>Although designed in 1996, CSS is just now becoming a
useable style language because of a lack of support from the major
browsers. IE 5.5 for the Macintosh, released in 1999, is the first
browser to completely support the CSS1 specification. Support varies
across browsers, but both Netscape 6 and IE 5 for the Windows platforms
offer more complete (but still not perfect) CSS support.</p>

</td>

<!-- Spacer cell --><td>&nbsp;&nbsp;&nbsp;&nbsp;</td>

<td>
<p>&nbsp;&nbsp;&nbsp; Style sheets accomplish the separation of content and
style that is integral to the open nature of data on the web.
Currently, web page code mixes both document structure information and
browser-based display properties, limiting the cross-platform
compatibility of the content.</p>

<p>With style sheets, the display properties are separate
from the content. This accommodates the diverse variety of devices that
are becoming available to browse the web. Whether you come to a web
site with a Palm Pilot, PCS phone, or Windows CE device, the server can
supply a style sheet that matches your display device. CSS2 supports a
variety of media devices, including print, that allows content
providers to single-source their data.</p>

</td>

</tr>

</tbody>
</table>

</body></html>

all works so far but the problem I am having is adding specific div tags to the H2 elements.
DIV class="subhead"> Simple syntax,powerful @Code in Nl 2nd:design tool</DIV>

if i try to add this style rule i get the above text show up in the browser and it wont align centrally.

also the cascading style sheets wont show up as small caps.


can anyone help me Im sorry to ask here but know of nowhere else to ask,

can someone please advice me or forward me to somewhere that can help please?

thanks

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?

I am regreting taking this course so bad...Thanks alot for your help in my last problem, Im onto assignment 2 now and dont have the slightest clue what to do. The instructions are so unclear, and nowhere anywhere on the internet does it give a straight forward example of how to do a CSS.
I am starting with a blank page, using text pad link to a strict html. I dont know where to start and what to type. I am trying all the codes such as <h1> to put in my title and it wont work!
I got it to change color with the body color property but thats as much as I can do.
Can anyone give me some pointers on how to put heading and writing in my page, why wont it work? Is there a difference between this and when I put my markup in WYSIWYG? All I need to start is to put in my title Christinas cat page...
What does a stndard layout look like that will be easy for me to understand?
tyvm

Hello everybody!

Im am now designing a webpage with a pull-upmenu.

The menu can be seen he
http://www.fidelin.se/ucon/index.php

The problem in IE7 is that the dropup-items will disappear when you move the mouse over them. Any suggestions on how to solve this?

See the code in the post below.

I have not constructed the menu myself, as you might see.

Thanks in advance
Johan

Hi all,

I am trying to do something that I think is trivial, but just cannot seem to get this to work in IE!

I am trying to draw an IFRAME that contains a gray background that contains a document that has a white background. The result is supposed to make the scrolling document in the IFRAME look like a white piece of paper with a gray border of 8 pixels.

This works perfectly in Safari and Firefox, but no matter what I try, I cannot figure out how to get this to work in IE (IE8 specifically).

Here is the code: PHP Code:
<iframe name='monkey' src='poopy.html' scrolling='auto' frameborder='0' 
style='background-color:gray;width:500px;height:150px;'></iframe> 



And the document in the IFRAME is trivial PHP Code:
<div style='padding:8px;border:1px solid black;background-color:white;'>
This is a bunch of txt THis is a bunch of txt ... (repeat this 
text a bunch so you have a scrollbar) 
</div> 



As far as I can tell, IE implements the background-color attribute for IFRAMES, but it seems to ignore the color - either that or its whacked-out box model requires some kinda bizarre workaround that I cannot find.

Thanks in advance for the help.

-- Jon

edit: the sites @ www.tomaustin.dsl.pipex.com/webdev

Ive been doing some googling and cant find out how it works

how do i apply attributes like a:link, a: hover to an image

I had some like

Code:

image a:hover, a:link, a:active, a:visited {
     border: etc..
}

this does not work..it comes up with the horrid blue and purple backgrounds

how do i do it?

tom:


)