CSS - Css Problem, Links And Such

Guys, no time to introduce myself or anything I've been beating my head with this for half an hour now

Baiscly I have a div box 700x20px .. And i want a couple of links to be inside it and aligned in the middle of the div (Vertically).

However what works in opera doesnt work in FF and IE (all latest versions). And vice versa. If it works in IE it doesnt work in Opera.

here's a screenie
i5.tinypic.com/544biwz.jpg

i have also upped it online he
fotoz.hit.bg/new-transitional.html

View Source and you can view the whole css, i still havent moved it to seperate file, cuz im not finished with the desgin itself.

Thanks in advance!

I'm having a problem with CSS and links. The class for the links is correctly added to the anchor tag and there is nothing wrong with the code. The links are supposed to remain the same except when hovering which all it does then is change the color of the text and put add an underline. However when testing this out, it doesn't work in FF at all and in IE it's fine until you click the link and then it goes back to acting like FF does. It almost appears as if the .link:visted part was setup differently than the rest, but it's not. Here's the code: Code:

a.navtextlink:link{
  color: #666666;
  font-weight: none;
  text-decoration: none;
}

a.navtextlink:active{
  color: #666666;
  font-weight: none;
  text-decoration: none;
}

a.navtextlink:hover{
  color: #000000;
  font-weight: none;
  text-decoration: underline;
}

a.navtextlink:visited{
  color: #666666;
  font-weight: none;
  text-decoration: none;
}

If you want to view a live sample, you can do so here. Thanks for any help you can provide.

I guess I am not understanding how this works.

I am having a problem with creating font/color styles on sublinks. I want all site wide links to be the 12px blue. And the links on my submenu I want to be 10px white.

How do I achieve this?

Heres my code:

a:link {
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
color: #000066;
}
a:visited {
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
color: #000066;
}
a:hover {
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
color: #0099FF;
text-decoration: none;
}
a:active {
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
color: #000066;
}

.sublinks a {
color:#FFFFFF;
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: none;
}
.sublinks a:visited{
color:#FFFFFF;
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: none;
}
.sublinks a:hover{
color:#0000FF;
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 10px;
}
.sublinks a:active{
color:#0000FF;
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: none;
}

And here are my links:

<div align="center" class="sublinks"><a href="index.php?page=areasofpractice">Areas of Practice</a></div>

and the page is: http://www.caffreysmith.com

As you can see, the links are not taking css effect.

Please help!

I am useing this css code :

Code:

a.buttonlike:link, a.buttonlike:visited, 
a.buttonlike:hover, a.buttonlike:active {
	text-decoration:none;
	vertical-align:middle;
	background-color:#dddddd;
	color:#000000;
	height:16px;
	padding:3px;
	margin:	0px 2px 0px 0px;
	border-left:1px solid #ffffff;
	border-top:1px solid #ffffff;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	text-align:center;
	font-size:  12px;
}

to make the "buttons" on the right side of this page :
http://tampabay-online.org/eventdet...erby=firstnames

but when I change the margin top (because it doesn't quite fit right from
Code:

	margin:	0px 2px 0px 0px;

to

Code:

	margin:	anythingpx 2px 0px 0px;

it doesn't seem to make a differance, it stays right where it is.

and adding a <br /> to the line before it makes the "buttons" too far down.

Any ideas?

Thanks

Hello all,

I am trying to style links on my page and cannot figure out how to do so. I am using a JQuery Framework and perhaps somehow that is messing me up. attached are the two Jquery javascript files.

I want to make the links blue, please tell me how to do that. Thank you.

Code:

 <!DOCTYPE html> <html> 	<head> 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 		<title>jQuery UI Example Page</title>         <link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	 		 		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 		  		<script type="text/javascript"> 			$(function(){  				 	 				// Tabs 				$('#tabs').tabs(); 	  				 				 			}); 		</script> 		<style type="text/css"> 			/*demo page css*/ 			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} 			.demoHeaders { margin-top: 2em; } 			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} 			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} 			ul#icons {margin: 0; padding: 0;} 			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;} 			ul#icons span.ui-icon {float: left; margin: 0 4px;} 			.SearchOptions a {color:#990066} 		</style>	 	</head> 	<body> 	 		 	 		<!-- Tabs --> 		<h2 class="demoHeaders">Tabs</h2> 		<div id="tabs">   			<ul> 				<li><a href="#tabs-1">Buy Books</a></li> 				<li><a href="#tabs-2">Sell Books</a></li> 			</ul> 			<div id="tabs-1">             <form>             <table>             <tr>              <td>Item 1 <input type="text" name="Item1" /></td>               <td>Item 2 <input type="text" name="Item2" /></td>              <td>Item 3 <input type="text" name="Item3" /></td>              <td>Item 4 <input type="text" name="Item4" /></td>              </tr>             <tr>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>              </tr>              <tr>               <td>Item 5 <input type="text" name="Item5" /></td>                <td>Item 6 <input type="text" name="Item6" /></td>               <td>Item 7 <input type="text" name="Item7" /></td>               <td>Item 8 <input type="text" name="Item8" /></td>              </tr>              <tr>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>               <td><a href="" class="SearchOptions">More Search Options</a></td>              </tr>              </table>              </form>               </div> 			<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> 		</div> 	 		<a href="" class="SearchOptions"> dadadada</a>  	</body> </html>