CSS - Announcing Link Button 3.0!

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

Hello
Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link?
PS. no Javascript code needed, is their an alternative in css?

I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file.

Here is a sample file:

http://www. shawkey.com/test/imagebordertest.html

Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS?

Hello

is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color.

html:

<td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td>

css:

Code:

td.nodecoration {
	background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}

A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}

basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it?

Hello everyone! I'm currently working with the <button> tag, simply because I want Safari users to be able to see button effects added onto submit buttons. It's pretty simple, except, I'm having problems centering text. Obviously, text-align: center; works for putting the text in the center of the button, but not the middle. I want to vertically align the text as well as horizontally. Anyone? Thanks in advance.

Hello,

Does anyone know of a way to design a button using CSS (or something else), and then save it as an image file?


Thanks,
Jeff

I'm using CSS in my forms - bunches! It's all going very well but there is an issue with the input / file command where adding a class reformats the browse button... it does not for example reformat the submit button.

For example

<input class="textarea" type="file" name="image1">

would produce the required input box with the MS Browse... button.. however when the class is present it turns off the new formating that XP has and displays the regular old MS buttons.. is there any wayto turn this off with out removing the class.

The only way I can think of is to create and ASP or JS componenet to find the files manually with out using the build in stuff that Billy Gates has so kindly provided us with.

If any one knows a way round this - much appreciated.

Dave

I have a series of image buttons with rollovers that are generated in CSS so I've applied a class to each like this:

<a class="homebutton" title="Home" href="#">This is the Home Button</a>

This works great but I now would like to apply a second class to the href that calls an animated scroll function from a javascript file. I've tested the function on a simple button and it worked perfect:

<a href="#divtwo" class="scroll">Scroll Down</a>

What I would like to do is essentially combine the two so that it would be something like:

<a class="homebutton" title="Home" href="#divtwo" class="scroll">This is the Home Button</a>

But when I do that it ignores the "scroll" class and simply jumps to the #divtwo location on the page without the animation.

Ideas on how to have two classes on one button?

Any help would be GREATLY appreciated!

ok.. ive been putting together this navigation for my website and i have run into troubles! code is below. link to get a visual:

http://www.reston.com/Tysons%20Corner%20COM/

Basically the 4th button is there if you roll over you see theres a link there.. but the image isnt display. Really confused. The 5th one doesnt roll over

Code:

/***********************************************************************
	4 - PRIMARY NAVIGATION
************************************************************************/

#primary-nav {
	position: absolute;
	background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
	list-style: none;
	width: 760px;
	height: 26px;
	top: 167px;
	left: 1px;
	z-index: 10;
	padding-left: 5px;
}

#primary-nav li {
	float: left;
	background-position: 0 -26px; 
}

#primary-nav li ul {
	position: absolute;
	background: transparent url(img/primary-nav-top.png) no-repeat;
	list-style: none;
	width: 159px;
	left: -9999px;
	margin-left: -9px;
	padding-top: 5px;
}

#primary-nav a {
	display: block;
	height: 0px !important;
	text-decoration: none;
	overflow: hidden;
}

#primary-nav li a {
	background-position: 0 0; 
}

#primary-nav li#nav-1 {
	background: transparent url(img/bg/nav-1.png) no-repeat;
	margin-right: 1px;
}

#primary-nav li#nav-2 {
	background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
	margin-right: 1px;
}

#primary-nav li#nav-4 {
	background: transparent url(img/bg/nav-4-restaurants.png) no-repeat;
}

#primary-nav li#nav-5 {
	background: url(img/bg/nav-5-history.png) no-repeat;
}

#primary-nav li#nav-1:hover, 
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover, 
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-4:hover, 
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5.hover,
#primary-nav li#nav-5.sfhover
 {
	background-position: 0 -26px;
}

#primary-nav li#nav-1 a, 
#primary-nav li#nav-2 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a {
	width: 140px;
	height /**/: 26px;
	padding: 26px 0 0 0;
}

#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li {
	background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
	height: 21px;
}

#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom {
	background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
	height: 14px;
	width: 159px;
}

#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a {
	overflow: hidden !important;
	overflow: visible;
	font-size: 10px;
	color: #FFF;
	height: 19px !important;
	height: 19px;
	width: 140px;
	padding: 1px 3px 2px 19px;
}

#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover{
	background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}

#primary-nav li:hover ul, 
#primary-nav li.sfhover ul {
	left: auto;
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
	<title>TysonsCorner.com&trade;</title>
	<link rel="shortcut icon" href="#">
	<link href="home.css" rel="stylesheet" type="text/css">
	<link href="global.css" rel="stylesheet" type="text/css">
    <link href="nav1.css" rel="stylesheet" type="text/css">

</head><body>
<div id="container">
	<!-- HEADER AREA STARTS HERE -->
<div id="header">
		<ul id="primary-nav">
			<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
			<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
				<ul>
					<li><a href="#" title="Tysons 1 Stores">News</a></li>
					<li><a href="#" title="Tysons 2 Stores">Events</a></li>
                    <li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
					<li class="bottom"></li>
				</ul>
			</li>
			<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
			<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
				<ul>
					<li><a href="#" title="Tysons 1 Stores">Tysons I Stores</a></li>
					<li><a href="#" title="Tysons 2 Stores">Tysons II Stores</a></li>
                    <li><a href="#" title="More Tysons Shopping">More Tysons Shopping</a></li>
					<li class="bottom"></li>
				</ul>
			</li>
			<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
			<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
				<ul>
					<li><a href="#" title="Cajun Food">Cajun</a></li>
					<li><a href="#" title="Grilled Food">Grilled</a></li>
					<li><a href="#" title="Foreign Food">Foreign</a></li>
					<li><a href="#" title=" Full List Restaurants">Complete List</a></li>

					<li class="bottom"></li>
				</ul>
			</li>
			<li id="nav-4"><a href="#" title="Tysons Homepage">Home</a>			</li>
            <li id="nav-5"><a href="#" title="Tysons Homepage">Home</a>			</li>
    </ul>

</div>
        <div id="content">test</div>
</body></html>

If you can spy the issue plz let me know

Hey,

I try to set a button like that:
Code:

<!-- Buuton --><table border="0" class="SiteButtonManageOff" onmouseover="this.className='SiteButtonManageOn'" onmouseout="this.className='SiteButtonManageOff'"><tr><td class="SiteButtonManageIn" onClick="location.href='/s/index.asp';">Edit</td></tr></table><!-- Buuton -->
.SiteButtonManageOff
{
	font-family: arial;
	border-width:1px;
	border-color:#cccccc;
	border-style:solid;
	background-color:#2D3B72;
	display: inline;
}
.SiteButtonManageOn
{
	font-family: arial;
	border-width:1px;
	border-color:#cccccc;
	border-style:solid;
	background-color:#6280F6;
	display: inline;
}
.SiteButtonManageIn
{
	font-family: arial;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	white-space: nowrap;
	cursor:pointer;
}

In IE it's look great but in FF the text go to the top of the button, any solution?

Hello.

I have created a form with CSS and Divs. My problem is my "Submit your Testimonial" button background is all messed up and doesn't look like my "Reset Form" button in IE 6.0 SP2. It looks fine in Firefox.

Not sure how or where this gets changed. It seems to be adding a thicker border or something?

Here is the page:
http://www.nessphysiotherapy.com/testimonials.php

Suggestions?

Thanks

Matt