SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot want2design's Avatar
    Join Date
    Aug 2002
    Location
    Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <form> tag... why does it enlarge jump menus?

    Hi,

    I am having a problem with my Jump Menu, and I'm unsure of why. I have the following code:
    Code:
    <select name="menu1" onChange="MM_jumpMenu('parent',this,1)" class="form">
      <option value="" selected>Navigation</option>
      <option value="">- 1</option>
      <option value="">- 2</option>
      <option value="">- 3</option>
      <option value="">- 4</option>
    </select>
    The result is this:


    Obviously it needs to be inside a form in order to work properly, I used the following code:
    Code:
    <form name="form1" method="post" action="">
    <select name="menu1" onChange="MM_jumpMenu('parent',this,1)" class="form">
      <option value="" selected>Navigation</option>
      <option value="">- 1</option>
      <option value="">- 2</option>
      <option value="">- 3</option>
      <option value="">- 4</option>
    </select>
    </form>
    The result is this:


    I have no idea why it does this. Is there any solution to stop it from enlarging the jump menu area? Or am I better off just making a flash menu?

    Thanks in advance for anyone who can help out!


  2. #2
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try placing the form tag outside the table altogether...

    I think there may be some CSS you can use to modify how much padding there is around it, but i've never tried it.

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to elaborate on what platinum said, here's what you can try:

    in your CSS, add the following
    Code:
    form.jumpmenu {
    	margin 0px;
    	padding 0px;
    	border-width: 0px;
    	border-style: none;
    }
    this defines a new class, "jumpmenu", which can be applied to form tags.

    in your html, you now need to specify that your form uses this class by adding class="jumpmenu" to the opening form tag
    Code:
    <form name="form1" method="post" action="" class="jumpmenu">
    <select name="menu1" onChange="MM_jumpMenu('parent',this,1)" class="form">
      <option value="" selected>Navigation</option>
      <option value="">- 1</option>
      <option value="">- 2</option>
      <option value="">- 3</option>
      <option value="">- 4</option>
    </select>
    </form>
    you might need to tweak the pixel values in the CSS to match what you had before...but this should give you a good start for experimentation.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    SitePoint Zealot want2design's Avatar
    Join Date
    Aug 2002
    Location
    Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thank you very much to both of you!

    I tried both methods, and both worked very well.

    Problem solved, and I can now move onto other issues!

    Thanks again!




Bookmarks

Posting Permissions

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