3 replies [Last post]
migs_mhdy
Offline
newbie
PA, USA
Last seen: 17 years 26 weeks ago
PA, USA
Timezone: GMT-4
Joined: 2003-07-21
Posts: 6
Points: 0

I'm trying to place an input element (submit button) next to an anchor link and apply the exact same height/attributes to both of them so that they look similar. Each browser displays it differently. Some don't repect the height, some don't respect line-height. Any thoughts or help would be appreciated.

CSS:
#pollId a#result, #pollId input#submit
{
background-color:#E5AE2A;
border:1px #fff solid;
color:#000;
cursor:pointer;
display:block;
font-weight:normal;
float:left;
line-height:1;
height:1em;
margin-right:10px;
padding:0 .6em;
vertical-align:bottom;
}

HTM:
<div id="pollId">
<h1>Poll</h1>
<p id="question">Loreum Ipsum?</p>

<form method="post" action="index.php">
<p id="answer"><input type="radio" name="option_id" id="option_id" value="1" />Yes
<input type="radio" name="option_id" id="option_id" value="2" />No
</p>

<input type="submit" id="submit" value="Vote" />

<a href="index.php?action=results&amp;poll_ident=5" id="result">See results</a>
</form>
</div>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Input and Anchor buttons: height issues

Hi migs_mhdy,
Browsers allow differing levels of change on form objects.
You could try using two anchor links or two buttons, but you may need to use a little javascript to get the form to submit.
Otherwise find a common ground between the browsers, set the button up as best you can the format the anchor to the same look.

Hope that helps

migs_mhdy
Offline
newbie
PA, USA
Last seen: 17 years 26 weeks ago
PA, USA
Timezone: GMT-4
Joined: 2003-07-21
Posts: 6
Points: 0

Input and Anchor buttons: height issues

Hi Tony, Thanks for the info!
I ended up settling for "near" pixel perfect in IE6 and NN7, while allowing Opera 7 look completely different. I stripped out the attributes that appear to be useless. I'm avoiding JavaScript because I need the form to work in as many browsers, readers, platforms as possible. Maybe in 3 years from now, browser standards will actually mean something Tongue

CSS:
#pollId a#result, #pollId input#submit
{
background-color:#F5AE2A;
border:1px #fff solid;
color:#000;
cursor:pointer;
font-weight:normal;
float:left;
margin-right:10px;
padding:0 1em;
}

cvk
Offline
Regular
right behind you
Last seen: 17 years 11 weeks ago
right behind you
Timezone: GMT-5
Joined: 2003-11-06
Posts: 14
Points: 0

Input and Anchor buttons: height issues

Have you considered using two different submit buttons? You can name two buttons the same thing in the form and give each a different value. Check which button the user clicked by checking the value of $_RESULTS['mybuttonname'].

I put up a little example on my site. Hope it helps.

c v k @ z y b x . c o m