Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical Image alignment does not work ...

    Hi guys
    I've this code:
    Code:
    <table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center" valign="middle"><img src="image.png" width="100" height="80" align="middle"></td>
      </tr>
    </table>
    As you can see in this image...

    Code:
    http://img350.imageshack.us/img350/8647/imagealign4uj.jpg
    The image is always at top... my table is 100% height and width, valign=middle...

    What should I try to fix this ? CSS ? If so, How ?

    Thanks a lot in advance...
    Henry Becerra
    Mambo & Joomla templates | www.beza.com.ar
    MSN: qbecerra @ hotmail.com
    San Juan - Argentina

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Are you sure your table is 100% height? There is no height attribute in a table. Turn on your borders to check and see if your table really is 100% height.
    Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    }
    #container {
    height:100%;
    width:100%;
    text-align:center;
    }
    #container td {
    vertical-align:middle;
    }
    </style>
    </head>
    
    <body>
    <table id="container" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td ><img src="image.png" width="100" height="80" alt=""></td>
      </tr>
    </table>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Aug 2002
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi _Aerospace_Eng_
    Thanks 4 this quick response

    It worked great !!

    but: only in IE... I got the same error in Firefox, it seems Firefox does not like that css code...

    Henry Becerra
    Mambo & Joomla templates | www.beza.com.ar
    MSN: qbecerra @ hotmail.com
    San Juan - Argentina

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It worked fine for me. Can you post a link to your site?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Aug 2002
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Take a look at popup when you click thumbnail:

    Code:
    http://www.appinformatica.com/fichas/pruebita/107app7021.htm
    big image should be seen at middle (vertically)

    Is has the code you posted...
    Henry Becerra
    Mambo & Joomla templates | www.beza.com.ar
    MSN: qbecerra @ hotmail.com
    San Juan - Argentina

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm no its not the same. This is your code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Ver Imagenes</title>
    
    <SCRIPT language="JavaScript">
    function changepic(img_src) {
    	var img_name = "imagenapp";
    	document[img_name].src=img_src;
    }
    </SCRIPT>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    #container {
    	height:100%;
    	width:100%;
    	text-align:center;
    }
    #container td {
    	vertical-align:middle;
    }
    </style>
    </head>
    <body>
    <center>
    <a href="#"><img onClick="JavaScript:changepic('.//107app7021-1.jpg');" src=".././/107app7021-1.jpg" border="0"></img></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img onClick="JavaScript:changepic('.//107app7021-2.jpg');" src=".././/107app7021-2.jpg" border="0"></img></a>&nbsp;&nbsp;&nbsp;&nbsp;
    <table id="container" border="0" cellpadding="0" cellspacing="0">
      <tr>
    
        <td id="container"><img align="middle" name="imagenapp" src=".//107app7021-1.jpg"></td>
      </tr>
    </table>
    </center>
    </body>
    </html>
    This is my code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    }
    #container {
    height:100%;
    width:100%;
    text-align:center;
    }
    #container td {
    vertical-align:middle;
    }
    </style>
    </head>
    
    <body>
    <table id="container" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="image.png" width="100" height="80" alt=""></td>
      </tr>
    </table>
    </body>
    </html>
    The part I put in bold in your code shouldn't be there. You can't use the same ID more than once.
    Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Ver Imagenes</title>
    <script type="text/javascript">
    function changepic(img_src) {
    	var img_name = "imagenapp";
    	document[img_name].src=img_src;
    }
    </script>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    #container {
    	height:100%;
    	width:100%;
    	text-align:center;
    }
    #container td {
    	vertical-align:middle;
    }
    </style>
    </head>
    <body>
    <table id="container" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href=".//107app7021-1.jpg" onclick="changepic(this.href);return false"><img src=".././/107app7021-1.jpg" border="0"></img></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href=".//107app7021-2.jpg" onclick="changepic(this.href);return false"><img src=".././/107app7021-2.jpg" border="0"></img></a>&nbsp;&nbsp;&nbsp;&nbsp;<br>
    	<img align="middle" name="imagenapp" src=".//107app7021-1.jpg"></td>
      </tr>
    </table>
    </body>
    </html>
    Don't change the above. It DOES work as is.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Aug 2002
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes _Aerospace_Eng_
    You're right, it was not the same code

    Your css code was moved to the global css... Now it is back again...

    Code:
    http://www.appinformatica.com/fichas/pruebita/app5748.htm
    If you see, your source is there (Plz see popup's source code, ovbiously)... did i put correctly ? I think it is ok, but well, in IE looks god, but not in FF

    Sorry 4 my ignorance, but well... thanks a lot for helping/understanding
    Henry Becerra
    Mambo & Joomla templates | www.beza.com.ar
    MSN: qbecerra @ hotmail.com
    San Juan - Argentina

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Nope its not the most recent code I gave you. Lets try this one more time so hopefully you can understand. USE this CODE for your popup page.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Ver Imagenes</title>
    <script type="text/javascript">
    function changepic(img_src) {
    	var img_name = "imagenapp";
    	document[img_name].src=img_src;
    }
    </script>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    #container {
    	height:100%;
    	width:100%;
    	text-align:center;
    }
    #container td {
    	vertical-align:middle;
    }
    </style>
    </head>
    <body>
    <table id="container" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href=".//107app7021-1.jpg" onclick="changepic(this.href);return false"><img src=".././/107app7021-1.jpg" border="0"></img></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href=".//107app7021-2.jpg" onclick="changepic(this.href);return false"><img src=".././/107app7021-2.jpg" border="0"></img></a>&nbsp;&nbsp;&nbsp;&nbsp;<br>
    	<img align="middle" name="imagenapp" src=".//107app7021-1.jpg"></td>
      </tr>
    </table>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •