Icon skewing Adjacent Text

HTML & CSS
1

When I add an Icon to the end of the Subject Line of a PM, it is moving the Subject Line down a little bit which looks awkward.

Here is a screenshot…

And here is my code…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<!-- ################## DEBBIE ##################### -->

	<!-- Page Stylesheets -->
	<style>
		/* Basic CSS Reset */
		html, body, address, blockquote, div,
		form, fieldset, caption,
		h1, h2, h3, h4, h5, h6,
		hr, ul, li, ol, ul, dl, dt, dd, br,
		table, tr, td, th, p, img{
			margin: 0;
			padding: 0;
		}

		body{
			font-family: Helvetica, Arial, Sans-Serif;
			font-weight: normal;
			line-height: 1.4em;
			font-size: 0.9em;
			color: #000;
			background: #FFF;
		}

		fieldset{
			border: 1.5px solid #AAA;	/**/
		}

		#viewPM{
			width: 640px;
			margin: 0 auto;
			padding: 30px 0 30px 0;
		}

		#viewPM{
			width: 760px;
		}

		#viewPM fieldset{
			padding: 30px 50px 50px 50px;
		}

		#viewPM legend{
			margin: 0 0 0 -1em;
		}

		#msgWrapper{
			border: 1.5px solid #D7D3FF;	/**/
		}

		#msgBarTop,
		#msgBarBottom{
			margin: 0 0 20px 0;
			padding: 0.8em 1em 0.7em 0.7em;
			overflow: hidden;
			background-color: #D7D3FF;
		}

		#msgBarBottom{
			margin: 50px 0 0 0;
		}

		#msgBarTop input,
		#msgBarBottom input{
			margin: 0 0 0 0;
			padding: 0;
			font-size: 0.9em;
		}


		#msgBarTop a,
		#msgBarBottom a{
			float: right;
			line-height: 25px;
		}

		
		#viewPM dl{
			padding: 0;
		}

		#viewPM dt,
		#viewPM dd{
			display: inline-block;
			width: 84%;						/* Can't use 50% because of the whitespace gap between inline blocks and this is the easier fix. */
			*display: inline;			/* IE6 & 7 inline-block fix - invalid css. */
			zoom: 1.0;						/* IE6 & 7 fix - invalid css. */
			vertical-align: top;
		}

		#viewPM dt{
			width: 13%;					/**/
			margin: 0 8px 0 0;
			font-weight: bold;
			text-align: right;
		}

		#viewPM dd{
			padding: 0 0 0.5em 0;
		}

		#viewPM dd a{
			display: inline-block;
			margin: 0 15px 0 0;
			text-align: left;
			vertical-align: top;
		}

		#viewPM dd#msgBody{
			width: 500px;
			margin: 10px 0 0 0;
			padding: 1em 1em 3em 1em;
			border: 1px solid #AAA;
		}

		#viewPM img#flag{
			display: inline;
			margin: 0px 0 0px 10px;
			padding: 0;
		}
	</style>
</head>

<body>
	<form id="viewPM" action="" method="post">
		<fieldset>
			<legend>Viewing Deleted PM</legend>
			<div id='msgWrapper'>

				<div id='msgBarTop'>
					<a id='returnToInbox' href=''>Trash Folder</a>
				</div>
				<dl>
				</dl>
				
				<!-- Message goes here -->
				<dl>
					<dt>FROM:</dt>
					<dd>John</dd>
												
					<dt>TO:</dt>
					<dd>Sara</dd>
													
					<dt>DATE:</dt>
					<dd>2014-01-02 8:58pm</dd>
													
					<dt>SUBJECT:</dt>
					<dd>Re: Upcoming Project<img id='flag' src='/images/YellowStar_20x20.png' width='20' alt='' title='Flagged Message' /></span></dd>

					<dt></dt>
						<dd id='msgBody'>Need to talk with you about the ACME project deadline!!</dd>
				</dl>

				
				<div id='msgBarBottom'>
					<a id='returnToInbox' href=''>Trash Folder</a>
				</div>

			</div>
		</fieldset>
	</form>
</body>
</html>

What is going on?

Sincerely,

Debbie

2

You haven’t given the image a height value?

My guess is the image dimensions are taller than the containing dd element.

You could try giving the image height, but I doubt that will work unless you want to “scrunch it” (i.e. distort)
You could try using CSS to position the text off of the baseline. might look OK, might not, but worth a try.
Or you could try giving the image negative top and bottom margins.

Probably a combination of all 3 would be needed. Time for trial and error tweaking.

3

Try something like this:

#viewPM img#flag {
display: inline;
margin: 0px 0 0px 10px;
padding: 0;
[COLOR="#FF0000"]vertical-align: top;[/COLOR]
}

By default, the image aligns with the baseline of the text, and because it’s taller than the text, the text gets pushed down.

4

You’re such a stud, Ralph!! :wink:

Yep, that did the trick!!

I tried this code thinking it would Top-align both the Text and the Image, but apparently it wasn’t the right solution…


	#viewPM dt,
	#viewPM dd{
		display: inline-block;
		width: 84%;		
		*display: inline;	
		zoom: 1.0;
		vertical-align: top;		/* HERE */
	}

Thank you!!

Debbie

5

:smiley:

Stud: “a large-headed piece of metal that pierces and projects from a surface”.

6

Ha ha

Debbie

7
Off Topic:

Perhaps a small stud then :slight_smile: