Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    Hello. I am using PayPal shopping cart buttons. I expected that I can place these buttons in
    the middle of a line by using the CSS display:inline property. But it doesn't work. Here is what happens.

    CSS:

    form,input {display: inline;}

    HTML:

    Item #1234 <form><input type=image etc.><input etc.></form> Click here to order Daily One Vitamins.

    So for example if a "Smiley Face" were used as the INPUT IMAGE, then I expect the result to be:

    Item #1234 Click here to order Daily One Vitamins.


    But it doesn't work. This is what it looks like in my IE-6 browser:

    Item #1234 Click here to order Daily One Vitamins


    What am I doing wrong? What is the solution? I have tried a dozen different ways, nothing seems to work.

    ...Is there a solution...?

    Thank you very much, anybody!

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Any chance you could give us some more code to work with? Maybe the specific code that's inside the form. So that we can try and replicate the situation.

    At a glance, you shoudl be right, but display: inline can sometimes have some strange behaviors. Try applying switching your selector to `form, form input, form img'. Just out of curiosity, I'm not entirely sure whether this will have any effect.

  4. #3
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    Thank you again for your help, Shadowfiend.
    The `form, form input, form img' does not work.
    But I have found something that MAYBE works. I surrounded the whole form with <table class=inline></table>. Then of course I specify:
    .inline {display: inline}

    Instead of <table class=inline>, I have also tried surrounding the form with:
    <form class=inline>
    <p class=inline>
    <block class=inline>
    <div class=inline>
    <h1 class=inline>

    None of these work. This raises the questions:

    1. Is is possible that IE-6 only applies "display:inline" properly to tables?
    2. Is it fine to use only <table></table>? Or to be safer, should I add <tr><td></td></tr>? (Both seem to work in IE-6.)
    3. If I use the <table></table> method, then I must add this to 279 .htm file includes... Plus, I do not like using "display:inline" for tables because it is a drastic departure from the nature of a table, that totally depends on the CSS. So, another change would be much better...that only requires changing 1 stylesheet...!

    Anyway, as you suggested, here I post the exact <form> code for product #20472-7:

    20472-7 <table class="inline">
    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="image" src="../pix//cartadd.gif" border="0" name="submit" align="left"
    class="cartadd" alt="Click to order 1. Can add more or remove at checkout.">
    <input type="hidden" name="add" value="1">
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="business" value="xxx@VitaminShelf.com">
    <input type="hidden" name="item_name" value="Daily One no-iron 30cap (Twinlab) [40% Discount]">
    <input type="hidden" name="item_number" value="20472-7">
    <input type="hidden" name="amount" value="6.45">
    <input type="hidden" name="no_shipping" value="2">
    <input type="hidden" name="return" value="http://www.vitaminshelf.com/confirmation/">
    <input type="hidden" name="cancel_return" value="http://www.vitaminshelf.com/cancellation/">
    <input type="hidden" name="currency_code" value="USD">
    </form></table> Daily One no-iron 30cap (Twinlab) [40% Discount] $6.45


    Go here to see this code in operation:
    http://vitaminshelf.com/all/#20472-7

    :alien: Krystof :alien:

  5. #4
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    Another "MAYBE" solution...

    If I specify form {positon: absolute}
    --with no coordinates, then the form will be placed "inline" where I want it.
    ...BUT the text that comes just after, is then placed "underneath" the form image..!

    This can be adjusted by either (a) placing several &nbsp; spaces before the text, surrounded by a <span> that controls the size of the font so that it ends up the same as the form image, or (b) a single &nbsp; space surrounded by a <div> with a "relative position" that creates a left margin the same width as the form image.

    This still requires the manual editing of 279 .htm includes. However, it will be twice as fast, because I will not need to "surround" the existing <form></form> with a <table></table>. Instead, I just set the form {positon: absolute}---and then after the form, with one swift paste to each .htm file, I just add <div class="spacer">&nbsp;</div>. And it is done...

    ..BUT problems with this, according to the w3.org:

    "Notes in Netscape 4.0+:

    Absolute positioning does not work with list items, hyperlinks, or form fields..."

    ...And so, I am beginning to suspect that using "INLINE" property for <tables> is the most reliable way to go....or is it...? Your comments please...!

  6. #5
    Member
    Join Date
    Sep 2003
    Posts
    39
    Member #
    3141
    Without having fully read this whole post through (sorry short of time) perhaps it is something to do with the fact that the HTML form element pads quite a few things out. Some kind of margin:0px; might help?

  7. #6
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    Thank you, Mark. Well, I already tried that. It is a good suggestion. Setting margin to 0 is necessary. But unfortunately it doesn't solve the basic problem: that IE simply refuses to put the form image "inline."

    This is the desired result:

    item 1234: click here to order

    With no display (default) set, as to be expected, the form being a "block element" skips a line in IE-6:

    item 1234:
    click here to order

    Then if you set {display:inline; margin: 0;} the "desired result" SHOULD happen, but instead this happens:

    item 1234: click here to order


    I.e., the following text is placed "inline" with where the form image SHOOULD be--but the form image itself skips a line. Weird. Try it on one of your own sites and see.

    HOWEVER IF THE FORM IS AT THE VERY BEGINNING OF THE LINE OF TEXT, THEN IT WORKS! (Without resorting to a <table>. And also without the even more questionable: resorting to an incorrect IE rendering of "absolute positioning" in order to correct the incorrect IE rendering of "inline display"...!)

    I.e.:

    item 1234: click there to order

    And so--if you visit my website (VitaminShelf.com) you will see this is what I have done. The ADD TO CART <form> button is always at the very beginning of a line of text. Not one single letter--not even &nbsp;--can be before the <form>--or the {display:inline} will not work... So that's just the way it has to be, I guess...

  8. #7
    Member
    Join Date
    Sep 2003
    Posts
    39
    Member #
    3141
    Hi Krystof,

    I've had a better look at that code now. I see what you mean!
    Are you adverse to using a table around all three elements instead of just your Paypal form because that would appear to solve the problem.

    e.g. code below...

    <table>
    <tr>
    <td>20472-7</td>
    <td><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="image" src="../pix//cartadd.gif" border="0" name="submit" align="left"
    class="cartadd" alt="Click to order 1. Can add more or remove at checkout.">
    <input type="hidden" name="add" value="1">
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="business" value="xxx@VitaminShelf.com">
    <input type="hidden" name="item_name" value="Daily One no-iron 30cap (Twinlab) [40% Discount]">
    <input type="hidden" name="item_number" value="20472-7">
    <input type="hidden" name="amount" value="6.45">
    <input type="hidden" name="no_shipping" value="2">
    <input type="hidden" name="return" value="http://www.vitaminshelf.com/confirmation/">
    <input type="hidden" name="cancel_return" value="http://www.vitaminshelf.com/cancellation/">
    <input type="hidden" name="currency_code" value="USD">
    </form></td>
    <td>Daily One no-iron 30cap (Twinlab) [40% Discount] $6.45</td>
    </tr>
    </table>

  9. #8
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    Have you tried moving the <form> to between the <tr> and the <td>? Sometimes that can shift the layouts around in unexpected ways.

  10. #9
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    Thank you for the good suggestions, Mark and Fallout. I will keep this in mind. In particular: my entire page is enclosed by a <table>. Fallout's comment has reminded me that this can effect certain codes. Perhaps this is what is having strange effects on the CSS. I am currently modernizing to eliminate the use of <table> design, replacing with <div> CSS design. Meanwhile, I am just always going to put the <form> at the beginning of a line.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css image inline with text

,
css review 6 display inline images nested in form as block
,
css text and image inline
,
display text inline with image html code
,
how to code display all inline images in form block in css
,
how to display image inline with text
,
how to keep image and text inline
,
html code to put an image inline with text
,
ie text image inline
,
keeping image away from text css
Click on a term to search for related topics.
All times are GMT -6. The time now is 06:57 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com