Creating an HTML Form - Fieldset and Legend problem.

Hello everyone,
I am trying to build an HTML/CSS form from scratch.
However, I want to bring the legend within the fieldset rather then the  legend sitting on the fieldset.
To get this done, I gave the fieldset a top padding and the legend an  absolute position. However the fieldset appeared to have a break as  indicated in the red circle of the below image. How can I close or  prevent this gap/break?
Here is the complete code.
<style type="text/css">
form{
     margin: 0;
     padding: 0;
     font-family: "Century Gothic";
     font-weight: bold;
     font-size: 16px;
legend span{
     position: absolute;
     top: 30px;
fieldset{
     background-color: #EAEAEA;
     padding-top: 60px;
div{
     width: 100%;
     margin: 0 0 5px 0;
     padding: 0;
label {
     float: left;
     width: 160px;
     margin-right: 16px;
     text-align: right;
     margin-top: 5px;
.UserFirstNameField, .UserLastNameField, .UserEmailField, .UserPhoneNumberField{
     width: 200px;
     padding: 4px;
     font-family: "Century Gothic";
     font-weight: bold;
     font-size: 16px;
     color: #F90;
     background-image: url(DFormsImages/Form-Fields-Background-Image.png);
     background-repeat: repeat-x;
     background-position: left center;
     border: 1px solid #D5D5D5;
</style>
<!--[if lte IE 7]>   
<style type="text/css" media="all"> 
label {
     margin-top: 5px;
</style>   
<![endif]-->
</head>
<body>
<form id="BasicForm" class="BasicFormTemplate" method="post" action="">
<fieldset>
<legend><span>Personal Information</span></legend>
<div> 
<label for="UserFirstName">First Name:</label> 
<input id="FirstNameInput" name="UserFirstName" class="UserFirstNameField" type="text" /> 
</div>
<div>
<label for="UserLastName">Last Name:</label> 
<input id="LastNameInput" name="LastName" class="UserLastNameField" type="text" /> 
</div>
<div>
<label for="UserEmail">Email:</label> 
<input id="UserEmailInput" name="UserEmail" class="UserEmailField" type="text" /> 
</div>
<div>
<label for="UserPhoneNumber">Phone Number:</label> 
<input id="UserPhoneNumberInput" name="UserPhoneNumber" class="UserPhoneNumberField" type="text" />
</div>
</fieldset>
</form>
</body>
</html>
Thanks everyone!
Patrick

Murray *ACP* wrote:
You might find this good essay to be helpful:
http://tjkdesign.com/articles/how_to_position_the_legend_element.asp
Good day Murray,
What I did was give the legend a zero padding.
legend{ padding: 0; }
and the gap was removed.
I tested in IE7, Firefox 3.6.6, Safari 5.0 and Opera  10.60 and it works very well.
I have not tested it in IE 6.
However, I also used the method from the article you provided, it also works well and I will also use that as an alternative when needed for another fix.
Thanks for your valuable help as always.
Patrick

Similar Messages

  • Reports 6i -- How to create an HTML form template before form processing

    Hello Oracle Reports Gurus,
    I'm using Oracle Reports 6i and trying to create an HTML form WITHOUT using the Oracle Reports 6i parameter form builder. The goal: to take a web page already in existence containing a form with checkboxes and radio buttons and make it 'transparent' to my users in hooking it to Oracle Reports. So far, I made my HTML page (with form and all) a "header" file for my Oracle report and didn't place anything in the parameter form builder. However, upon doing so, Reports 6i decided to be extra helpful and place form elements into the Parameter form builder.
    So,
    1) Is there a way to take a web page with a form and all and easily "plug it" into Oracle Reports 6i WITHOUT using the Parameter Form builder?
    2) Is there another way to create an HTML form that will allow me to have radio buttons, checkboxes, etc?
    Thanks in advance from this Oracle Reports newbie,
    Lee Lonitz
    Webmaster
    Lockheed Martin IS&S
    [email protected]

    lee,
    i am not exactly sure what you are trying to do. since you state you use HTML, i assume you are running 3-tier with the report server, right ?
    if so, the easiest way to hook your parameter form up to your report is to just pass the URL to the report as the action URL for your form.
    in 9i/10g we provide the Reports Web source, which is based on JSP and allows you to paste HTML into your report to create a highly customized HTML parameter form.
    i am afraid in 6i, we don't provide a way to actually combine your HTML form ito the report. it needs to stay separate, but can link to the report using the way i described above.
    thanks,
    ph.

  • Creating simple HTML forms

    I am currently engaged in applying a new design to a customers SAP driven website.
    I have successfully used the theme designer and edited master pages to apply the deisgn and have created some static pages with static information.
    The problem I now face is that I need to create some additional pages like a contact forms, brochure request etc...  Is there a facility for creating this type of interactive page (where the contents of a simple form is emailed to the site owners) or do I need to create it myself form scratch and provide a link?
    Should I create a plugin and if so, how do I then link this to a static page.  If I just want to create a dynamic page (I.E. wihout assigning it to a slot) how is this achieved ?
    I hope this all makes sense.  Any help would be very much appreciated.
    Thanks
    C

    Thank again for your help.
    I think perhaps I am asking the wrong question. 
    If you are able to take a quick look at [http://www.atpgifts.co.uk/].  The homepage is great. It has the categories down the left, the search bit etc...  what I need is for the contact us link to go to a separate page (currently it is a static page) that looks exactly like the homepage and has the same dynamic content on the left hand side but has the web form control in the content.  Is this possible.  Which page should I copy and edit?  Can I add the webform control to the static page or must I create a new dynamic aspx page ?
    If I am not making sense, please let me know.  I don't usualy develop in this way.  Normally we develop application from scratch so this type of thing would be trivial !!
    Thanks again
    C

  • Is there a way to create reusable HTML Forms that can be used on multiple pages?

    I'm trying to understand the recommended approach to managing 10 HTML forms that will be reused on many different pages.  I want to be able to modify the form definition once and have the change propogate.

    Is your requirement that authors be able to change the form definition, or should form definition be controlled by developers?
    In the case of authors being able to change the form definition then I would say best practice would be to create a page that holds the form definition (using whatever components work for you - either the out of the box form components or something custom). Then use the reference component to point the definition in all the other locations you want the form to appear. One thing to note is if you are using dispatcher for caching you need to make sure you strategy for cache flushing accomadates this approach.
    In the case of developers controlling the form definition you could crate a component for each form, and then simly drag that component onto the pages that require the form. In this case your would control all the form label and description elements in the localization file.

  • Top 10 chart and legend problem

    Post Author: training2go
    CA Forum: Charts and Graphs
    Hello,
    I am using CR for Visual Studio 2005.I create a top 10 chart with a legend. The chart is in the group header 1b section and I'm using the underlay option so that the chart is to the right of the detail records.
    The chart and legend have 2 problems:
    1. The chart displays entries that are not in the detail records. The top 2 pie slices are for amounts not in the detail records or in the legend
    2. The percents in the legend are not correct.The first 3 entries in the legend are:
    $5,879.70 18.1%$5,219.55 16.1%$10,886.79 11.2%I would think that the $10K amount would have the largest percent and the $5879 nbr would have the lower percent.I've looked every place that I can think of to find out what is causing this, but I'm not having any luck.I also tried putting the chart in the group footer section, but the results are the same.I've also noticed this in CR XI. I don't know if I'm doing something wrong or if this is a bug.Any help would be greatly appreciated.Thank you.

    Post Author: training2go
    CA Forum: Charts and Graphs
    I've still been trying to get this to work or at least figure out what I'm doig wrong, but so far I haven't had any luck, so I'm hoping someone can help me.

  • Label and legend problem in grouped month data pie chart for Crystal XI

    Post Author: mikeyplop
    CA Forum: Charts and Graphs
    Hi all, I have a problem with a pie chart I created based upon monthly figures that were grouped.  The data type is DateTime but I have modified the report to show the date as January 2007, February 2007 etc. etc.  This is all fine and appropriate as it is based on a gouping of all the data into months. However, when I chart the same data the labels and legend do not reflect this formatting.  Instead they show up as 01/2007, 02/2007 etc. etc. I have searched the forums, but was unable to find any one else who has had the same problem. Any help would be greatly appreciated. Kind regards, Mikey

    Post Author: training2go
    CA Forum: Charts and Graphs
    I've still been trying to get this to work or at least figure out what I'm doig wrong, but so far I haven't had any luck, so I'm hoping someone can help me.

  • Creating dynamic HTML form from XML data in session

    I'm a bit new to servlets, please bear with me if I don't make myself clear.
    currently i have a HttpServlet that extracts a XML document into a jdom Document.
    this is done within the doGet() method as the XML document is in the session object.
    i would like to create a popup window (a JSP or servlet) that can access the same session, convert some of the data in the XML to a submit form that users can put input into, and have the JSP(or maybe servlet) send the form data and the XML back to the original HttpServlet (through the session object).
    i have a few questions on how to make this happen:
    1.how to create a popup window (JSP or servlet) in a servlet, and forward the session data as well?
    2.if the popup window has a submit form that submits some extra data back to the original httpservlet, will the XML document still be retained in the session?
    and any advise on how to go about this problem is highly appreciated!

    Hi,
    This is my first time posting a reply. Hope this helps.
    I am assuming that you are hitting the servlet from a link. This is one way of doing it. You can create a new window using Javascript. like this.
    <script language="javascript">
    var popupWin
    function openWindow(page){
    popupWin=window.open(page,"","width=800,height=600,resizable,scrollbars");
    </script>
    link
    The response of your servlet will be in the new pop-up window.
    2.if the popup window has a submit form that submits
    some extra data back to the original httpservlet,
    will the XML document still be retained in the
    session?The session should be retained as long as you are hitting the same servlet container . You should be able to access the seesion variable in the original servlet if the form in the pop-up window calls the original servlet.
    --mv                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

  • Creating dynamic html forms

    Hi,
    We have a requirement to create a number of html forms where the fields displayed on the form could change based on the date a user requests the form.
    The technology stack we are using is jsp,struts, adf bc, although we may use jsf , adf bc.
    The only way I can see of doing this(assuming we get the database design correct) is to generate the required xml from the database and then transform this into html on the fly? This would obviosuly not be compatable with the ADF binding feature though.
    Has anyone done this, and/or found a way to make it work using ADF.
    Thanks,
    Richard

    I guess I could also just dynamically build up the from fields directly in the jsp.
    I guess I would just loop throught the meta data on the forms from the database,
    and then just write out the number and type of form elements required.
    This would still not make use of adf binding though.

  • How to use html form actions and methods

    Hi, I want to make a quick contact page using Edge. I used the following code in my creationComplete but had no luck.  Any help?
    var na = sym.$( "email" );
    email.html( '<form action="send_mail.php" method="post"><input type="text" id="email" value="" />' );
    var button = sym.$( "btn" );
    button.html( '<input type="submit" value="Send" />' );

    My understanding from your question is that you would like to programmatically (using LabVIEW) send input to and click a button on an existing HTML website, is that right?
    If yes, then you can use ActiveX calls to embed a web browser into the front panel of your VI and then use its invoke node to input a text to a form or click a button. Another way is to use the lower-level TCP VIs in LabVIEW, but you need to understand HTTP protocols to successfully use this. See below examples to get started.
    ActiveX
    https://decibel.ni.com/content/docs/DOC-25396
    https://decibel.ni.com/content/docs/DOC-12454
    TCP VIs (HTTP)
    https://decibel.ni.com/content/docs/DOC-2230
    http://zone.ni.com/devzone/cda/epd/p/id/3153
    FYI, LabVIEW Internet Toolkit has been deprecated starting LabVIEW 2012, so it is not recommended to build a new application using that.
    Hope this helps.
    Regards,
    A. Yodha
    Applications Engineer | National Instruments
    Singapore (65) 6226 5886 | Malaysia (60) 3 7948 2000 | Thailand (66) 2 298 4800
    Philippines (63) 2 659 1722 | Vietnam (84) 8 3911 3150 | Indonesia (62) 21 2924 1911

  • HTML Forms (js) and JavaApplet communication

    I read, that i can use netscape.javascript.JSObject to get values from HTML forms.
    But, javac (JDK 5 Update 7) says that package netscape.javascript does not exist
    How i can read values from HTML forms.
    Alexandr

    Hi,
      Try to insert the embed code inside one of your <div> tags say the div-content tag after your <p>..</p> tags.
    The embed code should work inside <div> ... </div> tags according to the layout defined there.
    Thanks,
    Lucia

  • How to group Page Items with fieldset and legend HTML tags ?

    I have 7 Page Items (i.e. select list, input text....) defined in Side Bar Region of my Page Zero,
    for clarity I would like to group these items as follows:
    1) <fieldset>
    <legend>Costs</legend>
    <input ..... item1 >
    <input .... item2 >
    <input..... item3 >
    </fieldset>
    1) <fieldset>
    <legend>Technical Attributes</legend>
    <input ..... item4 >
    <input .... item5 >
    <input..... item6 >
    <input..... item7 >
    </fieldset>
    I appreciate if you can tip me  with  a URL link or codes examples i.e. javascript, Side Bar template #BODY# customization.
    Thanks for your tips.

    What if you need to access more than one data source?
              <sql:query var="myQuery" dataSource="myDataSource">
              </sql:query>
              <sql:query var="myOtherQuery" dataSource="myOtherDataSource">
              </sql:query>
              If you specify one data source as the default, how do you access the other
              one?
              -- Craig
              "thanh nguyen" <[email protected]> wrote in message
              news:3fa18529$[email protected]..
              > I believe you can set up a default datasource for the application context
              in the web.xml and weblogic.xml. That way, on your JSP, you will not need to
              set the datasource. The connection pool will handle all of that for you.
              >
              > 1. modified weblogic.xml
              > <reference-descriptor>
              > <resource-description>
              > <res-ref-name>jdbc/hr</res-ref-name>
              > <jndi-name>jdbc/hr</jndi-name>
              > </resource-description>
              > </reference-descriptor>
              > 2. modified web.xml
              > <context-param>
              > <param-name>javax.servlet.jsp.jstl.sql.dataSource</param-name>
              > <param-value>jdbc/hr</param-value>
              > </context-param>
              >
              > <resource-ref>
              > <res-ref-name>jdbc/hr</res-ref-name>
              > <res-type>javax.sql.DataSource</res-type>
              > <res-auth>CONTAINER</res-auth>
              > </resource-ref>
              > 3. redeploy app
              

  • HTML Forms  & fieldset tag

    We are trying to create a box around the input fields when
    the user is typing something on a form. In HTML we are using
    fieldset to combine the fields and render a box around it using
    bgcolor etc. How can we achieve the same thing in Flash?

    hi,
    you can use the pl/sql web tool kit to develop web applications

  • HTML Forms, Mailto and Goto URL Behavior

    I know just the basics of HTML Programming. Anyway, in
    Dreamweaver MX, I've created a form with the Action as
    mailto:myemailaddress Method: Post and Enctype: text/plain If that
    is all I do, when the form is filled out and the user hits submit,
    I get the results....no problem. But, I want the user to know that
    their submission went through, so instead of the page standing
    still after the submit button is hit, I added to Go to URL
    behavavior so that when they hit submit, it takes them to a thank
    you page. Unfortunately, when I do that, the mailto no longer seems
    to work. Any suggestions?

    mailto: isn't going to work reliably.
    using a server side script is the way to go.
    first- check your host's FAQ/Support section for info about
    preinstalled
    scripts. If hosting has a control panel or CPanel, look in
    there.
    if no preinstalled script, if you can use php i suggest
    phpformmail from
    http://boaddrink.com
    Alan
    Adobe Community Expert, dreamweaver
    http://www.adobe.com/communities/experts/

  • Pass Vectors To HTML or SCript and Another Problem....HELP...PLEASE....

    Hi,
    I am creating a Servlet project.
    I want to create screen#2 depending on what values are inputed in Screen#1.
    Basically i want to Dynamically change the "Document TYpe" depending on First or last name....
    The main thing is passing either a Vector or Array from screen#1 to generate "Document Type" in Screen#2.
    How can i pass a Vector or array to either HTML or JavaScript...
    Screen2 uses frames sets is there a better way to do this so I don't have to call two different files from one frame set file...
    Any Help will be greatly Appreciated....
    Thanks in advance...
    Screen#1:
    |---------------------|
    |Firstname:___________|
    |           |
    |Lastname:____________|
    |           |
    | ----------- |
    | | submit | |
    | ----------- |
    |           |
    |---------------------|
    Screen#2:
    |-----------------------|--------|
    |Frame1           |Frame2 |
    |                |      |
    |                |      |
    | Image           |Document|
    |                |Type      |
    |                |      |
    |                |     |
    |-----------------------|--------|

    Dynamically create a JavaScript array that can be accessed from either HTML page.
      <Script language="JavaScript">
      var recieveArray = [
       <% Vector v = (Vector) request.getAttribute("passedVector");
           for (int i = 0; i < v.size(); i++) { %>
                <%= (i != 0) ? "," : "" %>
                "<%= (String)v.elementAt(i) %>"
           <% } %>
        ];Just an illustration and not guaranteed to compile or run.

  • Question about creating Custom JSF form tag and renderer

    Is it possible to build a custom form tag in JSF and have it replace the standard jsf form tag. Are there any potential issues with child forms or anything else.
    I created the following
    - custom form component class that extends javax.faces.component.UIForm (the only changes I made was to change the value of the COMPONENT_TYPE attribute and change the value for renderer type)
    - custom form renderer class that extends HtmlBasicRenderer and I made changes to the encodebegin method and encrypt the value of the id and action url)
    - custom form tag class that extends UIComponentELTag ( I did not make any changes here)
    - tld for my custom form tag
    - created an entry in faces-config.xml of my web-app for my custom form tag
    Are there any issues with the above.
    Is there something I should do in addition.

    In theory you should be fine. Some of the open source libraries either swap out the renderer for the standard h:form component or supply their own form components. You could look at their code for reference if need be.

Maybe you are looking for