CSS - Need Help To Fix Active Link Problem

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 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)

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!

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!

Hi,

I can't make my active tab look 'active' in my navigation. I have the following css:
Code:

#tab_menu {
	width: 200px;
	margin-top: 10px;
	}
	
#tab_menu li a {
  	height: 24px;
	text-decoration: none;
	color: #484848;
	display: block;
	background:  url(../images/tab_menu.gif);
	background-repeat: no-repeat;
	padding: 8px 0 0 10px;
	}
	
#tab_menu li a:hover {
	color: #55880a;
	background:  url(../images/tab_menu.gif) 0 -32px;
	background-repeat: no-repeat;
	padding: 8px 0 0 10px;
	}
	
.active {
	color: #55880a;
	background:  url(../images/tab_menu.gif) 0 -32px;
	background-repeat: no-repeat;
	padding: 8px 0 0 10px;
}

with the following html:

Code:

<div id="tab_menu">
    <ul>
	<li><a class="active" href="link.html">Link 1</a></li>
	<li><a href="link2.html">Link 2</a></li>
	<li><a href="link3.html">Link 3</a></li>
	<li><a href="link4.html">Link 3</a></li>
    </ul>
</div>

Any help welcomed!
M.

I have a problem I can't resolve as I'm out of my depth with this CSS positioning issue on a joomla site with a bespoke template I have customised.

The problem is that the client (a graphic designer) created a menu design where the top level menu buttons overlap with a curve. I have assigned a background image on hover and it works well. You can see it he

I can't post an image of the menu as it won't let me, being a new poster, which is a pain...
Code:

#horiz-menu a:hover {
            display: block;
            z-index: 100;
            line-height: 22px;
            left:-53px;
            position: relative;
            background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
            padding-left:63px;
            height:27px;
            width:162px;
            border-bottom:1px solid #fff;
            margin-bottom:-3px;
}

To achieve the overlap, the background has to sit behind the button to its left and that is achieved by moving it a fixed amount of pixels leftward. The menu text is then put back in place with the padding.

However the client now wants the hovered image to stick in the parent position when the submenu items are hovered over.

I've achieved this with:
Code:

#horiz-menu li.parent.active a {
            background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
            z-index: 100;      
            line-height: 22px;      
            left:-53px;             
            position: relative;      
            padding-left:63px;      
            height:27px;     
            width:162px;      
            border-bottom:1px solid #fff; 
 }

The trouble is that although the background image is positioned correctly, it has a knock-on effect on all the submenu list items which are being positioned to the beginning of the background image, 53 pixels to the left...

I cannot pad the submenu items over to the right as it causes all the other submenus items under the other parents to move to the right too.

I suppose my question is twofold: is there any way of setting the active parent list item background image position without the children items inheriting the position change? ; is there a better way of doing what I am attempting to do?

If the client had not specified overlapping buttons I would be in the clear but my client was a graphic designer who designed without any thought as to the css implications. The requirements have been signed off and I have to find a way of implementing it.

Please, any thoughts? I am not a css coder and I find css to be impenetrable, arcane whilst being slow and difficult to debug. All help really appreciated.

if you see on http://www.ipan.be/dev/index.php?page=about
in FF it is nice but in IE it put borders around some links of my class inhoudstafel...

Does anyone know a solution?

hi guys,

I'm sure this is an easy fix but it's driving my little non-technical mind nuts...

I have an external style sheet for a site, and it appears to be linked correctly as altering it does affect the text in my site.

HOWEVER, the elements I've included to keep web links displaying as normal text aren't working (visited, hover, active, etc etc)

Please help.

Code below.

.main {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
link {text-decoration: none;
visited {text-decoration: none;
hover {text-decoration: none;
active {text-decoration: none;
}

hey just got a small problem i dont know hw to fix, take a look at my site
http://funnyguys99.tripod.com/index.htm
if u hover over the links on the left side of the page, the border around them is not even. I want the border to end at the same spot when u hover over them, no matter how many more letters there are in the link.
Here's the Css for the left bar, please fix it

[CODE]
div#menubar
{
padding-right: 0.5em; padding-left: 0.5em;
padding-bottom: 20%;
margin: 120px 0px 0px 0px;
padding-top: 0.5em;
left: 0px;
width: 8em;
top: 0px;
height: auto;
position:absolute;
background:#FFFFFF;
border-right:1px solid black;
border-bottom:1px solid black;
border-top:1px solid black;
}
div#menubar ul
{
padding-left:0px;
padding-top:0px;
list-style:none;
line-height: 85%;
margin:0px;
}

div#menubar a
{
font-weight: bold;
text-decoration: none;
font-size:0.6em;
padding-right:7.5em;
padding-top:0px;
padding-bottom:0px;
}

div#menubar a:link
{
color: #ffa500;
}
div#menubar a:visited
{
color:dark red;

}
div#menubar a:active
{
font-weight: normal;
}
div#menubar a:hover
{
color: white;
background:#999999;
border:1px solid black;
}
[CODE]

I'm working on a project for school, I'm nearly done, but for some reason, in Firefox the first link in my navigation menu doesn't fit the formatting of the rest. The link is 'About Us'.

Please see he http://lovemeforme.org/testing/

any ideas? I'm stumped!

the website http://www.mostardesigns.com/4five1/ the top menu links work ok in firefox but in IE they wont display, here is my css code for the links:
Code:

	a.a_bannerLink:link, a.a_bannerLink:visited, a.a_bannerLink:active	{
		color:#FFFFFF;
		text-decoration:none;
		font-size:12px;
		font-weight:bold;
		padding:6px 15px 6px 15px;
		display:block;
		}
	a.a_bannerLink:hover	{
		color:#FFFFFF;
		text-decoration:none;
		font-size:12px;
		padding:6px 15px 6px 15px;
		background-image:url(../images/link_bg.jpg);
		background-repeat:repeat-x;
		display:block;
		}

any help is appreciated, thanks in advance.

I've set up two divs side by side using "float:left;".

In each of the Divs I have placed links, in the right hand div I can click the links but in the left hand div I can not. If I remove the "float:left;" I can then click the links in the left hand div but the divs are no longer aligned.

The problem only happens in FF not in IE.

I have copied the relative code below that is causing the problem.

Code:

#left{float:left;position:relative;width:49%;}
#right{position:relative;}
<div id="left"><a href="hh">hh</a></div>
<div id="right"><a href="hh">hh</a></div>

I don't want to have to change the layout just for FF so I'm hoping there is a fix for this problem.

Thanks

Hi guys,

I recently created a website for my Union, and am having some problems getting around a possible CSS error. Unfortunately the majority of our user base only has access to MS Internet Explorer 5, and it is within this browser that the CSS glitch is apparent:



The 'Join the union' image link tends to push right to the left margin, and I'm unsure how to correct this without adversely affecting either Firefox or more recent versions of IE/Opera/Safari.

Any help would be appreciated!

Edit: would be easier if I gave you the link! http://www.algus.org.uk/


Sajid

Hi!

Having a problem again with firefox! On IE6 the links in the bottom news bar work fine, in firefox, only two of them work!

Its a little strange! Output at www.generating-sets.com

Validated the markup and the CSS and they validate fine! (apart from the buggy PHPSESSID issue and my use of marquee which is due to be removed shortly).

CSS below:


PHP Code:
 html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(images/newback.jpg);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: sans-serif; 
font-size: .7em;
}
#wrap {
background-image:url(images/newback150px.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

div#navbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#formbox {
color: #000000;
padding: 2%;
border: #000044 solid 1px;
}
div.displaybox {
color: #000000;
padding: 2%;
margin: 1%;
border: #000044 solid 1px;
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;
font-size: 1.1em;
}
div#userbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#topleveladminbar {
padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px
}

#header {
background-color: #000044;
background-image:url(images/wel.jpg);
width: 100%;
background-repeat: repeat;
border-bottom: 2px #000000 solid;
color: #ffffff; 
margin:0; padding:0;
height:100px;
}


#left {
float:left;
width:149px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
color: #ffffff; 
text-align:center;
background-color: #000044;
border-right: 1px #000000 solid; 
}
#main {
position:relative;
margin-left:200px;
}

#content {
text-align:center;
padding:4px;
margin-right:200px;
margin-bottom:160px;
text-align:left;
}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000044;
border-top: 2px #000000 solid;
margin:0; padding:0;
background-image:url(images/newback.jpg);
background-repeat: repeat;
margin-top:-0px;
color: #ffffff; 
text-align:center;
}
div#newsbar {padding: 0%; 
text-align: left;
height:150px; 
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff;
margin-left: +150px;
margin-right: +10px; 
margin-top: -180px;
border: 2px #000000 solid;  
width: auto;} 

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

h1 {font-size: 1.4em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h2 {font-size: 1.3em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h3 {font-size: 1.2em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h4 {font-size: 1.1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h5 {font-size: 1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

a:link {color: #ffffff; 
text-decoration: underline;} 

a:visited { 
    color: #ffffff; 
    text-decoration: underline;}     

a:hover {color: #ffffff;
background-color: #0000FF;
text-decoration: underline;} 

.displaybox a:link {color: #0000FF; 
text-decoration: underline;} 

.displaybox a:visited { 
    color: #0000FF; 
    text-decoration: underline;}     

.displaybox a:hover {color: #000044;
background-color: #EEEEEE;
text-decoration: underline;}