I have some anchor links and input buttons that I need to have match one another. Even though the display is set to “inline” for input buttons and anchors, the anchors will not change no matter what I set the min-width or height to.
Does anyone know of a way around this besides changing the anchors to display: block? I need the width to be no smaller than 140, but they need to be able to expand if they contain more characters.
Do you have an url to look at?
Inputs are replaced inline elements and as such they are sorta like inline-block. They are layed out inline yet they have block level features.
You COULD set the anchors to display:inline-block (also set display:-moz-inline-box) and it should allow min-width/height etc
a.whatever
{
display:-moz-inline-box;
display:inline-block;
min-width:140px;
}
No, I don’t but you can see a quick code example here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css">
a,
input {
background: #390;
outline: none;
border: 1px solid #000;
text-decoration: none;
color: #fff;
font-weight: bold;
height: 25px;
min-width: 150px;
font-size: 11px;
padding: 2px;
}
</style>
</head>
<body>
<p><a href="#">Anchor</a></p>
<form action="" method="get" accept-charset="utf-8">
<p><input type="submit" value="Button"></p>
</form>
</body>
</html>
Miss my post ;)?
and cater for IE6 maybe? Maybe?
* html a.whatever {
display:inline;
}
For one thing you forgot to support IE7 there Luki.
Second of all. No, IE doesn’t need to be supported since teh anchor is an inline element by default. If I used a <div> in my example, then yes I would need to cater for IE since it is a block element…
The inline method seems to work at my end
Darn, yeah, the *+html lol
Well, you did use a div… hang on… jeez, one of those days…
RyanReese,
Thanks for the advice. I never realized inputs were replaced inline elements.
Out of curiosity, why does mozilla need -moz-inline-box instead of it just using display-inline?
Also, the text is about 3 or 4 pixels higher than the text in the input buttons. The computed styles show the line height for both is 12.8333px. Any ideas how to get the vertical-alignment of the text to match with both elements?
Fortunately, this is a mobile site so no IE!!! :Partier:
FF2 needs display:-moz-inline-box because it doesn’t support inline-block yet. Although it does have a vendor extension version of inline-block 
Have you tried setting vertical-align on the elements?
If not then post an updated code sample :). Also, which browser? All?
I ended up giving the anchor a smaller height and increased the top-padding, so problem solved. Thanks for the help guys!
I wouldn’t worry to much about FF2: FF users are quick to update. And display:-moz-inline-box renders your css invalid if i’m correct (but remember, i’m having a bad day lol)
You’re welcome
There are still a lot of people on FF2.
And yes it does render it invalid because the validator doesn’t acknowledge the vendor extensions.
However, it’s fine to have invalid CSS from vendor extensions if you need it :).
He says this is a mobile site however, so FF isn’t needed to be supported.
Oh well, users and FF2… that’s a discussion with no one getting it right 
About the invalid CSS: i slightly disagree: invalid is invalid. But the discussion would lead us to far i guess 
No need for a discussion, just look at your website statistics. Out of my FF percentage, it’s near 30% or so. Last time I looked.
Mine is 10% lol. But that’s just the 2 of us
I’m sure loads of other sites have their statistics posted. Aka w3schools has theirs…I’m sure you can find more information via google :).
Mozillas website may just even tell you how many FF2 users there are.
Yeah, statistics, sigh… like those who say IE6 has 25%, others say 35%… catch my drift? lol
(W3Ccounter has FF2 as 1.24% marketshare)