Skip to main content
M
Mi-ul-MVAtZo
Participating Frequently
November 26, 2009
Answered

IE7 and Firefox spacing of form submits

  • November 26, 2009
  • 2 replies
  • 1147 views

I've got an index page with 5 cfforms with a submit button followed by a little bit of text and/

or a cfselect.

In IE7 it looks good - the forms a spaced out (by about 1 line of text) but firefox crams them all together (arguably as it should).

If I add a border to the cfform then it clings tightly to the space I think it should in both browsers.

I've played with various css options but they're affecting both browsers - does anyone know what I should try - ideally to force IE7 (and other browsers) to squash it up so that I can expand it

THanks

Mi-ul

    This topic has been closed for replies.
    Correct answer Leonard_B

    Hi There,

    Try adding the following attribute to the <cfform> tag. The example below is

    if you are developing against the xhtml standard. If not, you could use the

    shortcut version for the same.

    style="margin: 0px 0px 0px 0px"

    - Alternatively ( I use this method ) -

    You could do something like below. Create a separate CSS

    for Internet Explorer and one for the Mozilla based browsers. Then use

    the code below to call the respective CSS based on user browser.

    Add this to the CSS page and call it as a class attribute on the <cfform>

    tag.

    .formBody {

    margin: 0px 0px 0px 0px;

    }

    Then load the respective CSS page using the code structure below.

    <cfif cgi.HTTP_USER_AGENT contains "MSIE">
        <!--- Insert style sheet for Internet Explorer --->
    <cfelseif cgi.HTTP_USER_AGENT contains "Mozilla">
        <!--- Insert style sheet for Mozilla based browsers  --->
    </cfif>

    <cfform class="formBody" ...>

    I was having spacing issues with my forms, plus dealing with the

    difference of overall layout between browsers. By loading browser

    specific CSS for form elements, took away my headaches on forms.

    Leonard B

    2 replies

    L
    Leonard_BCorrect answer
    Inspiring
    November 29, 2009

    Hi There,

    Try adding the following attribute to the <cfform> tag. The example below is

    if you are developing against the xhtml standard. If not, you could use the

    shortcut version for the same.

    style="margin: 0px 0px 0px 0px"

    - Alternatively ( I use this method ) -

    You could do something like below. Create a separate CSS

    for Internet Explorer and one for the Mozilla based browsers. Then use

    the code below to call the respective CSS based on user browser.

    Add this to the CSS page and call it as a class attribute on the <cfform>

    tag.

    .formBody {

    margin: 0px 0px 0px 0px;

    }

    Then load the respective CSS page using the code structure below.

    <cfif cgi.HTTP_USER_AGENT contains "MSIE">
        <!--- Insert style sheet for Internet Explorer --->
    <cfelseif cgi.HTTP_USER_AGENT contains "Mozilla">
        <!--- Insert style sheet for Mozilla based browsers  --->
    </cfif>

    <cfform class="formBody" ...>

    I was having spacing issues with my forms, plus dealing with the

    difference of overall layout between browsers. By loading browser

    specific CSS for form elements, took away my headaches on forms.

    Leonard B

    M
    Mi-ul-MVAtZoAuthor
    Participating Frequently
    November 30, 2009

    Thanks - margin did the trick. I'd spent too long playing with other things like padding

    and missed margin.

    For various reasons I was trying to avoid multiple style sheets

    Mi-ul

    D
    Daverms
    Inspiring
    November 26, 2009

    Hi,

    Can you please post your code here?.

    M
    Mi-ul-MVAtZoAuthor
    Participating Frequently
    November 26, 2009

    Code below: (Note: The div and class="newBookButton" currently don't do anything - i've been using these for testing) FF, IE7 and opera images shown below too.

            <h4>Make an Equipment Booking</h4>
            <cfoutput>
                    <cfform name="bookAV" action="newbook.cfm?debug" method="post" class="newBookButton">
                        <input type="hidden" name="action" value="bookingFormAV" />
                        <input type="hidden" name="bookerEmail" value="#booker.bookerEmail#" />
                        <input type="hidden" name="bookingType" value="E" />
                        <input type="submit" name="bookAV" value="Book AV Equipment" /> for
                        <cfselect name="bookingRoom" value="roomID" display="roomName" query="roomList" queryPosition="below"><option value="0">-- Select Room --</option><option value="203">Other</option></cfselect>
                 </cfform>
                    <cfform name="bookTB" action="newbook.cfm?debug" method="post" class="newBookButton">
                        <input type="hidden" name="action" value="bookingFormTB" />
                        <input type="hidden" name="bookerEmail" value="#booker.bookerEmail#" />
                        <input type="hidden" name="bookingType" value="T" />
                        <input type="submit" name="bookTB" value="Request 5 minute technical briefing" /> in
                        <cfselect name="bookingRoom" value="roomID" display="roomName" query="roomList" queryPosition="below"><option value="0">-- Select Room --</option><option value="203">Other</option></cfselect>
                    </cfform>
                    <cfform name="bookViva" action="newbook.cfm?debug" method="post" class="newBookButton">
                        <input type="hidden" name="action" value="bookingFormViva" />
                        <input type="hidden" name="bookerEmail" value="#booker.bookerEmail#" />
                        <input type="hidden" name="bookingRoom" value="203" />
                        <input type="hidden" name="bookingType" value="V" />
                        <input type="submit" name="bookViva" value="Book Viva Recording Equipment" />
                    </cfform>
                <div class="newBookButton">
                    <cfform name="bookNimlocks" action="newbook.cfm?debug" method="post">
                        <input type="hidden" name="action" value="nimlockForm" />
                        <input type="hidden" name="bookerEmail" value="#booker.bookerEmail#" />
                        <input type="hidden" name="bookingRoom" value="203" />
                        <input type="hidden" name="bookingType" value="N" />
                        <input type="submit" name="requestNimlocks" value="Book Nimlock Display Boards" />
                    </cfform>
       </div>       
                <div class="newBookButton">
                    <cfform name="bookVC" action="newbook.cfm?debug" method="post">
                        <input type="hidden" name="action" value="bookingFormVC" />
                        <input type="hidden" name="bookerEmail" value="#booker.bookerEmail#" />
                        <input type="hidden" name="bookingType" value="C" />
                        <input type="submit" name="bookVC" value="Book Support for a Video Conference" /> in
                        <cfselect name="bookingRoom" value="roomID" display="roomName" query="vcRoomList" queryPosition="above"><option value="203">Other</option></cfselect>
                    </cfform>
       </div>       
                <div class="newBookButton">
        <cfif userLevel.techGroup eq "a">
                        <cfform name="bookMC" action="newbook.cfm?debug" method="post">
                            <input type="hidden" name="action" value="bookingFormMC" />
                            <input type="hidden" name="bookerEmail" value="#booker.bookerEmail#" />
                            <input type="hidden" name="bookingType" value="M" />
                         <input type="hidden" name="bookingRoom" value="203" />
                            <input type="submit" name="bookMC" value="Add Meeting / Course" />
                        </cfform>
                    </cfif>
       </div>
      </cfoutput>

    D
    Daverms
    Inspiring
    November 26, 2009

    Hi,

    Why can't you put html tables and place these controls there?.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices