Page 1 of 1
Making <input> and <a> look the same...
Posted: Sun May 14, 2006 8:20 am
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?

Posted: Sun May 14, 2006 8:29 am
by $phpNut
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 ...
Posted: Sun May 14, 2006 8:33 am
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.
Posted: Sun May 14, 2006 8:41 am
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.
Posted: Sun May 14, 2006 8:52 am
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.
Posted: Sun May 14, 2006 8:59 am
by Nathaniel
Oh wow, I just looked at the input buttons with your CSS and it is teh slick.
Posted: Sun May 14, 2006 9:10 am
by $phpNut
Thanks
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 ...
Posted: Sun May 14, 2006 2:08 pm
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

Posted: Sun May 14, 2006 2:16 pm
by $phpNut
Go for it

, it was just yours with colors turned to 6 digit hex and a rearranged border rule!
Posted: Mon May 15, 2006 5:12 am
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
