#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    7
    Rep Power
    0

    Form breakes tight CSS layout


    The <form> tag breaks a tight layout.

    It seems that a <form> will override "inline" for any CSS style and change it to "block". I even tried to nest two <div> CSS tags in order to contain the form. Not good enough.

    You can see my effort at http://www.spoxdesign.com/test2/form.html

    This layout is broken because the form is always displayed on a separate line. The form should appear on the same line as the buttons and the text.

    This layout was originally successfully done with normal tables and a simple hack to prevent whitespace. You will see the original layout if you click on any button in the above url.

    What mistake am I making? How can I refactor this layout using CSS?
  2. #2
  3. :(){ :|:&};:
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Germany
    Posts
    297
    Rep Power
    11
    Afaik you have to use tables to get the form on the same line, but then still there will be problems because of the height of the form. The only work around I could think of is a JavaScript function and a form somewhere else on the page with a hidden file, which gets submitted when somebody selects something in your select box.
    regards >_<

    ws. fgeller.de
    em. felix@fgeller.de
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    It seems that a <form> will override "inline" for any CSS style and change it to "block".
    If you don't like that, just say so in your stylesheet:
    Code:
    form {
    	display: inline;
    }
    Some additional remarks:
    -there are two divs with an id 'menutop'; id's should be unique;
    -you use a strict DTD, but it doesn't validate as such.. you may check with: http://validator.w3.org

    Hope this helps,
    Jeroen
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    7
    Rep Power
    0
    Thanks, Jerom!

    Actually after posting my question I got up from my computer and I went swimming... and of course, within an hour it dawned upon me "why the hell did I not try to modify the <form> tag?"

    So in conclusion it always helps to stop working and have some fun.

    Thanks again!

IMN logo majestic logo threadwatch logo seochat tools logo