InsaneJournal

Tweak says, "I pity the foo'"

Cade Dawson (theboywhodied) wrote in rp_tutorials,
@ 2012-04-06 02:06:00

Entry tags:

html

[Solved] Wits End
I'm so sorry if there are a lot of typo's in this post or I just don't make sense. It's late, I'm grumpy, I have a headache, and I'm this close to crying out of pure frustration. :( I've lost track the number of hours I've been working on this faux-IM box and the top row is driving me crazy. The bullets aren't lining up the word "Screen Name" no matter what I try--and I've tried everything I can think of--so I think before I give up on my idea entirely, I'll slap up the code for a pair of fresh eyes to look at and go to bed.

<lj-raw> <table bgcolor="#FFFFFF" cellpadding="5" width="400"> <tr> <td><img src="http://i.imgur.com/4zmy9.png" style="padding-top:12px; padding-bottom:12px; padding-right:5px;" /><span style="font-family:Tahoma; font-size:11px; font-weight:bold;">Screen Name</span><img src="http://i.imgur.com/1S2ap.png" style="padding-top:12px; padding-bottom:12px; padding-right:5px;" /><span style="font-family:Tahoma; color:#999999; font-size:11px; font-weight:bold;">Screen Name</span><img src="http://i.imgur.com/DnQ5H.png" style="padding-top:12px; padding-bottom:12px; padding-right:5px;" /><span style="font-family:Tahoma; color:#999999; font-size:11px; font-weight:bold;">Screen Name</span></td> </tr> <tr> <td colspan="2" width="400" style="border-style:solid; border-width:1px; border-color:#999999;"><div style="font-family:Tahoma; font-size:11px; height:300px; overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam elementum ipsum vitae consectetur. Ut eget urna nunc, ac tincidunt quam. Mauris vitae orci justo, non semper lectus. Curabitur at venenatis metus. Pellentesque ante odio, porttitor sit amet interdum quis, ullamcorper eget nibh. Aenean eros nisl, placerat nec ornare et, venenatis ut arcu. Maecenas placerat vehicula sem, commodo ornare velit porta et. Pellentesque tempor, ante malesuada rutrum porttitor, ligula odio tristique augue, nec lobortis nisl quam at quam. Aliquam lectus velit, fringilla sit amet tempor ac, tincidunt vel arcu. Ut vel purus nulla. Etiam pellentesque mollis sodales. <br /><br /> Donec pretium, magna sed pellentesque pulvinar, tellus tellus interdum est, id tempor eros libero at nulla. Nam aliquam tincidunt nisi, ut fermentum ligula lacinia quis. Ut ornare varius dui a tempor. Vestibulum luctus tristique gravida. Vestibulum a erat mauris, vel semper risus. Praesent malesuada pellentesque pellentesque. Cras fringilla tortor nec dui faucibus pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam nec diam sem. In fermentum, lectus et tincidunt fermentum, lacus est vehicula arcu, eget aliquam nisl nibh interdum risus. In sit amet augue et odio mattis ultrices. Phasellus porta fringilla nisi, non elementum orci ullamcorper quis. Pellentesque vitae tincidunt nibh. Nullam imperdiet justo id elit molestie id tincidunt dui fermentum. Quisque eu quam a nisl eleifend mollis vel quis erat. Cras sem orci, cursus et feugiat ac, lacinia vitae justo. <br /><br /> Maecenas purus erat, iaculis eget accumsan in, suscipit nec mauris. Maecenas sit amet metus vel sapien varius tincidunt. Donec viverra, ante vel ullamcorper tincidunt, mauris augue malesuada nunc, et pharetra eros risus non nulla. Mauris tristique sagittis consequat. Nunc dui odio, porta et aliquet non, facilisis ac orci. Morbi sed orci augue, eget venenatis dui. Aenean at libero nec nisl tincidunt pharetra sed ac lacus. Cras ante nibh, adipiscing sed interdum eu, vulputate sit amet nisi. Aliquam quis mauris eget elit vehicula gravida nec a dui. Vivamus facilisis fermentum neque sit amet mollis.</div></td> </tr> <tr> <td valign="top" height="45" style="border-style:solid; border-width:1px; border-color:#999999;"><div style="overflow:auto;"><img src="http://i.imgur.com/5xRFV.gif" /></div></td> <td align="center" valign="middle" bgcolor="#999999" height="45" width="45" style="border-radius:3px"><span style="font-family:Tahoma; color:#FFFFFF; font-size:11px; font-weight:bold;">send</span></td> </tr> </table> </lj-raw>

(Post a new comment)

(Anonymous)
2012-04-06 06:52 am UTC (link)

you have the padding for top and bottom set to 12px, which is making that huge space you see! i'm not sure what exactly you're looking for, but try this?

<lj-raw>
<table bgcolor="#FFFFFF" cellpadding="5" width="400">
<tr>
<td><img src="http://i.imgur.com/4zmy9.png" style="margin-bottom: -4px; padding-left:5px; padding-right:5px;" /><span style="font-family:Tahoma; font-size:11px; font-weight:bold;">Screen Name</span><img src="http://i.imgur.com/1S2ap.png" style="margin-bottom: -4px; padding-left:5px; padding-right:5px;" /><span style="font-family:Tahoma; color:#999999; font-size:11px; font-weight:bold;">Screen Name</span><img src="http://i.imgur.com/DnQ5H.png" style="margin-bottom: -4px; padding-left:5px; padding-right:5px;" /><span style="font-family:Tahoma; color:#999999; font-size:11px; font-weight:bold;">Screen Name</span></td>
</tr>
<tr>
<td colspan="2" width="400" style="border-style:solid; border-width:1px; border-color:#999999;"><div style="font-family:Tahoma; font-size:11px; height:300px; overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam elementum ipsum vitae consectetur. Ut eget urna nunc, ac tincidunt quam. Mauris vitae orci justo, non semper lectus. Curabitur at venenatis metus. Pellentesque ante odio, porttitor sit amet interdum quis, ullamcorper eget nibh. Aenean eros nisl, placerat nec ornare et, venenatis ut arcu. Maecenas placerat vehicula sem, commodo ornare velit porta et. Pellentesque tempor, ante malesuada rutrum porttitor, ligula odio tristique augue, nec lobortis nisl quam at quam. Aliquam lectus velit, fringilla sit amet tempor ac, tincidunt vel arcu. Ut vel purus nulla. Etiam pellentesque mollis sodales.
<br /><br />
Donec pretium, magna sed pellentesque pulvinar, tellus tellus interdum est, id tempor eros libero at nulla. Nam aliquam tincidunt nisi, ut fermentum ligula lacinia quis. Ut ornare varius dui a tempor. Vestibulum luctus tristique gravida. Vestibulum a erat mauris, vel semper risus. Praesent malesuada pellentesque pellentesque. Cras fringilla tortor nec dui faucibus pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam nec diam sem. In fermentum, lectus et tincidunt fermentum, lacus est vehicula arcu, eget aliquam nisl nibh interdum risus. In sit amet augue et odio mattis ultrices. Phasellus porta fringilla nisi, non elementum orci ullamcorper quis. Pellentesque vitae tincidunt nibh. Nullam imperdiet justo id elit molestie id tincidunt dui fermentum. Quisque eu quam a nisl eleifend mollis vel quis erat. Cras sem orci, cursus et feugiat ac, lacinia vitae justo.
<br /><br />
Maecenas purus erat, iaculis eget accumsan in, suscipit nec mauris. Maecenas sit amet metus vel sapien varius tincidunt. Donec viverra, ante vel ullamcorper tincidunt, mauris augue malesuada nunc, et pharetra eros risus non nulla. Mauris tristique sagittis consequat. Nunc dui odio, porta et aliquet non, facilisis ac orci. Morbi sed orci augue, eget venenatis dui. Aenean at libero nec nisl tincidunt pharetra sed ac lacus. Cras ante nibh, adipiscing sed interdum eu, vulputate sit amet nisi. Aliquam quis mauris eget elit vehicula gravida nec a dui. Vivamus facilisis fermentum neque sit amet mollis.</div></td>
</tr>
<tr>
<td valign="top" height="45" style="border-style:solid; border-width:1px; border-color:#999999;"><div style="overflow:auto;"><img src="http://i.imgur.com/5xRFV.gif" /></div></td>
<td align="center" valign="middle" bgcolor="#999999" height="45" width="45" style="border-radius:3px"><span style="font-family:Tahoma; color:#FFFFFF; font-size:11px; font-weight:bold;">send</span></td>
</tr>
</table>
</lj-raw>

(Reply to this) (Thread)

	theboywhodied 2012-04-06 02:11 pm UTC (link)
	You are fantastic~ ♥♥♥. I didn't even think to combine the margin and padding. But, it was late and I was getting grumpier every minute I was still working on that thing. XD Having fresh eyes just seemed the best way to go so thank you so much for the code fix there. You are a Sanity Saver! C: (Reply to this) (Parent) (Thread)

	(Anonymous) 2012-04-06 06:20 pm UTC (link)
	i'm glad i could help! overall it looks really cool, btw! :) (Reply to this) (Parent) (Thread)

	theboywhodied 2012-04-06 07:40 pm UTC (link)
	I'm glad you were able to help, too! XD And thank you! I'm thinking of adding the codes to my CDJ to share with everyone. (Reply to this) (Parent)