hi
i have a table with two rows each with one cell.
i put an image into a bottom cell and trying to vertically align it with the top of cell.
but for some reason the image just stays in the middle of the cell.
in IE it works fine.
here is a picture that shows the problem:
<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v57/tigor/untitled.jpg">http://img.photobucket.com/albums/v57/t ... titled.jpg</a><!-- m -->
and html(i made borders visible so you can more easily see that bottom image not alligned with the top of cell):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td>Home</td>
</tr>
<tr>
<td style="vertical-align:top"><img src=http://www.webdeveloper.com/forum/archive/index.php/"errow2.gif" /></td>
</tr>
</table>
</body>
</html>
using valign instead of vertical-align doesn't help either
i don't know how to fix it.. maybe it is some ff bug...or maybe i doing something wrong here
See if this makes any difference:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"errow2.gif" style="margin: 0; padding: 0;">
PS: since your doctype is HTML 4.01 Strict, the " />" ending on stand-alone tags is unnecessary (that's for XHTML).i tried to set margins and padding to 0. i also tried to set height on <tr> and <td> explicitly equal to height of image.nothing changes though...
i used ff's dom inspector to see what is the computed style and apparently firefox chooses other height that i specified... i want it to be 10px but firefox decides it should be 27
odd...Could be another example of why tables shouldn't be used for visual layout of non-tabular data?for now,compared to current css2 capabilities, tables help a lot to achive the desired look.
the BIG problem with css is that basicly there is no possibility to put block elements next to each other. that's why people are stick to tables.
you can say that i can use floats for this, but that hardly works with IE. and if you make a website it must look good in IE. you can't just say to your client and a few millions of users "switch to firefox - it is a standart compliant browser".
so the point is that simple floats layots can be tweaked to work ok with IE but if you
take your design further and you have absolutly/relativly/floated block elements nested each into other then there is no way to overcome the mess IE does.
so that why i , for now, i stuck with tables.
i asked the same question on another forum and someone there replied:
the problem isn't firefox (FF is a standards compliant browser), i can tell you that much. i can also tell you that your image IS aligned to the top, setting the td height to 100 will show you that.
the problem is elsewhere.
i don't qiute understand though what the guy is trying to say here...Any chance you could either give me a link to the errow2.gif graphic or upload it here so I can play around with the code?here is it:
<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v57/tigor/errow2.gifi">http://img.photobucket.com/albums/v57/tigor/errow2.gifi</a><!-- m --> think i found the problem
if i remove doctype declaration then firefox renders table ok
have an idea why doctype causes such a difference?Doh! The issue is that the image is shorter than the calculated line height for the TD text. By default, the image is being vert-aligned middle in relation to the non-existent text. This works OK in FF:
<td style="vertical-align:top">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"errow2.gif" width=49 height=10 style="vertical-align: top">
</td>
PS: just saw your other message - the above worked without changing anything else in the code, including the doctype.
Try this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
should fix without anything else edited.NogDog,thanks a lot for helping me
i rewrited the line
- line-height:10px on <td> if i don't set line-height then image does aligned to very top but the cell itself ignores height="10".
-i dropped the vertical-align:top on <td>... it seems no effect on result.
so the final working code is just:
<td height="10" style="line-height:10px;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"errow2.gif" width="49" height="10">
</td>
By default, the image is being vert-aligned middle in relation to the non-existent text
i need to think about this...By the way, get rid of the "<img..... />" closer. You don't need that in 4.01, and add an "alt" to your <img>ok
i'm adding alt atributes only when i close to finish to website....so that i actually can write something meaningfull there
<.../> ... i'll get rid of that....this is really funny
if i set vertical-align on image then firefox renders it ok BUT ie suddenly expands <td>
height...unbelievable
So IE has a wrong implementation of vertical-align on inline elements? could it be?
although the height of <td> need not to be 10px exactly but anyway i'm curious if it can be tweaked somehowit could be just that:
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/lineheightbug.htmlthe">http://www.positioniseverything.net/exp ... ug.htmlthe</a><!-- m --> BIG problem with css is that basicly there is no possibility to put block elements next to each other. that's why people are stick to tables.
Oh? I guess I better unlearn everything I know then.
if you make a website it must look good in IE. you can't just say to your client and a few millions of users "switch to firefox - it is a standart compliant browser".
So what do you say to all the firefox users? Switch to IE? Then what happens if/when IE7 gets closer to the standard and your page breaks because you didn't code to FF and the standard?
The thing is if you code for IE your code is wrong. Code for FF to make sure your code is right. Then adjust your code for broken browsers like IE.you say:
Oh? I guess I better unlearn everything I know then.
and...i also wrote:
simple floats layots can be tweaked to work ok with IE but if your
design becomes complex and you have absolutly/relativly/floated block elements nested each into other then generaly there is no way to overcome the mess IE does.
The alternatives to horizontally placing block-level elements, that i'm aware of, are floats or absolute position....(and these, as i already mentioned, are handled wrong by IE)
if there are other ways, let me know...i see that you have nothing to say...
i have a table with two rows each with one cell.
i put an image into a bottom cell and trying to vertically align it with the top of cell.
but for some reason the image just stays in the middle of the cell.
in IE it works fine.
here is a picture that shows the problem:
<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v57/tigor/untitled.jpg">http://img.photobucket.com/albums/v57/t ... titled.jpg</a><!-- m -->
and html(i made borders visible so you can more easily see that bottom image not alligned with the top of cell):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td>Home</td>
</tr>
<tr>
<td style="vertical-align:top"><img src=http://www.webdeveloper.com/forum/archive/index.php/"errow2.gif" /></td>
</tr>
</table>
</body>
</html>
using valign instead of vertical-align doesn't help either
i don't know how to fix it.. maybe it is some ff bug...or maybe i doing something wrong here
See if this makes any difference:<img src=http://www.webdeveloper.com/forum/archive/index.php/"errow2.gif" style="margin: 0; padding: 0;">
PS: since your doctype is HTML 4.01 Strict, the " />" ending on stand-alone tags is unnecessary (that's for XHTML).i tried to set margins and padding to 0. i also tried to set height on <tr> and <td> explicitly equal to height of image.nothing changes though...
i used ff's dom inspector to see what is the computed style and apparently firefox chooses other height that i specified... i want it to be 10px but firefox decides it should be 27
odd...Could be another example of why tables shouldn't be used for visual layout of non-tabular data?for now,compared to current css2 capabilities, tables help a lot to achive the desired look.
the BIG problem with css is that basicly there is no possibility to put block elements next to each other. that's why people are stick to tables.
you can say that i can use floats for this, but that hardly works with IE. and if you make a website it must look good in IE. you can't just say to your client and a few millions of users "switch to firefox - it is a standart compliant browser".
so the point is that simple floats layots can be tweaked to work ok with IE but if you
take your design further and you have absolutly/relativly/floated block elements nested each into other then there is no way to overcome the mess IE does.
so that why i , for now, i stuck with tables.
i asked the same question on another forum and someone there replied:
the problem isn't firefox (FF is a standards compliant browser), i can tell you that much. i can also tell you that your image IS aligned to the top, setting the td height to 100 will show you that.
the problem is elsewhere.
i don't qiute understand though what the guy is trying to say here...Any chance you could either give me a link to the errow2.gif graphic or upload it here so I can play around with the code?here is it:
<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v57/tigor/errow2.gifi">http://img.photobucket.com/albums/v57/tigor/errow2.gifi</a><!-- m --> think i found the problem
if i remove doctype declaration then firefox renders table ok
have an idea why doctype causes such a difference?Doh! The issue is that the image is shorter than the calculated line height for the TD text. By default, the image is being vert-aligned middle in relation to the non-existent text. This works OK in FF:
<td style="vertical-align:top">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"errow2.gif" width=49 height=10 style="vertical-align: top">
</td>
PS: just saw your other message - the above worked without changing anything else in the code, including the doctype.
Try this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
should fix without anything else edited.NogDog,thanks a lot for helping me
i rewrited the line
- line-height:10px on <td> if i don't set line-height then image does aligned to very top but the cell itself ignores height="10".
-i dropped the vertical-align:top on <td>... it seems no effect on result.
so the final working code is just:
<td height="10" style="line-height:10px;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"errow2.gif" width="49" height="10">
</td>
By default, the image is being vert-aligned middle in relation to the non-existent text
i need to think about this...By the way, get rid of the "<img..... />" closer. You don't need that in 4.01, and add an "alt" to your <img>
oki'm adding alt atributes only when i close to finish to website....so that i actually can write something meaningfull there
<.../> ... i'll get rid of that....this is really funny
if i set vertical-align on image then firefox renders it ok BUT ie suddenly expands <td>
height...unbelievable
So IE has a wrong implementation of vertical-align on inline elements? could it be?
although the height of <td> need not to be 10px exactly but anyway i'm curious if it can be tweaked somehowit could be just that:
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/lineheightbug.htmlthe">http://www.positioniseverything.net/exp ... ug.htmlthe</a><!-- m --> BIG problem with css is that basicly there is no possibility to put block elements next to each other. that's why people are stick to tables.
Oh? I guess I better unlearn everything I know then.
if you make a website it must look good in IE. you can't just say to your client and a few millions of users "switch to firefox - it is a standart compliant browser".
So what do you say to all the firefox users? Switch to IE? Then what happens if/when IE7 gets closer to the standard and your page breaks because you didn't code to FF and the standard?
The thing is if you code for IE your code is wrong. Code for FF to make sure your code is right. Then adjust your code for broken browsers like IE.you say:
Oh? I guess I better unlearn everything I know then.
and...i also wrote:
simple floats layots can be tweaked to work ok with IE but if your
design becomes complex and you have absolutly/relativly/floated block elements nested each into other then generaly there is no way to overcome the mess IE does.
The alternatives to horizontally placing block-level elements, that i'm aware of, are floats or absolute position....(and these, as i already mentioned, are handled wrong by IE)
if there are other ways, let me know...i see that you have nothing to say...