|
CSS - Overriding Pseudoclasses
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. Similar TutorialsI 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, 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... 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 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 one css file which is linked to all my html pages That css file defines a style for all my <a> tags ie - a:link, a:visited, a:hover etc. Theres one html file where i need a different style for some of the <a> tags ive set a sepecific class on these tags ie: <a class="set1" etc and in my css file ive tried the following .set1 a:link { etc } but for some reason this doesnt override the style on the generic a tags ie it seems to keep using a:link { } ignoring the .set1 a:link { etc } help! please delete 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 Hi there! http://pastebin.com/m46dae086 Basically, see line #218? I define a background image for my lists, and it works great. See line #473? I try to erase the background image if the <dl> class has the "forum" class attached to it. That background's not going away. What am I doing wrong? On my site, we use CSS to change the appearance of all form fields, using the following: INPUT { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 13px; color: #484848; background: #EFF4F9; border: 1px solid #484848; padding: 2px; } Unfortunately, I have a single submit button that for various reasons, I want to have looking like the normal, gray, ugly button. Is there some way to turn off the CSS for this single button? Or somehow override the CSS to make it look like a normal button? I am working in Drupal and have a menu with secondary levels. I have coded css on the menu a tag with borders and no background. .primary-menu-inner ul.sf-menu a { color: #FFFFFF; display:block; border-left:1px solid #ffcc33; border-right:1px solid #6f4c23; } I am trying to override the .primary-menu-inner ul.sf-menu li.active-trail .primary-menu-inner ul.sf-menu li.active-trail { background: url(../images/nav.png) no-repeat right -64px; border-bottom:1px solid #a67c52; border-right:1px solid #a67c52; border-left: 1px solid #38230b; visibility: visible; } to where the borders settings on the a tag does not show up on the li.active trail. Any suggestions would be great... Hey all, I'm having an issue with the float property. I have 2 nested div tags both floated left, to create two columns, but the div tag holding them doesn't seem to stretch around them. it's looks basically like this... <div id="container"> <div id="leftCol"> stuff </div> <div id="rightCol"> more stuff, WOOT! </div> </div> I only run into the problem with FireFox, so i know that i'm not doing something right! Can anyone help.. thanks! In my main CSS file, the background-color is set to #FFFFFF (white) however this also erased my background images in the cells of my table i have tried to add them with style tags, but the main CSS still overrides Top of the table + cell with bg PHP Code: <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td width="766" height="295" valign="top" style="background-image:url(images/row1.gif); background-repeat:no-repeat "> This is the main CSS: PHP Code: body,td,th { font-family: Tahoma; font-size: 11px; color:#5D5D5D; background-color:#FFFFFF; } body { font-family: Tahoma; font-size: 11px; color:#5D5D5D; background-color:#FFFFFF; } |
|||||||