...

View Full Version : Vertical Image alignment does not work ...



quiquedcode
12-29-2005, 06:13 PM
Hi guys
I've this 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...


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...

_Aerospace_Eng_
12-29-2005, 06:24 PM
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

<!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>

quiquedcode
12-29-2005, 06:54 PM
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...

:)

_Aerospace_Eng_
12-30-2005, 04:00 AM
It worked fine for me. Can you post a link to your site?

quiquedcode
12-30-2005, 05:32 PM
Take a look at popup when you click thumbnail:



http://www.appinformatica.com/fichas/pruebita/107app7021.htm


big image should be seen at middle (vertically)

Is has the code you posted... :) :thumbsup:

_Aerospace_Eng_
12-30-2005, 09:13 PM
Hmm no its not the same. This is your 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

<!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

<!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.

quiquedcode
12-31-2005, 02:01 AM
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...


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

_Aerospace_Eng_
12-31-2005, 10:10 PM
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.

<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum