Jump to content

Why when I add an image to a table does not want to align?

DarkxPunk

By DarkxPunk
in HTML/XHTML

 Share

Recommended Posts

DarkxPunk Member

DarkxPunk

Posted
Posted

Hi there,

 

Let me preface that I know the way this is being done is probably completely incorrect and taboo. Reason I am doing this is because it will be used as an email signature. With much research about these, and the fact that this signature could be posted to old email clients, I need it to be incredible basic. This lets the signature display correctly on legacy machines to smart phones, so please bare this in mind.

 

 

<table border="1">

<tr>
<td>
<table border="1" style="display: inline;">
<tr>
<td>
</td>
</tr>
</table>
<table border="1" style="display: inline;">
<tr>
<td colspan="2">Name Title</td>
</tr>
<tr>
<th>Direct:</td>
<td><a href="tel:11234567890">Number</a></td>
</tr>
<tr>
<th>Cell:</td>
<td><a href="tel:11234567890">Number</a></td>
</tr>
<tr>
<th>Fax:</td>
<td><a href="tel:11234567890">Number</a></td>
</tr>
<tr>
<th>Email:</td>
<td><a href="mailto:email@email.ca">email@email.ca</a></td>
</tr>
</table>
<table border="1" style="display: inline;">
<tr>
<td>Company Name</td>
</tr>
<tr>
<td>Address Line 1</td>
</tr>
<tr>
<td>Address Line 2</td>
</tr>
<tr>
<td>Address Line 3</td>
</tr>
<tr>
<td><a href="http://www.website.com/">www.website.com</a></td>
</tr>
</table>
</td>
</tr>

</table>

 

 

The code in the spoiler as you can see when displayed in a browser does not align all three tables, if I replace the image with text, it then aligns. It does not matter which order the image is placed. Now my intent however was by making these display inline, I would then be able to valign them to the middle. I know if I align left all the tables it will flow correctly, but the valign does not work... No matter how much I toy I cannot achieve this. Any ideas on a solution is appreciated.

 

Thanks!

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Using display: inline; is causing the table element to shrink down to current font-size height, it is the same effect as wrapping a image with inline anchor element, when viewed using firebug the anchor height does not match image but the current font-size, or line-height used.

 

I should try using display: inline-block; instead and apply vertical-align: middle; to all inner tables.

Link to comment
Share on other sites
DarkxPunk Member

DarkxPunk

Posted
  • Author
Posted

Hey,

 

Playing around with inline-block, vertical-align, valign on the tables themselves, I finally got them all to valign middle themselves, yay! However using inline-block or inline was not important. Also inline-block did not solve the strange positioning issue (though is has been circumvented with the valign, vertical-align stuff)

 

Could you maybe further explain this shrinking issue (I can't seem to pin point it using web inspector). It would be nice to know, to solve this in the further if I just wanted to inline them without the align/valign.

 

Thanks again for all the help!

 

The issue at hand is having the content flow on smaller displays, sadly placing in a td in the outer table prevents that and rather keeps the image on the left rather than the top, but good suggestion for making them align!

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

In firefox using firebug and viewing html, by hovering over table with image you will find its height is of a single line of text, and it is placed at bottom of image, this IS aligned in middle, while the image is forced up, the other table are defaulting to baseline. note: in browser they are shown in a row in firefox

 

In chrome what you see when hovering over table is like a single vertical line to left supposedly the collapsed table, the table child elements being block element a stacked below it, all these tables are stacked not in row like FF.

 

ALSO you have <th>.....</td> mismatch opening and closing tags

Link to comment
Share on other sites
DarkxPunk Member

DarkxPunk

Posted
  • Author
Posted

Huh. You learn something new everyday. I personally can't see it in chrome, nor Safari, in both of them they seem to be sizing as I would expect them. However is firefox I do definitely see it.

 

Thanks again, will play around with this.

 

And we all miss something eh?

Link to comment
Share on other sites
DarkxPunk Member

DarkxPunk

Posted
  • Author
Posted

So I figured why I don't see it in Chrome nor Safari (though how they are processing them after the fact makes absolutely no sense), it seems they are not following my rule as a inline but rather a inline-table... That fixes the sizing issue, even in FF, but not the positioning.

 

It seems that I need the inline-block + vertical-align for it to work in FF, and just the valign middle for Safari/Chrome... I am scared to open this in IE :o

Link to comment
Share on other sites
DarkxPunk Member

DarkxPunk

Posted
  • Author
Posted (edited)

So my fears were correct about opening it up in IE... Does not even stay inline IE 9 and back... Now I know for web design I should be laughing at that archaic tech, but sadly some old email clients are still using IE 6 rendering engines (shiver). Any idea how to get this to flow properly back then anyone? I tried even align left (which works in other browsers, but screws up the valign, but no go in IE...

 

---Edit---

 

Oh oh oh! I am so giddy! Finally found the solution here: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

 

Obviously this is a mix of everything and my signature template is not final, but it has come a long way! Here it is for everyone else:

 

 

<table border="1" style="text-align: left;">

<tr>
<td>
<table border="1" valign="middle" style="display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
<tr>
<td>
</td>
</tr>
</table>
<table border="1" valign="middle" style="display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
<tr>
<td colspan="2">Name Title</td>
</tr>
<tr>
<th>Direct:</th>
<td><a href="tel:11234567890">Number</a></td>
</tr>
<tr>
<th>Cell:</th>
<td><a href="tel:11234567890">Number</a></td>
</tr>
<tr>
<th>Fax:</th>
<td><a href="tel:11234567890">Number</a></td>
</tr>
<tr>
<th>Email:</th>
<td><a href="mailto:email@email.ca">email@email.ca</a></td>
</tr>
</table>
<table border="1" valign="middle" style="display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
<tr>
<td>Company Name</td>
</tr>
<tr>
<td>Address Line 1</td>
</tr>
<tr>
<td>Address Line 2</td>
</tr>
<tr>
<td>Address Line 3</td>
</tr>
<tr>
<td><a href="http://www.website.com/">www.website.com</a></td>
</tr>
</table>
</td>
</tr>

</table>

 

 

Please make note everyone that even though a lot of this will work sans redundancy, it is required for old stupid email clients, aka if your client has not updated their systems since Outlook Express was invented, and trust me, that is a thing... *shivers* Will post further once with complete redundancy.

Edited by DarkxPunk
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

this seems to work for all browsers and IE6 and above, but still have to hack for new IE as well, surprise, surprise.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        
        <style type="text/css">
            body {font-size: 16px; font-family: arial;}
            table {font-size:0; padding: 0; margin:0; padding:0; } /* font-size 0; for inline-block issue of creating space between element using this although safari still shows this but not related i thinks*/
            table table {display: inline-block; vertical-align: middle;}
            table table  { font-size: 16px; margin:0; padding:0;   } /* reset font-size inline-block issue so can see text*/
            table table img {display: block;} /* remove space after image caused by inline element, another option is to float*/
            table, table table, table table td , table table th{border-collapse:collapse; border: 1px solid #ccc;  *display: inline; zoom: 1;  }/* CRAP required for old and new IE, old to show inline: new to show nested table borders- geez what a crap browser*/

        </style>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0">

            <tr>
                <td>
                    <table border="1" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <img src="http://get-logos.com/wp-content/uploads/2013/04/0008-cloudtech.jpg" width="100" height="100" alt="" />
                            </td>
                        </tr>
                    </table>
                    <table border="1" cellspacing="0" cellpadding="0">
                        <tr>
                            <td colspan="2">Name Title</td>
                        </tr>
                        <tr>
                            <th>Direct:</th>
                            <td><a href="tel:11234567890">Number</a></td>
                        </tr>
                        <tr>
                            <th>Cell:</th>
                            <td><a href="tel:11234567890">Number</a></td>
                        </tr>
                        <tr>
                            <th>Fax:</th>
                            <td><a href="tel:11234567890">Number</a></td>
                        </tr>
                        <tr>
                            <th>Email:</th>
                            <td><a href="mailto:email@email.ca">email@email.ca</a></td>
                        </tr>
                    </table>
                    <table border="1" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>Company Name</td>
                        </tr>
                        <tr>
                            <td>Address Line 1</td>
                        </tr>
                        <tr>
                            <td>Address Line 2</td>
                        </tr>
                        <tr>
                            <td>Address Line 3</td>
                        </tr>
                        <tr>
                            <td><a href="http://www.website.com/">www.website.com</a></td>
                        </tr>
                    </table>
                </td>
            </tr>

        </table>

    </body>
</html>

Probably best to keep cellspacing and cellpadding, as the is no way to style these using css with IE6 (cellspacing) unless you use border-spacing: expression(cellSpacing=0); in which validation will complain, but what else can you do with IE but hack it every time.

Link to comment
Share on other sites
DarkxPunk Member

DarkxPunk

Posted
  • Author
Posted (edited)

Thanks dsonesuk,

 

Sadly however this stuff can't be hidden in the head/style because well some old email clients do not read that. It however does get used for some modern tweaks I gotta do for smart phones, except again however, can't be hidden in the head... Sigh... But all your little tweaks and extra redundancy helps! Once I have taken everything and make it solid ill post the skeleton here.

 

For people reading this in the future *yay time travel* don't disregard the redundancy! Old browsers and email clients used by ancient companies need everything inline, and redundant to ######, just so it does not throw up a massive logo, or text decides not to line up, which on a profession level looks sloppy. But I hope one day we move forward and evolve past this...

 

Final Template:

 

 

 

<style type="text/css" scoped>
@media only screen and (max-device-width: 414px) {
	table[class=wrap] {
		width: 200px !important;
	}
	table[class=separator] {
		border-right: 0 !important;
		border-bottom: 1px solid #dbdbdb !important;
	}
	td[class=spacer-top] {
		display: none !important;
	}
	td[class=spacer-bottom] {
		font-size: 10px !important;
	}
}
@media only screen and (max-width: 380px) {
	table[class=wrap] {
		width: 200px !important;
	}
	table[class=separator] {
		border-right: 0 !important;
		border-bottom: 1px solid #dbdbdb !important;
	}
	td[class=spacer-top] {
		display: none !important;
	}
	td[class=spacer-bottom] {
		font-size: 10px !important;
	}
}
</style>
<table class="wrap" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; border: 0; border-collapse: collapse; font-size: 0; text-align: left;">
	<tr>
		<td>
			<table border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-collapse: collapse; width: 100px; height: 100px; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
				<tr>
					<td>
						<img src="http://get-logos.com/wp-content/uploads/2013/04/0008-cloudtech.jpg" alt="" width="100" height="100"/>
					</td>
				</tr>
			</table>
			<table class="separator" border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-right: 1px solid #dbdbdb; border-collapse: collapse; width: auto; height: auto; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
				<tr>
					<td class="spacer-top" colspan="2" style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 5px; text-align: left; color: #616161"> </td>
				</tr>
				<tr>
					<td colspan="2" style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Name Title</td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Direct:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161"><a style="font-size: 12px; text-decoration: none; color: #616161" href="tel:11234567890">Number</a></td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Cell:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161"><a style="font-size: 12px; text-decoration: none; color: #616161" href="tel:11234567890">Number</a></td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 12px; font-weight: normal; text-align: left; color: #616161">Fax:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161"><a style="font-size: 12px; text-decoration: none; color: #616161" href="tel:11234567890">Number</a></td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Email:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 12px; text-align: left; color: #616161"><a style="font-size: 12px; text-decoration: none; color: #616161" href="mailto:email@email.ca">email@email.ca</a></td>
				</tr>
				<tr>
					<td class="spacer-bottom" colspan="2" style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 5px; color: #616161"> </td>
				</tr>

			</table>
			<table border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-collapse: collapse; width: auto; height: auto; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
				<tr>
					<td style="font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Company Name</td>
				</tr>
				<tr>
					<td style="font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Address Line 1</td>
				</tr>
				<tr>
					<td style="font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Address Line 2</td>
				</tr>
				<tr>
					<td style="font-family: sans-serif; font-size: 12px; text-align: left; color: #616161">Address Line 3</td>
				</tr>
				<tr>
					<td style="font-family: sans-serif; font-size: 12px; text-align: left; color: #616161"><a style="font-size: 12px; text-decoration: none; color: #616161" href="http://www.website.com/">www.website.com</a></td>
				</tr>
			</table>
		</td>
	</tr>
</table>

 

 

Edited by DarkxPunk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...