SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Berlin
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trouble with <form>

    Hi,

    I'm having trouble with forms. They seem to always have a padding and a line break. Is it possible to change this with CSS?

    Following code is making me problems:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <
    html>

    <
    head>
            
    <
    title>input alignment</title>
    <
    style type="text/css" media="screen"><!--

    body {
            
    background-color#35618E;
            
    margin0;
            
    font-familyHelveticaArialsan-serif;
            
    font-size12px;
            
    color#35342f
            
    }

    #headerbar {
            
    positionabsolute;
            
    background-color#706B63;
            
    height15px;
            
    top70px;
            
    color#EFE6D8;
            
    padding8px 5px 5px 5px;
            
    border-top1px solid #35342F;
            
    border-bottom1px solid #35342F;
            
    border-right1px solid #35342f;
            
    width100%;
            }
            
            
    span.left {
            
    floatleft;
            
    text-alignleft;
            }
            
    span.right {
            
    floatright;
            
    text-alignright;
            }
            
    input {
         
    background-color#f4f0e9;
        
    margin-top: -6px;
        
    vertical-alignmiddle;
        
    height13px;
        }

    form {
        
    margin0px;
        
    padding0px;
        }
            
    -->
    </
    style>
    </
    head>
    <
    body>
    <
    div id="headerbar">
            
    <
    span class="left"Iriure blandit feugait crisare hendrerit nulla amet nisl
    </span>

    <
    span class="right">search <form id="FormName" action="" method="get" name="FormName"><input type="text" name="suchen" size="24"/>
                    </
    form>
                
    </
    div>

    </
    div>

        
    </
    body>
    </
    html
    Everything looks fine as long as I don't have this form thing (<form id="FormName" action="" method="get" name="FormName">) in it. As soon as the form gets to it, the input field goes below the text (search).

    I added a screenshot from Safari. On Windows the #headerbar box will change its height.

    Thanks in advance

    Floezen
    Attached Images Attached Images

  2. #2
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Berlin
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Huu, why doesn't my attachment show up? Is this some now strange vB 3 thing???

  3. #3
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Floezen
    Huu, why doesn't my attachment show up? Is this some now strange vB 3 thing???
    The attachments need to be aproved by administrators first
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    why don't you put the search text here:
    Code:
    <div class="right"> 
    <form id="FormName" action="" method="get" name="FormName">search 
    <input type="text" name="suchen" size="24"/>
    </form>
    </div>
    Also wrapping a block level tag in a span is not valid html. A span is for inline elements only.

    Paul

    (remember to change the style from span.right to div.right)

  5. #5
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Berlin
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I know this works, but I was hoping to find a solution which works also when I can't put everything tagged in the <form>:
    What happens if I have two forms?

    Is there no way to define forms to not effect the layout?

    Why in the first place does it change the layout - shouldn't it be just some part for html code that is absolutely hidden from displaying?

    Floezen

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well you could just make the form display:inline and then you won't get a line feed either.
    Code:
    form { 
    	margin: 0px; 
    	padding: 0px; 
    	display:inline;
     }
    I'm not sure if that's what you meant though

    Paul

  7. #7
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Berlin
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now, that looks very good.
    What would I do, if i hadn't bought Yank's PHP & SQL book which is referencing this board

    Thanks alot Paul!


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
  •