SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Hamburg
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy vertical gap between rows is bigger than defined

    Hi there,

    I don't know what else to try. I have plenty of table rows with
    input fields and want to controll the vertival space by css.
    The following script looks fine in my firefox, netscape and opera but
    IE6 ignores height:1px;

    Any suggestions?

    HTML Code:
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    <!--
    td.space { margin:0; padding:0; height:1px; }
    input.inp {
    margin:0;
    padding:0;
    width:189px;
    height:17px;
    font-size:8pt;
    background-color:#D1D2E0;
    color:#000033;
    border:0px;
    }
    -->
    </style>
    </head>
    <body topmargin="0" leftmargin="0">
    <table cellpadding="0" cellspacing="0" border="0">
    <form name="testform" action="test.php" method="post">
    <tr>
    <td height="4"><img src="clear.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td width="195"><input class="inp" type="text" value=""></td>
    </tr>
    <tr>
    <td class="space"><img src="clear.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td width="195"><input class="inp" type="text" value=""></td>
    </tr>
    <tr>
    <td class="space"><img src="clear.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
    <td width="195"><input class="inp" type="text" value=""></td>
    </tr>
    </form>
    </table>
    </body>
    </html>
    Cheers -Karsten

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Hamburg
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just found out that the IE add a pixel (one at the top, one at the bottom) in the row containing the input-tag.
    But why???

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Hamburg
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Any ideas how to solve the problem in an other way?

    Hi again,

    there must be a way to exactly define the height of input fields - even with IE6!
    Do somebody know how to solve this problem? I have a form with
    13 input fields and I have clearly defined layout - so the height of the
    form (viewed with IE6) can't be shown 26px higher in IE6 than in all
    other browswers!

    Please give me a hint if you can.

    Thank you,
    Karsten

  4. #4
    SitePoint Zealot Linn Hastur's Avatar
    Join Date
    Jun 2005
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karsten
    Please give me a hint if you can.

    Don't use tables.

    A bit shorter? OK, try this code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    
    <head>
    	<title>Test</title>
    	<style type="text/css">
    		#testform 
    			{
    				margin:0px;
    				padding:0px;
    			}
    
    		#testform .inp 
    			{
    				float: left;
    				width:195px;
    				border:0;
    				margin:1px 0px;	/* top-bottom left-right: this define the distance between 2 inputs */
    				height:17px;
    				font-size:8pt;
    				background-color:#D1D2E0;
    				color:#000033;
    			}
    
    		body
    			{
    				margin-top:0px; 
    				margin-left:0px;
    			}
    	</style>
    </head>
    
    <body>
    <form id="testform" name="testform" action="test.php" method="post">
    	<input class="inp" type="text" value="A" />
    	<input class="inp" type="text" value="B" />
    	<input class="inp" type="text" value="C" />
    </form>
    </body>
    </html>

    How does-it work? Each input has the sime size and is floating left, so come under the precedant one ; the margin (top, right, bottom, left or top-bottom, right-left) will define the free-space (try 0px...). That's all.




    L.H.

    J'ai décidé d'être heureux, c'est bon pour la santé !
    I decided to be happy, it is good for health!
    (Voltaire)

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Hamburg
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Linn,

    first thanks very much! Your script is much shorter then my with table layout.
    But the problem that the IE6 display a different space, is still there ...

    By setting margin:0px 0px; the input fields are left aligned, but now my firefox browser add one pixel (vertically) between them.

    You never had this problem?

    Cheers - Karsten

  6. #6
    SitePoint Zealot Linn Hastur's Avatar
    Join Date
    Jun 2005
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karsten
    Hi Linn,

    first thanks very much! Your script is much shorter then my with table layout.
    But the problem that the IE6 display a different space, is still there ...

    By setting margin:0px 0px; the input fields are left aligned, but now my firefox browser add one pixel (vertically) between them.

    You never had this problem?

    Cheers - Karsten

    Hi,

    With 0px, same aspect in IE/Win, Moz/Win, FF/RedHat, a thin line in Konqueror. Have you got a link so that I could check your files?

    L.H.

    J'ai décidé d'être heureux, c'est bon pour la santé !
    I decided to be happy, it is good for health!
    (Voltaire)

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Hamburg
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Linn,

    you can see the script here:
    http://www.scriptlab.de/spaceproblem/yourscript.html

    Thanks for your efforts,
    Karsten

  8. #8
    SitePoint Zealot Linn Hastur's Avatar
    Join Date
    Jun 2005
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karsten
    Hello Linn,
    Thanks for your efforts,
    Karsten
    Your servant

    As there is no extra-space with IE6 / Moz1.4 / FF1.0.2, I suggest that you don't bother with other browsers (if display is a little different, that's browser-dependant and you cannot do a lot of things).
    If you prefer to have exactly the same aspect, just take the highest value as yours - use margin:1px 0px 1px 0px; for example.

    Finaly, have a look at http://bonrouge.com/br.php?page=faq#hacks if you want to target a specific browser.

    L. H.

    J'ai décidé d'être heureux, c'est bon pour la santé !
    I decided to be happy, it is good for health!
    (Voltaire)

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Hamburg
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you are right.
    Thank you for all the hints - helped me a lot.
    (sometimes browsers drive me crasy!)

    Best wishes,
    Karsten


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
  •