CSS - Border On A Link In A List

I use the following CSS for my links, and use a border-bottom to give them a dashed underline...

Code:

a { 
color: #AC4870; 
border-bottom: 1px dashed #DDDDDD; 
text-decoration: none; 
} 
a:hover { 
color: #DDDDDD; 
border-bottom: 1px dashed #AC4870; 
text-decoration: none; 
} 

This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links?

Thanks

hi, yea I got an a link wrapped around an image, but the image is coming up with tis weird pink border around it, anyon know how I can get rid of this border?

thx

I just don't know how to get rid of the border around my image links... When you go to the site, everything looks okay, but when you press the link ("blog"), a border appears around it. And if you click it and then return back, the border is there all the time. Why? I have written "border: none;" pretty much everywhere in my css I can think of!
I'm running out of ideas... This is probably something really simple so please help me out, I'm not much of a programmer as you can see..
The same border-problem repeats also on that blog-page which is a wordpress layout and should have nothing to do with my css!?

The site is he
http://prettydisturbed.com/

And my css around the problem looks like this:

Code:

#blog {
  	display: block;
	float: left;
  	width: 96px;
  	height: 62px;
  	background: url('../img/blog_mo.jpg') no-repeat 0 0;
	border: none;
}

a #blog img {
	border: none;
	text-decoration: none;
}


#blog:hover
{ 
	background-position: 0 -62px;
	border: none;
}

#blog:visited
{ 
	border: none;

}

#blog span
{
	display: none;
	border: none;
}

p {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 13px;
	color: #000000;
	margin: 0;
	padding: 0;
	border: none;
	text-decoration: none;
}

a:link {
	text-decoration: none;
	color: #ffffff;
	font-size: 13px;
	border: none;
}

a:visited {
	text-decoration: none;
	color: #ffffff;
	font-size: 13px;
	border: none;
}


a:hover {
	text-decoration: none;
	color: #ff39da;
	font-size: 13px;
	border: none;
}
a:active {
	text-decoration: none;
	border: none;
}

Can any of you tell me why with the a:link/visited set with border:none
(as in the example at the bottom of the e-mail), I get a box around an
image inside a link:

<a href="communication.php"><img src="resources/president.jpg"></a>

Working on a MAC, I noticed that the border only appears in
Firefox but not in Safari, Opera and OmniWeb. Can anyone
tell me why this border appears around the image, why only in FF, and of course, how one can make it dissappear using the stylesheet?

STYLESHEET:

a {text-decoration: none;}
a:link { color: #000000; border: none;}
a:visited { color: #000000; border: none;}
a:hover { color: #bbbb00; border: none;}
a:active { color: #000000; border: none;}

.image{border-width:0px; border: none;}

Hi,

I have pictorial buttons that really are <a href's></a> with img buttons in between.
When viewed in IE i get a bluish/purple box around my buttons.

I want to eliminate the link marking around the images.

How do I do this?

Thanks for all and any suggestions.

Melroy

Hi:

Is it possible to use a Form pull-down box as a link rather than a Form Item?

For example, I have the following code:
Code:

require ('./includes/db_access.php');
    //get parts of records
     
     $get_list = "SELECT company_id, 
                         company_name,
                         contact
                  FROM companies 
                  ORDER BY company_name";
     $get_list_res = mysql_query($get_list) or die(mysql_error());

echo "
   <select name=\"company_id\">
   <option value=\"\">-- Select One --</option>";

   while ($recs = mysql_fetch_array($get_list_res)) {
      $co_id = $recs['company_id'];
      $co_name = $recs['company_name'];

      echo "<option value=\"$co_id\"> $co_name</a></option>";
   }

echo "
   </select>

and what I want is that when the user selects the correct company, it executes the following link:

Code:

edit_company.php?company_id=$company_id

I can't seem to make this work, no matter how I embed the <a href> into the list.

Any ideas?

Thanks

Hi everybody. I am trying to transition from awkward HTML and haphazard CSS to valid XHTML (transitional) and a central stylesheet. I'm trying to create a small link list where each item "hovers" in a different color, but I'm clearly doing something wrong.

The HTML file is http://www.bsuto.com/valid.html
( and the CSS is http://www.bsuto.com/sheet.css )

Thanks in advance for any help!

Hi,

I am using linked-in stylesheets for my webpage and have an unordered list, which is inside a div, for the phone number and email address (which is an email link) which are in the top right corner of the page. The whole page is in a container div.

I am trying to 'text-align' these two <li> elements to the right, the phone number does this but the email link just won't move to the right and is staying on the left! I have put the 'text-align: right' attribute for the 'ul' and the 'li' and the 'a' but to no avail.

The weird thing is, I also have an undordered list for my navigation which is also on the same page, running horizontal on the left side of the page, but these seem to work fine for the alignment (each link is centered nicely in their boxes).

Why won't the email link align right?!

My stylesheet code:

#garden-designer-contactbar ul {
display: block;
position:absolute;
text-align: right;
font-size: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666666;
left:541px;
top:0px;
width:179px;
height:51px;
margin: 0;
padding: 0;
list-style-type: none;
z-index:6;
}

#garden-designer-contactbar li {
display: block;
text-align: right;
}

#garden-designer-contactbar a {
display: block;
position:absolute;
text-align: right;
font-size: 12px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666666;
font-weight: normal;
}


My page code:

<div id="garden-designer-contactbar">
<ul>
<li>020 0000 000</li>
<li><a href="mailto:email@email.co.uk?subject=Garden Design" title="email Garden Design" align="right">email@email.co.uk</a></li>
</ul>
</div>

Does anyone know what might be going on? My container div for the whole page is set to 'text-align: left' but I tried removing that attribute and it just made other text on the page that wasn't specifically aligned, centre. And the email link seemed to stay where it was.

Any help much appreciated!

Hello,

I'm trying to create an list menu like the one in attached image and I have 2 problems.

1. In IE 6,IE 7 the list is ordered verticaly and not horizontaly (in Opera and FF it is ok)

2. I need to align the text on the bottom of the list like inattached image.

Here is what I manage to do till now : http://www.sibiul.net/test/list-align.php

Anyone knows what I must do ?

10x

I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover.

Code:

<li id="menuitem_2mainnav">
<a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a>
<ul id="menulist_2mainnav">
<li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li>
<li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li>
<li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li>
<li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li>
</ul>
</li>

I have tried:
Code:

#menulist_2mainnav li:hover{ color:#000000 !important;  }

But it doesn't change the links text colour.

I have an image I am using for my submit button, it has this "Link Box" around it that I want to go away. I just want the image shown and not the border or whatever is happening here.

I assume it is because it is a link. I use an external style sheet for the rest of the page, so if there is a suggestion for me to reference a style from the style sheet, this would be a huge help.

I have read about everything I could and still cannot find my answer.

Is there a way to get rid of the box around my image using CSS?

Here is what I have:

<input name="imageField" type="image" onClick="return valLoginForm(frmLogin)" src="images/b_login.gif" width="60" height="18" >

Thank you for your help.

Hi.

Have created some simple tabs using table cells.

Active tab should have bottom-border color equal to page background-color.
Non-active tabs should have bottom-border=black.

Works fine in IE, but does not work very well in Firefox.

If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell.

So is there a way to make this work in both IE and Firefox...
and hopefully most other browsers...

See code below:

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
	a.menu_top:link {color: #000000; text-decoration: none;}
	a.menu_top:visited {color: #000000; text-decoration: none;}
	a.menu_top:hover {color: #000000; text-decoration: none;}
	a.menu_top:active {color: #000000; text-decoration: none;}
	
	td.menu_top_passive { 
		background-color: #777;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #000000 solid;
		
		text-align: center;
		
		cursor:pointer;
		font-weight: bold;
		
		padding: 5px 20px 5px 20px; 
		 
		margin: 0;
		 
	}
		
	td.menu_top_active { 
		
		background-color: #bbb;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #bbb solid;
		
		text-align: center;
	
		cursor:pointer;
		font-weight: bold;
		padding: 5px 20px 5px 20px;
		
		margin: 0;
		
	}
	

</style>

<script language="JavaScript">


function change(id, url) {
	for (i=1; i<6; i++){
		eval("document.getElementById("+i+").className='menu_top_passive'");
	}	
	eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>

</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?

</center>
<br><br><br>
	<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
		<tr>
			<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a  href="javascript:;" class="menu_top">Item 1</a></td>
			<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>	 
			<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a  href="javascript:;" class="menu_top">Item 3</a></td>				
			<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a  href="javascript:;" class="menu_top">Item 4</a></td>
			<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a  href="javascript:;" class="menu_top">Item 5</a></td>

		</tr>
	</table>
</body>
</html>

I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style.

If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all.

I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened.

How do you fix that problem?

Thanks...

Hi,

This used to be my solution:
Code:

<table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'>

But this only works well on IE - not Mozilla

Now I want to use CSS:
Code:

	.results {
	  	border: 1px solid #CCCCCC ;
	}

Code:

<table class='results'>

---------------

The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't.

If I specify
Code:

<td class='results'>

for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping).

Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration?

Thanks a lot!