CSS - Overriding Style For Link Ie <a> Tag

I have a menu where the submenu li's have a blue/darker blue background color and hover color.

I have one set of submenu items where I would like to change the background and hover colors for that set only, but haven't been successful in writing the second set of code, the original colors still show up

Here's the part of my styles for the list that I'm trying to change..
Code:

/* original backgrounds for the menu */
ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

Is it the way I tried to rename the style?
Code:

/* change backgrounds to shades of green for one sub menu */
.green ul.menu li ul li a {
  background: #afe4bf;
  color: #000;
  padding-left: 20px;
}

.green ul.menu li ul li a:hover {
  background: #88b796;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

thanks in advance for any help, Kathy

I'm trying to set a link style for thumbnail images I have on my site but am having difficulty getting the style to take over the a { } and a:hover { } styles. Here is an example of the styles I have set;

Code:

a {
color: #005D93;
text-decoration: none;
}

a:hover {
color: #990000;
text-decoration: underline;
}

#thumb {
position: relative;    
float: left;
padding-left: 21px;
padding-bottom: 10px;
}

#thumb img {
width: 96px;
height: 145px;
}

#thumb img a {
text-decoration: none;
border: 2px;
border-color: #F5F6F7;
border-style: solid;
}

#thumb img a:hover {
border-color: #990000;
}

An example image tag is as follow;

Code:

<div id="thumb"><a href="details/page2.html" onclick="NewWindow(this.href,'name','640','460','yes');return false;"><img src="Images/2714.jpg"></a></div>

With the above mentioned, the thumbnail is surround by the a color of #005D93 and not the border color I expected. An example can be seen here - Example. I know it must be something fairly obvious I'm missing. Any help would be greatly appreciated.

Regards,
JT

Can someone tell me why css style settings for links won't effect a mailto: link? Is there anyway to make it happen without individually coding style into each mailto: link?

Thanks,
HeadElf

Hello,
My unvisted links within a div section are not working, they default to Red which is set up in the CSS as a catch-all.
I see this happenning with IE 6.x and FireFox 1.5 and netscape 7
Example HTML code where the unvisited link appears in Red and it should be in Grey:
Code:

<div class=medGray>
<a href="/data/tmp/E300vV60cB.s5ukal.diblu.tmp">Download</a> extracted device records (4 records).
</div>

Here's my snippet from my CSS file:
Code:

a.medGray:link {
	text-decoration: underline;
	FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: Verdana, Tahoma, sans-serif;
}
a.medGray:visited { color:#666666; }
a.medGray:hover { text-decoration: underline; }
a.medGray:active { color:#666666; }
/*-- Default Red--*/
a:link {
text-decoration: underline;
font-family:Verdana, Arial, Helvetica; font-size:12px; color:#CC0000; }
a:visited { color:#999999; }
a:hover { text-decoration:underline }
a:active { color:#CCCCCC; }

this is what i got: a menuBox


Code:

<tr align="center" valign="top" height="120">
  <td height="120">
    <div class="menuBox">
      <div class="menuBoxHeader">Menu</div>
      <p><a href="blah-blah4">4.</a></p>
      <p><a href="blah-blah5">5.</a></p>
      <br>
      <p>some text>
    </div>
   </td>
</tr>

I use for the links

Code:

a:link, a:visited, a:active { color: #336699; text-decoration: none;
font: bold 11px/1px Verdana, Arial, Helvetica;
}

for the menuBox

Code:

.menuBox     { color: #c36;
 font-style: normal;
 font-weight: bold;
 font-size: 9px;
 line-height: 2px; font-family: Verdana;
 background-color: #fef;
 border: solid 1px #c36 }

and for the menuBoxHeader

Code:

.menuBoxHeader    {
	color: #efe;
	font-style: normal;
	font-weight: bold;
	font-size: 9px;
	line-height: 13px;
	font-family: Verdana, Arial, Helvetica;
	background: #c36 0px 0px;
	margin: 1px 0px 0px;
	position: relative;
	top: 0px;
	left: 0px;
	width: 130px;
	height: 16px }

So now my two questions.

1.
What do I have to do to let it look in all the browsers the same?
In Netscape 7.2 the links are to close to each other. In IE6 to width ( vertical ).

2.
The menuHeader is on the most browsers correct ( mac and Win ) except MS. There is no 1px between the border and the red area. Or... are the others wrong and MS right?

I hope that someone can help me?

When viewing my website, the font is too small in IE/Opera/Crazy Browser. I am a Firefox user and the site looks the way I want when viewed in Navigator & Firefox. I don't want to change that.

I'm thinking that I can use java script to make a page link to a specific style sheet, based on the user's browser. Unfortunately, I'm not a scripter and I haven't managed to find one that suits my purpose.

Is there a simpler way to accomplish this?

Thanks

Hi,

I have a series of images that act as hyperlinks to other pages.

I want the image border to initially be set to none, but when I rollover the image I want it to turn white, 1px wide.

Tried doing this with normal link styles, but it ain't workin.

So how do you do this?

Thanks

mM

Hi,

I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line.

I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other!



My page code:

<div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1>
</div>



My stylesheet code:

#garden-designer-title {
position:relative;
left:0px;
top:0px;
padding: 0;
margin: 0;
width:526px;
height:51px;
z-index:7;
}

#garden-designer-title a {
position:relative;
font-size: 46px;
font-family: verdana, arial, helvetica, sans-serif;
color: #009999;
font-weight: normal;
text-decoration: none;
}

#garden-designer-title h1 a {
display: inline;
font-size: 29px;
font-family: verdana, arial, helvetica, sans-serif;
color: #9482A4;
font-weight: normal;
text-decoration: none;
}

Does anyone know what I'm doing wrong?!

Many thanks!

I am using a stylesheet to set some styles on my tables etc.

I want to override a table that is inside of a <div> to use a separate style... is this possible and if so how?

I tried using div id="idhere" and then setting a style with that ID but it didn't seem to work.

Thank you.

Hi,

Is there a way to tell the browser to replace certain colours with other colours? For example replace #FF0000 with #00FF00?

Also is there anyway to refer to the parent of an element?

Thanks,
Matthew

I'm making changes to a web application and right at the top of the CSS of the common header for the generated HTML there are pseudoclasses for the link colors. a:link a:hover.... etc.

I was trying to change the color of a few links further down on the page by creating seperate classes and I was getting very odd results. Some links would change color and some would not. Finally I noticed the pseudoclasses at the top and commented them out. Suddenly all my colors looked GREAT in internet explorer, but it seems that Mozilla is ignoring my seperate classes and making the links into the browser default.

Here is a summary of my generated code right now:

CSS:
a:link,a:active,a:visited { color : #5E6C85; }
a:hover { text-decoration: underline; color : #DD6900; }

.indnav { font-weight: bold; font-size: 11px; color : #000000; }
a.indnav { text-decoration: none; color : #000000; }
a.indnav:hover { text-decoration: underline; }


HTML:
<span class="indnav"><a href="index.php" class="indnav">(link text)</a></span>


So what I would really like is for the pseudoclasses to apply for all links, except for when I define a specific class it should override the pseudoclasses. How do I do this? Thanks so much for your time in answering.

Hi, I am trying to add bottom borders and image bullets to only the first level of unordered lists and no matter what is code, I get them everywhere.

Can someone offer some insight (or where I can get some) for targeting specific ul li levels?

Thanks...

so...
having this problem where i have some css styles applied to form inut boxes, and one of them asks for the user to input his/her email address. IE, thinking it's being helpful, is overriding my nice green background with an ugly yellow background.

I've done some testing, and if i put the word "email", "e_mail", "e-mail", or even "mail_e" in either the html text NEXT to the blank, or in the name of the INPUT tag, IE assumes i want it to be yellow.

any way of overriding this?

CSS:
Code:

.inputBox {
	border: 1 solid black;
	background-color: #bcdd4a;
	font-size: 12;
	width: 200;
	height: 16;
	color: #145e16;
	font-weight: bold;
}

HTML:
Code:

<td valign=top>E-mail:</td>
<td valign=top><input type="text" class="inputBox" name="emailAddress" size=20></td>

IE Version: 6.0.2800.1106
LINK: http://www.t-2.biz/contact.php

please help, frustration setting in.

cheers \\ kfancy

I have this tag in an external css file

Code:

td {
   text-align:left;  //and yes i know that its left by default
}

Inside my html file I have a td with alignment set to right, which according to my understanding should override the external css file, however it doesn't. The content is still left aligned. Why is that?

Thanks