|
CSS - Multiple Css Link Classes Not Working
Hi all, I'm a newbie to CSS but I'm giving it a good crack and trying to learn all I can, reading and experimenting etc.
I'm currently building a website for my wife's cake baking business and can't seem to get multiple CSS link classes working and I don't know why. I've been reading various websites on CSS for the last couple of hours but honestly can't see what I've done wrong. Any help would be appreciated. If you look at the site Ladybirdbakery co uk the top navigation has a .top_nav class that makes it white and the links are supposed to turn yellow and underline when you hover but they just don't. Similarly the small print links at the bottom, the mailto link underlines but the external link to my marketing website doesn't. I've tried re-writing the CSS a few times and put it through the W3 validation and it doesn't pull up any errors on my link classes that seem to be causing this issue. Could anyone offer me some advice so I can get this right and not make the same mistakes in the future? The CSS lives at the above address /ladybird.css Thank you very much. Ant Similar TutorialsIs it possible to have multiple link classes? Currently, I'm using the pseudo elements a:link, a:visited, etc., but there are a couple of places in my layout where the colors for these links are the same color as my background. Is there any way that I can single out certain links using classes and set their colors to a different color like #ffffff Thank you in advance, Jim Hi, I'm trying to use multiple classes: div class="class1 class2". As usual, IE 6 does all but not what you would expect. Please allow me to post a code snippet: Code:
<html>
<head>
<style type="text/css">
.class1 {
background-color: red;
}
.class2 {
background-color: green;
}
.class1.class2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="class1">
.class1 -- should be red
</div>
<div class="class1 class2">
.class1.class2 -- should be yellow
</div>
<div class="class2">
.class2 -- should be green
</div>
</body>
</html>
Sadly, the rule for .class1.class2 is also applied to the third div, where it should clearly NOT apply, so it is yellow instead of green. I know that using subclasses "is not safe for IE", as is CSS in general -- but is there a workaround that doesn't force me to abandon the technique? Thank you, answers appreciated! I have encountered a really annoying bug in IE6 and would be very interested to know if anyone else hase encountered it and found a solution. Look at the following example: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> .class1,.class2,.class3 { border: 1px solid black; width:400px; line-height: 100px; text-align: center; } .class1 { background: none; } .class2 { background: red; } .class3 { background: blue; } .class1.class2.class3 { background: black; } </style> </head> <body> <div class="class1">Test Content 1</div> <div class="class2">Test Content 2</div> <div class="class3">Test Content 3</div> <div class="class1 class2 class3">Test Content 4</div> </body> </html> The four divs should all be different colours as follows: div1: transparent/white div2: red div3: blue div4: black However, both divs 3 & 4 are black. The rule: .class1.class2.class3 { background: black; } is incorrectly effecting divs with only .class3. Any ideas? Hello, I am creating a message to display on my web sites. The HTML markup is as follows: <div class="Error"> <h3> <img id="Icon" src="Images/Error_Icon.gif" alt="Icon" style="border-width: 0px;"> <span>Header</span> </h3> <p>Description</p> </div> And the CSS: div.Error { background-color: #FFD9D9; border: solid 1px #FF9595; padding: 0.4em; position: relative; min-height: 1.25em; width: 120px; } div.Error h3 {} div.Error h3 img {vertical-align: middle;} div.Error h3 span {color: #B30000; font: bold 1.0em Georgia, Geneva, sans-serif;} div.Error p {color: #B30000; font: normal 0.8em Arial, Geneva, sans-serif; I have 3 types of messages: Warning, Error and Success. The only difference between the CSS of each message is the colors properties. Should I use a class named Message to define all common properties and then 3 other classes: Error, Warning and success to define the color properties: <div class="Message Error"> Or should I use three different classes? How is this usually done? Any other advice on how I am building my message is welcome to. Thanks, Miguel i have a small note that i want to put on the screen, except i want to give it the styles of two different classes. this is what i have used: <span class='smalltext, errornote'>Some text</span> except that only the latter class is actually set, is there a way that i can have both? My layout contains a vertical navigation bar. It is split up into individual images. I have created a table to organize the sliced images. I am using CSS to create a hover effect. When you mouseover the table cell, the backgroudn changes (and changes back when the mouse is removed.) This is all peachy, but is it possible for me to change the colors of the text within that table cell along with the background. Heres the CSS: Code:
.link_hover1{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:visited{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:hover{
background-image: url("images/link_img_01b.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:active{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
I tired implementing the font-color property. No use. does this have something to do with my 'td' selector? I have a feeling that this is the problem. 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! Let's say I define this: #gaga.baracuda {......} #haha.baracuda {other info....} Is this allowed? I've set-up a few link colrs in a style sheet - I see it working in mac IE, and Safari - but not IE in windows. Most of the formatting is being ignored. I'm going to try setting all attributes (link, visited, hover...) for each set but that seems like a reach. any ideas? the link: http://www.eightbyten.com/rc_store/shopcart_test.html the style sheet directly: http://www.eightbyten.com/rc_store/link.css Thanks! I'm trying to set up multiple link style schemes , but it works in IE, not in Firefox? In Firefox in a.link does same as a.intro:link. What do I do, what's wrong? a:link { color: #006600; text-decoration: underline; font-weight: bold; } a:visited { color: #006600; text-decoration: underline; font-weight: bold; } a:hover { color: #FFFFFF; background-color: #66CC00; } a.intro:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; background-color: #000000; } a.intro:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; background-color: #000000; } a.intro:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; background-color: #8DCB2E; } hello all i'm kind of new in CSS, so i'm with some questions regarding the way i can using it. For example, at the moment i d'like to have diferent link colors in the same page. Is it possible? how? I have seen the a:link option but applies only to whole page. thank in advance I'm building a site that will have a style sheet that should be applied site wide (main.css) and then some pages will have styles that should only be applied to them (custom<X>.css). Should I use multiple <link> tags to import each stylesheet or should I edit custom<X>.css and add @import "main.css"; to the beginning. Doing this would make the code look cleaner, but will the browser still cache the main.css file? Am I being too persnickety about the look of my code and just use multiple <link>s? I want to create a schema for different colored links. I'm stumped because I am pretty sure my syntax is correct, but it's not working correctly. I have created a class called "add" but my links in add are still showing up as the default. A portion of my css: Code:
a.add:link{
color: #FFFFFF;
text-decoration: none;
}
a.add:visited {
color: #0000FF;
}
a.add:hover {
color: white;
text-decoration: underline;
}
My link using "add": Code:
<a class="add" onclick="window.open('add_tnosc_password.jsp', 'window_one');" style="cursor:hand">Add</a>
Hi all, Code: .box1 {
position: absolute;
top: 20px;
left: 20px;
width: 220px;
height: 152px;
background: transparent url(../images/box-1_im-back.gif) no-repeat;
padding: 50px 54px 0px 25px;
}
I've got a div with position absolute on it, width, height, padding, etc. I've got an A tag inside it which I've also made position absolute, and expanded it to cover the whole div, so it acts as a button over the whole div and it works in everything BUT IE6 and as much as I'd like to forget about this browser, it's still quite common, so. Anyone know why this is happening or how I can fix it? Code: .box1 a {
position: absolute;
top: 0px;
left: 0px;
color: #0b54a9;
font-weight: bold;
padding: 126px 0px 0px 26px;
width: 260px;
height: 48px;
}
If I take the A tag out of the div and absolute position it over the div it works fine, the only trouble is I really need to keep the A tag inside the div. I generate the following in my PHP script and it seems to work in IE but not in FF or Chrome. It doesn't redirect to the pdf file nor does it appear in the status bar when I mouse over it. <div id="downloadts"><a href="URL address/Tearsheets/MP-160.pdf" class="button">Download Tear Sheet</a> </div> The downloadts looks like #downloadts { height:auto; width:150px; border:thin; background-color:#999999; position:absolute; top:365px; left: 15px; text-decoration:none; } and the button is in a separate style sheet as .button { font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif; font-size: 12px; color: #FFFFFF; font-weight: bold; font-style: normal; text-decoration:none; line-height: 20px; background-color: #999999; } I don't see what is wrong. It appears on the page as I expect it to. I am baffled and don't doubt it is something simple. It passes validation as well. You can see it in action at: mandp dot lamster dot org/product.php?coll=French%2040%27s&catno=MP-160 Thanks for any help. Hal Here is the page the > Enlarge link below the picture doesn't work in FF - but it does in IE. I was wondering if it was because it was an absolute position?? Or is something else going on?? Here is the css: Code:
#productPage .compact a {
text-decoration: underline;
position: absolute;
right: 175px;
top: 200px;
}
Here is the xhtml: Code:
<span class="productImg"><img src="../images/compact.jpg" width="249" height="205" alt="Vitalograph COMPACT spirometer" /></span>
<span class="compact"><a href="../images/compact_large.jpg">>Enlarge</a></span>
hi, i am using a navigation bar at the top of my pages (http://sa-ewb.org.uk ) that has been designed with CSS and java (thanks to http://www.gazingus.org ). I have set it up so that visited links have no decoration and do not change colour in the navigation, as opposed to the main body of text where they do behave as normal links. i.e. a:visited {.......normal behaviour and a.actuator:visited {.......no changes to appearance this works fine in firefox (gotta love it!) but in internet explorer, for some reason, it ignores the 'a class="actuator"' and uses my normal link rules. (gotta... errr... not love it!) any ideas? many thanks, jim. I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this? Whew, it's been a while sin'ce i've been here. Thanks in advance! ~Brendan 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; }
my layout is pretty simple... Code: <div class="container"> <div class="topbar"> <div class="list"> <div class="gametitle"></div> <div class="percentage"></div> <div class="system"></div> </div> </div> i have the following CSS applied to gametitle, percentage and system... for somereason, gametitle doesnt work... Code: .gametitle {
float:left;
width:250px;
color:#FFF;
}
.gametitle a:link,
.gametitle a:visted,
.gametitle a:hover {color:#FFF;}
.percentage {
float:left;
color:#FFF;
}
.percentage a:link,
.percentage a:visited,
.percentage a:hover {color:#FFF;}
.system {
float:right;
color:#FFF;
}
.system a:link,
.system a:visited,
.system a:hover {color:#FFF;}
here is the page where all this code is going down... Mini Catalog |
|||||||