|
CSS - Css Menu Active Link Does Not Work
Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css.
I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link. but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions. PHP code: Code: <?php
$block = ( is_front_page() ? 'h1' : 'div' );
// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable
?>
<?php echo "<$block class='blog-title'>"; ?>
<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>
<p class="description"><?php bloginfo('description'); ?>
<ul id="menu">
<li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
<li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
<li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
<li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>
CSS code: Code: #menu {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#menu li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#menu li.last { padding: 0; }
ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }
ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }
ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }
ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }
ul#menu li#home a:hover { background-position: 0 -30px; }
ul#menu li#archives a:hover { background-position: -84px -30px; }
ul#menu li#news a:hover { background-position: -168px -30px; }
ul#menu li#contact a:hover { background-position: -252px -30px; }
.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }
.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }
i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem. thank you for any single suggestions and comments. Similar TutorialsHi, I have this in the html and so on for each page <div id="nav"> <ul> <li class="current"><a href="one.htm">one</a></li> <li><a href="two.htm">two</a></li> <li><a href="three.htm">three</a></li> </ul> </div> Then css: #nav ul li.current a{ background:#CCCCCC; color:#000000; } But I don't want the first page's link to change colour until it is clicked. Otherwise the menu comes up with first link always active before anything has been selected. It looks wrong. Is there anyway around this in css? Thanks, jdl Whats' wrong with this? a:active doesn't seem to work at all: Code: <style type="text/css">
#navcontainer
{
margin: 5px 0 0 5px;
padding: 0;
height: 20px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#navcontainer ul li a
{
background: #000000;
width: 80px;
height: 18px;
border-top: none;
border-left: 1px solid #9B9B9B;
border-bottom: none;
border-right: none;
padding: 0;
margin: 0 0 5px 0;
font-family:Arial, Helvetica, sans-serif;
color: #26DC18;
font-weight:bold;
text-decoration: none;
display: block;
text-align: center;
}
#navcontainer ul li a:hover
{
color: #930;
background: #f5d7b4;
}
#navcontainer ul li a:active
{
background: #000000;
color: #fff0000;
}
</style>
HTML [CODE<div id="navcontainer"> <ul id="navlist"> <li><a href="index.php">Home</a></li> <li><a href="inventory.php">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> [/CODE] P.S. I just include this menu in a PHP page. We'll that will work iff you put # on the target page but that must not be. Thanks! is there a method similar to active, so when the user clicks the link it changes style but keeps the style change (after the mouse button is released) until the link is clicked a 2nd time at which point it goes back to its initial state and so on. i hope that makes sense Hi, I need some help to design an image based menu. I have been trying it for a week now but still could not achieve and going little bit mad. (Ive rewritten the same problem clearly this time hope someone can help me out) My menu image consists of 4 sections and 3 layers which looks like this: img26.imageshack.us/img26/1268/menux.gif 1.home 2.archives 3.news 4.about - (layer 1 unvistided link) 1.home 2.archives 3.news 4.about - (layer 2 hover link: mouse over) 1.home 2.archives 3.news 4.about - (layer 3 active: shows what section the visitor on afer clicking and going to that page) and my problem is with the last layer. I created the pages via admin panel of wordpress but give the links in the header.php manually myself without using codes. so the links of each section are like this home=http://localhost/wordpress/ archives=http://localhost/wordpress/?page_id=2 news=http://localhost/wordpress/?page_id=35 about=http://localhost/wordpress/?page_id=31 You can see my codes for CSS and PHP files below. Could you please have a look at my codes and provide the right code. The menu at the moment works ok except from the active side of it. I tried to give class id like "active" but failed to get it worked so please please change my wrong codes. PHP code: Code: <ul id="nav"> <li id="home"><a href="http://localhost/wordpress/">home</a></li> <li id="archives"><a href="http://localhost/wordpress/?page_id=2">archives</a></li> <li id="news"><a href="http://localhost/wordpress/?page_id=35">news</a></li> <li id="about" class="last"><a href="http://localhost/wordpress/?page_id=31">about</a></li> </ul> CSS Code: Code: #nav {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#nav li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#nav li.last { padding: 0; }
ul#nav li a, ul#nav li a:visited, ul#nav li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#nav li#home a, ul#nav li#home a:visited { background-position: 0 0; }
ul#nav li#archives a, ul#nav li#archives a:visited { background-position: -84px 0; }
ul#nav li#news a, ul#nav li#news a:visited { background-position: -168px 0; }
ul#nav li#about a, ul#nav li#about a:visited { background-position: -252px 0; }
ul#nav li#home a:hover { background-position: 0 -30px; }
ul#nav li#archives a:hover { background-position: -84px -30px; }
ul#nav li#news a:hover { background-position: -168px -30px; }
ul#nav li#about a:hover { background-position: -252px -30px; }
.home ul#nav li#home a, .home ul#nav li#home a:visited, .home ul#nav li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#nav li#archives a, .archive ul#nav li#archives a:visited, .archives ul#nav li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#nav li#news a, .news ul#nav li#news a:visited, .news ul#nav li#news a:hover { background-position: -168px -60px; cursor: default; }
.about ul#nav li#about a, .about ul#nav li#about a:visited, .about ul#nav li#about a:hover { background-position: -252px -60px; cursor: default; }
The main problem i can understand from the earlier discussion is that i need to give id class for active links in header.php code but i also need to rewrite the last four lines of css code according to the codes i wrote in php file. Can someone please help? Can someone please add or rewrite the active bit (in css codes - last 4 lines from the bottom) and in php file. please. Thanks for taking the time to read my question. It's been a while since I last tried making a page. I've got some images as href's and want to show a border around them on the hover. It's not working, they're just showing up as purple (default visited). This makes some sense as the links are just bookmarks on the same page. But in my css I have link, visited, and active all the same color. Only hover is different, and none of them are purple. I've read this http://www.w3schools.com/css/css_pseudo_classes.asp and I think I've got it, but it's not working. HTML Code: <a class"NavButtons" href="AssetDataDBHelpFile.htm#AssetForm"><img src="Computer.jpg" width="133" height="84" alt="Asset Management Form"></a> <a class"NavButtons" href="AssetDataDBHelpFile.htm#PeripheralForm"><img src="Peripheralbutton.jpg" width="133" height="84" alt="Peripherals Management Form"></a> <a class"NavButtons" href="AssetDataDBHelpFile.htm#ReportCenter"><img src="Report.jpg" width="133" height="84" alt="Report Center Form"></a> CSS Code: a.NavButtons:link {
border-color: green;
border-width: 2px;
border-style: solid;
} /* unvisited link */
a.NavButtons:visited {
border-color: green;
border-width: 2px;
border-style: solid;
} /* visited link */
a.NavButtons:hover {
border-color: Red;
border-width: 2px;
border-style: solid;
} /* mouse over link */
a.NavButtons:active {
border-color: green;
border-width: 2px;
border-style: solid;
} /* selected link */
Hi there, I have an image rollover css script, but it will not understand a:active so is there a way I can use an inline a:active attribute? Many thanks! Hi everyone, I have a menu whereby when it's active it is highlighted by two combining images. Whenever the active link is hovered over the image disappears. I'd like for the image(s) to stay put when it's active and the cursor hovers over it. This particular .css file is above my pay grade and I'm not confident I can do this and have it look good across all browsers. Just click on the header links and hover over it to see what I'm talking about. Thanks for any input, here's the site... spotabusiness dot com/new_spota1 (I apparently can't add URLs yet) This is the new site I'm working on: http://animalemergencybloomington.com/Index2.html Link and Visited Link colors work, but I can't get Active or Hover color to work. (Doesn't work in any of the browsers I've tested it in.) Right now I have this in the <head> css Code: Original - css Code <style type="text/css"> body { color: #000000; font-size: 12pt; font-family: Verdana; margin: 0px 0px; } A:link { text-decoration: none } A:visited { text-decoration: none } </style> <style type="text/css"> and this for the <body>: <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#0000FF" vlink="#1E90FF"> adding a:active and a:hover colors to the style gives a "parse error" for those lines when I try to validate and doesn't work anyway as far as getting a color change on hover. I've been trying different combinations in the body and style all afternoon but get error warnings on everything I've tried except the above combo. I'm just trying for links that are never underlined (hate how cluttered that makes things look) but turn red on hoover. Help? Thanks, Ez I am trying to create a horizontal navigation bar. Everything is exactly how I want it except the a:link, a:visted, a:hover, a:active are the standard default colors and not what I specified. Even the background color changes - just not the font color. Here is the css code: Code: /*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFF;
font-size: 14px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
text-decoration: none;
color: #FFFFF;
font-size: 14px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #50949;
font-size: 14px;
font-weight: bold;
}
#topbar ul {
list-style: none;
padding: 0;
padding-top: 2px;
margin: 0;
}
#topbar li {
display: inline;
margin-right: 160px;
}
Here is the html code: Code: <div id="topbar"> <ul class="horiz"> <li><a href="/home.html">Home</a></li> <li><a href="/about_us/about_us.html">About Us</a></li> <li><a href="/other_regions.html">Other Regions</a></li> </ul> </div> or if it helps to see the whole thing click here for test.html click here for the css Thanks! Can anyone help me get this to work in IE? Here's the link to the page I'm working on, which I'll be moving from my site to the proper domain soon. ... (annoyed - can't post urls as a new user, which makes this forum limiting - is there a way around this? How about if I try "#" = "." and "|" = "/" http:||krisbunda#com|bb|db-series-planters#html ) ... Here's the "thumbnails" CSS I'm using: CSS Code: Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: .25em solid #FFF; margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; } .thumbnail:active{ background-color: transparent; } .thumbnail:active img{ border: 0em solid #3F0; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: #999; padding: 0em; left: -250em; border: .25em dashed gray; visibility: hidden; color: #FFF; text-decoration: none; text-align:center; height:auto; width:auto; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: .25em; padding: 0em; height:auto; width:auto; } .thumbnail:active span{ /*CSS for enlarged image*/ visibility: visible; top: 0em; left: 1.5em; /*position where enlarged image should offset horizontally */ z-index: 5; height:auto; width:auto; }
And here's the HTML: (well, the html will have to be viewed in the browser because of the "No URLs" rule) Thanks in advance for any help. Hi, I have implemented an Apple Style CSS menu however I cannot apply the active state on this. When the current page is displayed, I would like to the button to be highlighted (as if hovering) Can anyone help me please? HTML Code:
<ul id="nav">
<li id="list1"><a href="#"><span>Home</span></a></li>
<li id="list2"><a href="#"><span>Special Offer</span></a></li>
<li id="list3"><a href="#"><span>Help</span></a></li>
<li id="list4"><a href="#"><span>Delivery Information</span></a></li>
<li id="list5"><a href="#"><span>Technical</span></a></li>
<li id="list6"><a href="#"><span>About Us</span></a></li>
<li id="list7"><a href="#"><span>Contact</span></a></li>
</ul>
CSS Code:
* { margin: 0px; padding: 0px; }
#nav {
background: url(nav.png);
height: 38px;
width: 960px;
margin: 0 auto;
}
#nav span {
display: none;
}
#nav li {
list-style-type: none;
float: left;
}
#nav a {
height: 38px;
display: block;
}
#list1 { width: 114px; }
#list2 { width: 164px; }
#list3 { width: 112px; }
#list4 { width: 206px; }
#list5 { width: 130px; }
#list6 { width: 122px; }
#list7 { width: 112px; }
#list1 a:hover {
background: url(nav.png) 0px -38px no-repeat;
}
#list2 a:hover {
background: url(nav.png) -114px -38px no-repeat;
}
#list3 a:hover {
background: url(nav.png) -278px -38px no-repeat;
}
#list4 a:hover {
background: url(nav.png) -390px -38px no-repeat;
}
#list5 a:hover {
background: url(nav.png) -596px -38px no-repeat;
}
#list6 a:hover {
background: url(nav.png) -726px -38px no-repeat;
}
#list7 a:hover {
background: url(nav.png) -848px -38px no-repeat;
}
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... Hello, I am working on my HW problem with CSS, it's about rounded and angular corners in menu (active or hover). I can't post picture (not permitted), but probably you know what i mean, rounded corners are created with image and angular are created with padding by CSS. Angular is ready, now i have to do rounded, which is more hard. I have 3 pictures, left rounded side, middle and right rounded side. But i really dont know how to add it to a.active or a:hover elements. Middle picture will be repeated depending on text long, so i can't do 1 picture. Thank you for your help. Hey Guys, was hoping someone could look at my code and tell me what is wrong. My website (http://www.ecbsa.co.za/) refuses to show what page i am on in the menu by highlighting it etc. Here is the CSS: Code:
/* - - - BASIC styles [ MANDATORY ] - - - */
.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
font-family: arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 11px;
line-height:1.3em;
list-style-type: none;
display: block;
height:44px;
}
.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left; /* move all main list items into one row, by floating them */
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5; /* thus we need to apply explicit z-index here... */
}
.menu li:hover {
z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}
.menu ul {
visibility: hidden; /* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0; /* while hidden, always keep them at the top left corner, */
top: 0; /* to avoid scrollbars as much as possible */
}
.menu li:hover>ul {
visibility: visible; /* display submenu them on hover */
top: 100%; /* 1st level go below their parent item */
}
.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}
/* -- float.clear --
force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
min-height: 0;
}
/* -- float.clear.END -- */
/* -- sticky.submenu -- */
.menu ul {
background-image: url(empty.html); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
padding: 10px 20px 20px 20px;
margin: -10px 0 0 -20px;
/* background: #fcfcfc;*/ /* uncomment this if you want to see the "safe" area.
you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
padding: 20px 20px 20px 10px;
margin: -30px 0 0 0px;
}
/* -- sticky.submenu.END -- */
/* - - - DESIGN styles - - - */
/* main upper bar */
#main-nav {
background: url(img/_ui/main_nav.jpg) left top no-repeat;
width:967px;
height:44px;
text-align: center;
}
.menu {
width:967px;
}
/* main upper bar */
.menu, .menu ul li {
color: #ff6600;
}
.menu ul {
width: 45em;
}
.menu a:active{
text-shadow: #006699 1px 1px 2px;
color: #ff6600;
padding: .5em 3.5em;
display: block;
position: relative;
}
.menu a {
text-shadow: #006699 1px 1px 2px;
color: #fff;
padding: .5em 3.5em;
display: block;
position: relative;
}
.top-level {
width:59px;
margin-top: 5px;
/*padding-top:2.0em;*/
line-height: 1.1em;
font-size:11px;
}
.menu ul li a ul li {
text-align: left;
}
.menu a:hover, .menu li:hover {
text-shadow: #006699 1px 1px 2px;
display: block;
color: #FAA93B;
}
.menu a:active {
text-shadow: #006699 1px 1px 2px;
color: #ff6600;
padding: .5em 3.5em;
display: block;
position: relative;
}
/* submenu hover colours */
.menu li li a:hover {
display: block;
color: #F89624;
background-color:#D9D4CE;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
border-top: 0;
}
.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;
}
#lhs {
background-image: url(img/_ui/lhs_bg_20080401.jpg);
background-position: right top;
background-repeat: repeat-y;
}
.lhs_div {
height:1px;
text-align:right;
background-image: url(img/_ui/lhs_dotted_div_333.png);
background-position: right middle;
background-repeat: no-repeat;
}
And here is the HTML: Code: <!-- menu updated 20091218 -->
<div id="main-nav">
<ul class="adxm menu">
<li><a class="top-level" a href="<%=getCurrentAttribute('site','homepageurl')%>"><b>Home<br>Page</b></a>
</li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/FAQ"><b>FAQ<br>(Questions)</b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/Information"><b>Info<br>(Information)</b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/New-Contractors"><b>New<br>Contractors</b></a>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/Contact-Us"><b>Contact<br>Us</b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level"><b><br></b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="https://checkout.netsuite.com/app/center/nlvisitor.nl/c.1123442/n.1/sc.6/.f"><b>My<br>Account</a></b></li>
</ul>
</div>
<!-- menu updated 20091218 -->
<br><br>
</td></tr>
<!-- LOGOS AND TABS -->
</table>
</div>
I found this CSS sample over the internet.. http://www.crafta.com/look1.html look that it keeps the active menu yellow color, from the main list until the sub and sub-sub list im triying to do some like that on my menu http://www.crafta.com/te2.html but no same result and i have no CSS skills... could you please take a look into that.. any help will be apreciated. thanks Hi, I'm new to CSS. I'm currently reading McFarland's "The Missing Manual," and I'm about 1/4 through. But it seems that no matter how hard I try to understand this problem, I can't get it. I'm trying to figure out how to set my heading links to look one way and all other links on the page to keep from inheriting the layout for those heading links. Here are the styles I'm using: a:link, a:visited { color:#5f4731; border:none; } .contentpagetitle a:link, a:visited, a:hover, a:active { color: #00477d; font-size: 150%; border-bottom: 1px solid #f4f4f4; font-weight: bold; text-transform: none; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times; padding-bottom: 3px; text-decoration: none; } Here is a little piece of test html I'm using until I can figure this out: Code: <body> <!-- This is the heading link --> <a class="contentpagetitle" href="http://www.midsouthcc.org" target="_blank">Test Article</a> <!-- This is a paragraph that follows the heading link --> <p>Lorem ipsum cum ut viris gubergren conceptam.<a href="http://adinasnotes.blogspot.com" target="_blank">Adina's Notes</a>. Ferri electram at ius.</p> </body> Can someone tell me why the second link inherits the settings for the first link which is set to class=contentpagetitle? I'm missing something and I'm sure it's a simple answer, but your help would be greatly appreciated. Thanks, gsw Hi, I need some links to have a specific color. a.ClassName:link works in FF but not in IE. Is there are work-around? PHP Code: .chatlistmale, .chatlistfemale, .chatlistcouple { display: block; border: solid; border-width: 1px; width: 200px; } a.chatlistmale:link { background: #006699; } a.chatlistmale:active { background: #006699; } a.chatlistmale:visited { background: #006699; } a.chatlistmale:hover { font-weight: bold; } a.chatlistfemale:link { background: #FF0033; } a.chatlistfemale:active { background: #FF0033; } a.chatlistfemale:visited { background: #FF0033; } a.chatlistfemale:hover { font-weight: bold; } a.chatlistcouple:link { background: #00FF00; } a.chatlistcouple:active { background: #00FF00; } a.chatlistcouple:visited { background: #00FF00; } a.chatlistcouple:hover { font-weight: bold; } Hey guys, When i apply a stylesheet to this page. http://jessup.oraclestudio.com.au/i...p?page=coporate the link on the left hand side 'Forensic Accounting' doesnt appear to work in IE but work fine with no style sheet. By not work i mean it gets styled but doesnt function as a link. any ideas ??? Code:
a:link {
color: #333333;
font-size: 11px;
}
a:hover {
color: #333333;
font-size: 11px;
}
a:visited {
color: #333333;
font-size: 11px;
}
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 |
|||||||