Making <input> and <a> look the same...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Nathaniel
Forum Contributor
Posts: 396
Joined: Wed Aug 31, 2005 5:58 pm
Location: Arkansas, USA

Making <input> and <a> look the same...

Post by Nathaniel »

Hi guys,

I want a text link to look exactly like the input button to the left of it... but it isn't working. It really screws up in IE (duh), it's marginally bad in Opera, and even in Firefox the link button is slightly smaller than the input button.

Here's the link to a test page...

The current styling (this might change as I'm fooling with it):

Code: Select all

.button
{
	position: relative
	font-family: Georgia;
	font-weight: bold;
	font-size: 1em;
	border: outset black 1px;
	color: #FFF;
	background-color: orange;
	padding: 0.2em 0.4em;
	margin: 0;
	text-decoration: none;
	line-height: 1em;
	display: inline;
}
Is there some attribute set in one or the other that I'm missing? :roll:
User avatar
$phpNut
Forum Commoner
Posts: 40
Joined: Tue May 09, 2006 5:13 pm

Post by $phpNut »

to start with the boder atribute should be width style color i.e.

Code: Select all

border: 1px outset #000;
...

any chance of a small print screen of the button you want it to look like?

also if you have an outset black border, it will just be a black border ...
User avatar
Nathaniel
Forum Contributor
Posts: 396
Joined: Wed Aug 31, 2005 5:58 pm
Location: Arkansas, USA

Post by Nathaniel »

$phpNut wrote:to start with the boder atribute should be width style color i.e.
any chance of a small print screen of the button you want it to look like?
also if you have an outset black border, it will just be a black border ...
Wowee, I've been doing borders wrong like that all that time.
I just want them to look exactly the same.
And not in FF... but ok.
User avatar
$phpNut
Forum Commoner
Posts: 40
Joined: Tue May 09, 2006 5:13 pm

Post by $phpNut »

OK is that anygood good?

http://www.saxonian.co.uk/imagehost/image.php?id=117

Code: Select all

.button {
        position: relative
        font-family: Georgia;
        font-weight: bold;
        font-size: 1em;
        border: 3px outset #BF7C00;
        color: #FFFFFF;
        background-color: #FFA500;
        padding: 0.2em 0.4em;
        margin: 0;
        text-decoration: none;
        line-height: 1em;
        display: inline;
}
Looks ok, in FF and Opera, netscape for some reason doesn't want to read my local file. and as per usual IE sucks and the border is a loot darker all the way around.
User avatar
Nathaniel
Forum Contributor
Posts: 396
Joined: Wed Aug 31, 2005 5:58 pm
Location: Arkansas, USA

Post by Nathaniel »

I think I'm doing a bad job explaining. I'm sorry.

Both of those input buttons in my test file look exactly like I want them to. I just want them to be the same size, and they are not.
User avatar
Nathaniel
Forum Contributor
Posts: 396
Joined: Wed Aug 31, 2005 5:58 pm
Location: Arkansas, USA

Post by Nathaniel »

Oh wow, I just looked at the input buttons with your CSS and it is teh slick.
User avatar
$phpNut
Forum Commoner
Posts: 40
Joined: Tue May 09, 2006 5:13 pm

Post by $phpNut »

Thanks :D

anyway that was the anchor with the class of button, not too bad, but looks terrible in IE, but if this is the sort of effect you want your going to have to deal with that i'm afraid :!:

I'm not entirely sure if you can use height and width attributes on inline elements, only block level, if i remember my course correctly that is.

what size is the input button?

you might have to put the anchor in a div object, give the div the styling and just have then link in the middle, problem being the link will only work in the middle ...
User avatar
Nathaniel
Forum Contributor
Posts: 396
Joined: Wed Aug 31, 2005 5:58 pm
Location: Arkansas, USA

Post by Nathaniel »

Well all that's retarded. I'm just going to make it a form input button and let PHP deal with making it act like the link would.

Thanks phpNut, and I'm going to steal your CSS for the input buttons :D
User avatar
$phpNut
Forum Commoner
Posts: 40
Joined: Tue May 09, 2006 5:13 pm

Post by $phpNut »

Go for it :D, it was just yours with colors turned to 6 digit hex and a rearranged border rule!
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Styling form elements is quite difficult to get right cross-browser (behind the basic stuff). Normally best to leave them to the browser default. I know, not the right answer, but once you've found piece with that it saves a lot of time and frustration :)
Post Reply