Decrease the size of a search form

Discussion in 'HTML & Website Design' started by Lommis, Jul 19, 2007.

  1. #1
    Ok, I managed to make my form a bit smaller, I typed in the "size" code in the wrong line (yeah, I feel stupid). But I still have a problem, this time its about the difference in IE7 and Firefox.
    As you can see in theese two pictures there is a big difference. In IE there are two big spaces, one above the searchbar and one under it.
    In Firefox there are no spaces.

    And of course, I don't want thoose spaces.

    IE: www.lommis.net/wrong.jpg

    FF: www.lommis.net/right.jpg



    Source
    search_men.vsp
    <div id="asp_menu_search">
    		##<div style="margin-right:3px; width:190;">
    
    		Finner du ikke det du leter etter? Søk her så får du raskt frem de ringetoner, spill og bilder som du leter etter!
    			$module.setTemplateName("search_field.vsp")
    			$module.setSearchResultPage("search")
    			$templateEngine.parseModule($module)
    	</div>
    Code (markup):
    Source
    search_field.vsp
    <div class="$module.getDivClass()">
        #if($module.getSearchResultPage())
            #set($actionPage = $module.getSearchResultPage())
        #else
            #set($actionPage = $page)
        #end
        
        #if($request.getParameter("searchString"))
            #set($searchString = $request.getParameter("searchString"))
        #end
        
        <form action="" method="get">
           <input type="hidden" name="page" value="$actionPage"/>
           <table cellspacing="2" padding="0" width="100%">
        		##<tr>
                ##<td colspan="10" class="$!{module.getTitleClass()}">
                    $!{module.getTitle()}
                ##</td>
          ##  </tr>
           </table>
                    <div class="$module.getRowClass()">
                    <input name="searchString" value="$!{searchString}" />
                    <input type="submit" value="Søk" />
    								</div>
        </form>   
    </div>
    Code (markup):

    And again, I would appreciate any advice you guys may have! :)
     
    Lommis, Jul 19, 2007 IP
  2. samusexu

    samusexu Well-Known Member

    Messages:
    138
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    108
    #2
    I'm not expert in ASP, but I could help you if you paste also the rendered HTML code :)
     
    samusexu, Jul 19, 2007 IP
  3. skibladner

    skibladner Peon

    Messages:
    1,149
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Possibly because firefox doesn't support empty paragraphs. <P></p> has no effect in firefox, it has to be <p>&nbsp;</p>
     
    skibladner, Jul 19, 2007 IP
  4. Lommis

    Lommis Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Sure, here it is :)
    There are no <p> tags anywhere in the complete source code of the site.
    Thanks alot! :)

    <div id="asp_col3">
                                
                
       <table cellspacing="1" cellpadding="0" border="0" width="192" align="center" bgcolor="#BFE0F3">
    <tr>
       <td valign="top" bgcolor="#59BAF1" height="145">
                  <div class="asp_promo_games_title">Søk</div>
    
                  <div id="asp_menu_search">
    Finner du ikke det du leter etter? Søk her så får du raskt frem de ringetoner, spill og bilder som du leter etter!
    	
    	      <div class="">
    
           <form action="" method="get">
           <input type="hidden" name="page" value="search"/>
           <table cellspacing="0" padding="0" width="100%">
        		                            
    </table>
                  <div class="">
                  <input name="searchString" size="18" value="" />
                  <input type="submit" value="Søk" />
    
    </form>   
    </div>
    </td>
    Code (markup):
     
    Lommis, Jul 19, 2007 IP
  5. samusexu

    samusexu Well-Known Member

    Messages:
    138
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    108
    #5
    I suggest to remove the
    
    
    <table cellspacing="0" padding="0" width="100%">
        		                            
    </table>
    
    Code (markup):
    that would mean removing these lines from the template

     
    <table cellspacing="2" padding="0" width="100%">
        		##<tr>
                ##<td colspan="10" class="$!{module.getTitleClass()}">
                    $!{module.getTitle()}
                ##</td>
          ##  </tr>
           </table>
    
    Code (markup):
    they are useless anyway

    And further more, you may have some overlapping html tags.. some divs not closed. Try to fix that and tell me what you get :)
     
    samusexu, Jul 19, 2007 IP
  6. Lommis

    Lommis Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Ah, thank you so much! :)
    I will take a cloooooose look on it, I'll let you know what I get out of it!
     
    Lommis, Jul 19, 2007 IP
  7. Lommis

    Lommis Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hi again!

    Unfortunately I got the same result after going through the whole code and stripping the code you pasted :(

    Do you think forcing the size with tables will do the trick?
     
    Lommis, Jul 20, 2007 IP
  8. samusexu

    samusexu Well-Known Member

    Messages:
    138
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    108
    #8
    Maybe play a little withe the padding and margin properties of the divs. It can be easy if you use the webdeveloper plugin for firefox, than go into it's menu and choose outline->outline block level elements. In this way you will see the borders of the divs more easily and choose for which to change the padding. Good luck!
     
    samusexu, Jul 20, 2007 IP