Back To Website Design Forum

Form Tag Issues

  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post August 18th, 2010, 10:02 am

Hello Everyone,

I have put together this page for my employer and I am having some bizarre spacing issues with the form tag. It is creating a ridiculous amount of space that I cannot seem to correct. I can send you the URL in a private message if you would like to see precisely what I mean. Here is the current code I am using.

Code: [ Select ]

<!--This is where the Form begins--->
<div id="form">
<FORM NAME="nav" style="margin-bottom:0px; margin-top: 0px; padding-top: 0px" ><DIV >
<SELECT NAME="SelectURL" onChange=
"document.location.href=
document.nav.SelectURL.options[document.nav.SelectURL.selectedIndex].value">
<OPTION VALUE=""
SELECTED>Please Select a Collection:
<OPTION VALUE="">
Edmund Wattis Littlefield Speeches
<OPTION VALUE="">
E. R. Lubber Company History
<OPTION VALUE="">
Utah Construction Company Minutes
<OPTION VALUE="">
Utah Construction Feather River Scrapbook Vol. 1
<OPTION VALUE="">
Utah Construction Feather River Scrapbook Vol. 2
<OPTION VALUE="">
Utah Construction Hoover Dam Scrapbook Vol. 1 H. J. Lawler
<OPTION VALUE="">
Utah Construction Hoover Dam Scrapbook Vol. 2 E. O. Wattis
<OPTION VALUE="">
Utah Construction Hoover Dam Scrapbook Vol. 3 H. J. Lawler
<OPTION VALUE="">
Utah Construction Stockholder Ledgers
<OPTION VALUE="">
Utah Construction Mexico Projects
<OPTION VALUE="">
Utah Construction-Utah International Photographs
<OPTION VALUE="">
Utah International/General Electric Merger Documents
<OPTION VALUE="">
WSU Stewart Library, UC-UI Symposium
</SELECT><DIV>
</FORM>
</div>
<!---Form Ends--->
  2. <!--This is where the Form begins--->
  3. <div id="form">
  4. <FORM NAME="nav" style="margin-bottom:0px; margin-top: 0px; padding-top: 0px" ><DIV >
  5. <SELECT NAME="SelectURL" onChange=
  6. "document.location.href=
  7. document.nav.SelectURL.options[document.nav.SelectURL.selectedIndex].value">
  8. <OPTION VALUE=""
  9. SELECTED>Please Select a Collection:
  10. <OPTION VALUE="">
  11. Edmund Wattis Littlefield Speeches
  12. <OPTION VALUE="">
  13. E. R. Lubber Company History
  14. <OPTION VALUE="">
  15. Utah Construction Company Minutes
  16. <OPTION VALUE="">
  17. Utah Construction Feather River Scrapbook Vol. 1
  18. <OPTION VALUE="">
  19. Utah Construction Feather River Scrapbook Vol. 2
  20. <OPTION VALUE="">
  21. Utah Construction Hoover Dam Scrapbook Vol. 1 H. J. Lawler
  22. <OPTION VALUE="">
  23. Utah Construction Hoover Dam Scrapbook Vol. 2 E. O. Wattis
  24. <OPTION VALUE="">
  25. Utah Construction Hoover Dam Scrapbook Vol. 3 H. J. Lawler
  26. <OPTION VALUE="">
  27. Utah Construction Stockholder Ledgers
  28. <OPTION VALUE="">
  29. Utah Construction Mexico Projects
  30. <OPTION VALUE="">
  31. Utah Construction-Utah International Photographs
  32. <OPTION VALUE="">
  33. Utah International/General Electric Merger Documents
  34. <OPTION VALUE="">
  35. WSU Stewart Library, UC-UI Symposium
  36. </SELECT><DIV>
  37. </FORM>
  38. </div>
  39. <!---Form Ends--->


And this is my corresponding CSS for this:
Code: [ Select ]
#form {
float: left;
text-align: left;
display: block;
position:absolute;
top: 60px;
left:0px;
margin: 0;
padding: 0;
border:0;
display:inline;
z-index: 300;
}
  1. #form {
  2. float: left;
  3. text-align: left;
  4. display: block;
  5. position:absolute;
  6. top: 60px;
  7. left:0px;
  8. margin: 0;
  9. padding: 0;
  10. border:0;
  11. display:inline;
  12. z-index: 300;
  13. }


Can anyone help? I read somewhere that the closing form tag needs to be directly above the closing body tag, but I tried that too and it did nothing.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 18th, 2010, 10:02 am

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post August 18th, 2010, 3:41 pm

According to your #form div your have the top specified at 60px which would make it start 60 pixels down from the top. What kind of spacing problems are you having? could it be that? Feel free to send me the URL via PM.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post August 22nd, 2010, 1:27 pm

I would recommend using a CSS reset (like This one) to clear out all the form element structure and let you start from scratch. The problem is that every browser has some default styles that it applies to form elements unless you specifically tell it not to. And of course the kicker is that all browsers have slightly different defaults so its worth it to kill off the effect.

I'd try implementing a reset and seeing if that starts to solve the problem.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post August 24th, 2010, 9:54 am

Thanks Guys. Still working on this. The 60 px in the CSS of the Form is just to position it in place on the Header img. It needs to be that low from the top of the page, but it should set everything else around it to zero padding, margins, etc.

My boss mentioned something about creating an CSS id inside the Form tag itself? Do you know anything about this?

Do you think it would be better just to use a SPRY form?
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post August 24th, 2010, 9:55 am

This is the URL for my page:

dctest(dot)weber(dot)edu/custompages/ucui/indextest(dot)php

Sorry about all the dots. I can't send URLS yet, cause I'm a newbie. See how it's pushing the desk down. I'm having a hell or a time trying to fix that thing.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post August 25th, 2010, 5:33 am

http://dctest.weber.edu/custompages/ucui/indextest.php ... Firefox can't find the server at dctest.weber.edu. ... ?
Let's leave all our *plum* where it is and go live in the jungle ...
  • Howdy_McGee
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 22, 2010
  • Posts: 16
  • Status: Offline

Post August 25th, 2010, 6:14 am

Yeah the URL isn't working. But I mean you could negative margin-ing it.

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 78 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.