<input> elements are inline right? Why is mine acting block?

[Govinda]

this too! (I am missing something basic!)
Inside a <div> I have a
<label>..</label>
followed by an <input ... />
followed by a 2nd <input .. />

That 2nd <input> is on the next line after the first one.. as though
it is a block element. But I want it to display right after the 1st
input.. as though they are both inline elements within the same
block.

Can anyone shed some leader light for me to help?

Thanks!
-Govinda

[klan...@gmail.com]

govinda.w...@gmail.com (Govinda) wrote on 4/22/09 6:34 PM

input is an inline element and should behave as you expect. One
reason it may not is if the three elements label, input, input
are too wide for the space allowed.

Do you have a page you can show where this isn't working?

Ken

--
Simple Lives Web Design
http://simplelives.com

[Govinda]

Ken,

Thanks for your replies!
'vertical-align' seems (according to the css book I have) like it
would do the trick to vertically align/center inline elements. But it
does not seem to be helping me here.. or having any effect at all!
See my page here:

http://www.sleeperhouse.com/tempGovinda/start_1-forGTlist.html

I want the text
"Click for Paypal"
to be vertically aligned with respect to the graphic button to its
left. As it is now the text is too high. You referred me to that
article. But I have not tried to follow it properly yet. Before I
go there, I want to see how much related are my two issues on this
page. Here is the 2nd issue:

Below the first issue, I have that input text box with a *gif* to its
right (it only looks like text; I need that gif to effectively be a
form submit button). That gif is too low. I want it to be vertically
centered with respect to the text input to its left. (Before I said
this was on the next line, but it does not look to be so.. just so
low that it almost could be.)

??

thanks so much for your input/guidance here!
-Govinda



On Apr 22, 11:20 pm, klanx...@gmail.com wrote:
> govinda.webdnat...@gmail.com (Govinda) wrote on  4/22/09  6:34 PM

[Ronald J Kimball]

On Thu, Apr 23, 2009 at 02:22:04PM -0700, Govinda wrote:

> http://www.sleeperhouse.com/tempGovinda/start_1-forGTlist.html
>
> I want the text
> "Click for Paypal"
> to be vertically aligned with respect to the graphic button to its
> left. As it is now the text is too high. You referred me to that
> article. But I have not tried to follow it properly yet. Before I
> go there, I want to see how much related are my two issues on this
> page. Here is the 2nd issue:
>
> Below the first issue, I have that input text box with a *gif* to its
> right (it only looks like text; I need that gif to effectively be a
> form submit button). That gif is too low. I want it to be vertically
> centered with respect to the text input to its left. (Before I said
> this was on the next line, but it does not look to be so.. just so
> low that it almost could be.)

Using Firebug, turning off the 'float:left;' for
'#left_container fieldset input' fixes both these issues.

#left_container fieldset input {
-x-system-font:none;
display:inline;
float:left;
font-family:"Helvetica",Arial,sans-serif;
font-size:14px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:18px;
margin-left:5px;
}

Ronald

[klan...@gmail.com]

govinda.w...@gmail.com (Govinda) wrote on 4/23/09 2:22 PM

>thanks so much for your input/guidance here!

You're welcome but I haven't really done much. But Ronald seems
to have come up with the answer. :-)

[Govinda]

Ronald, that fixed that! Thank you!
(I really appreciate both your time for even reading this.)

Now I test the otherwise working (more complete version of the) page
http://www.sleeperhouse.com/tempGovinda/orderCSS_IE7_Test_GTlist-bad.html
in IE7 (vista) (normally I work on mac/FF), and I now see that the
<div id="right_container">
is sitting *below* the
<div id="left_container">
Argh! The css is the same.. the differences in the pages should not
affect anything as far as I know. I don't see the issue.. but IE7
does see something different. Can you spot it?

I want
<div id="right_container">
to sit as a column on the right, with top edge flush with top of the
<div id="body_container">
, just like
<div id="left_container">
does.

compare these 2:
http://www.sleeperhouse.com/tempGovinda/orderCSS_IE7_Test_GTlist-good.html

http://www.sleeperhouse.com/tempGovinda/orderCSS_IE7_Test_GTlist-bad.html

thanks!
-Govinda

[Govinda]

I had stuff before the <doctype> declaration that made IE go into
quirk mode. Resolved now. Thanks, -G