Form Tag Issues

  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Posts: 32
  • Loc: Ogden, Utah

Post 3+ Months Ago

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

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

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.
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Posts: 32
  • Loc: Ogden, Utah

Post 3+ Months Ago

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
  • Posts: 32
  • Loc: Ogden, Utah

Post 3+ Months Ago

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
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

http://dctest.weber.edu/custompages/ucui/indextest.php ... Firefox can't find the server at dctest.weber.edu. ... ?
  • Howdy_McGee
  • Novice
  • Novice
  • Howdy_McGee
  • Posts: 16

Post 3+ Months Ago

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

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 30 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
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.