SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Help repositioning DT and DD Items

    I want to change how my Private Messages are displayed, but am unsure of how to change my DT's and DD's to get the desired end result?!

    Paul O' was nice enough to help me code my original PM, and it looks like this...


    Screenshot
    Attachment 63861


    Sample Code
    HTML 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: 760px;
    			margin: 0 auto;
    			padding: 30px 0 30px 0;
    		}
    
    		#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;
    		}
    
    		
    /* HERE IS WHERE I NEED HELP... */
    		#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{
    			padding: 0 0 5px 0;
    		}
    		
    	</style>
    </head>
    
    <body>
    	<form id="viewPM" action="" method="post">
    		<fieldset>
    			<legend>Viewing Sent PM</legend>
    			<div id='msgWrapper'>
    
    				<div id='msgBarTop'>
    					<a id='returnToInbox' href=''>Trash Folder</a>
    				</div>
    				
    				<dl>
    					<dt>FROM:</dt>
    					<dd><a href='/account/profile/DoubleDee/about-me'>
    								DoubleDee
    								<img id='onlineStatus' src='' width='10' alt='' />
    								<br />
    								<img src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='80' alt='' title='' />
    						 </a></dd>
    
    					<dt>TO:</dt>
    					<dd>
    							<a href=''>
    								username1
    								<img id='onlineStatus' src='' width='10' alt='' />
    								<br />
    								<img src='/uploads/NoImageAvailable_80x80.png' width='80' alt='' title='' /> 
    							</a>
    							<a href=''>
    								username2
    								<img id='onlineStatus' src='' width='10' alt='' />
    								<br />
    								<img src='/uploads/NoImageAvailable_80x80.png' width='80' alt='' title='' /> 
    							</a>
    							<a href=''>
    								username3
    								<img id='onlineStatus' src='' width='10' alt='' />
    								<br />
    								<img src='/uploads/NoImageAvailable_80x80.png' width='80' alt='' title='' /> 
    							</a>
    						</dd>
    
    
    
    					<dt>BCC:</dt>
    					<dd>
    							<a href=''>
    								username4
    								<img id='onlineStatus' src='' width='10' alt='' />
    							</a>
    							<a href=''>
    								username5
    								<img id='onlineStatus' src='' width='10' alt='' />
    							</a>
    					</dd>
    
    
    
    
    
    
    					<dt>DATE:</dt>
    					<dd>Thursday, Jan 16, 2014 @ 6:31:59 pm</dd>
    
    					<dt>SUBJECT:</dt>
    					<dd>TO: u1, u2, u3  BCC: u4, u5</dd>
    
    					<dt></dt>
    					<dd id='msgBody'><p>Testing View-PM queries...</p></dd>
    				</dl>
    
    				
    				<div id='msgBarBottom'>
    					<a id='returnToInbox' href=''>Trash Folder</a>
    				</div>
    
    			</div>
    		</fieldset>
    	</form>
    </body>
    </html>

    This looks awesome, but the Sender of the PM needs to know who was on the "To:" list and who was on the "Bcc:" list, so I would like to change things as follows...


    1.) The "To:" and "Bcc:" Recipients should be all on one line/row

    2.) The "To:" and "Bcc:" labels should appear to the left of the corresponding Thumbnails for said sub-lists

    3.) Currently, you can only PM up to 5 people total (To + Bcc), but it would be dreamy if this new design would scale if that number increases.

    So, if I started allowing people to PM 10 people, then when my code got to the 6th Thumbnail, things would just wrap around to the left and underneath the first row.

    4.) The design should also be flexible in allowing the # of Recipients on the "To:" list and the "Bcc:" list to change.

    For example, any of these combinations should display the same...
    Code:
    TO: User1 (pic), User2 (pic), User3 (pic)  BCC: User4 (pic)
    
    TO: User1 (pic), User2 (pic) BCC: User3 (pic), User4 (pic)
    
    TO: User1 (pic)  BCC: User2 (pic), User3 (pic), User4 (pic)

    Screenshot of Desired New PM
    Attachment 63862


    I think one thing that is throwing me off is how I ended up creating a Two-Column-esque layout using width: 13% and 84%...

    While that works for the "From:", "Date:" and "Subject:" lines, it doesn't seems to work with the modified "To:" line which will now append the "Bcc:" list as well.


    Sorry for the long OP, but I have been yelled at before for not providing working samples, so I figured I'd give you guys LOTS to work with!!


    Can I easily accomplish what I described above??

    This one is out of my league!!

    Sincerely,


    Debbie

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,161
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    My CSS skills are more akin to trial and error. Maybe give the dt's clear:both
    To quote my optometrist "better like this, or like this?"

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need to separate that new section into its own dl so that you can organise it properly. A couple of classes will need to be added also to target some items diferently from the rest of the elements.

    e.g.

    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: 760px;
    	margin: 0 auto;
    	padding: 30px 0 30px 0;
    }
    #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;
    }
    /* HERE IS WHERE I NEED HELP... */
    		#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 { padding: 0 0 5px 0; }
    
    /* changes */
    #msgWrapper dl.inline { display:block; }
    #msgWrapper dl.inline dd { width:auto }
    #msgWrapper dt.bcc { width:auto }
    #msgWrapper dl.inline a { margin-right:12px }
    </style>
    </head>
    
    <body>
    <form id="viewPM" action="" method="post">
    		<fieldset>
    				<legend>Viewing Sent PM</legend>
    				<div id='msgWrapper'>
    						<div id='msgBarTop'> <a id='returnToInbox' href=''>Trash Folder</a> </div>
    						<dl>
    								<dt>FROM:</dt>
    								<dd><a href='/account/profile/DoubleDee/about-me'> DoubleDee <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='80' alt='' title='' /> </a></dd>
    						</dl>
    						<dl class="inline">
    								<dt>TO:</dt>
    								<dd> <a href=''> username1 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username2 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username3 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> </dd>
    								<dt class="bcc">BCC:</dt>
    								<dd class="bcc-block"> <a href=''> username4 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username5 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> </dd>
    						</dl>
    						<dl>
    								<dt>DATE:</dt>
    								<dd>Thursday, Jan 16, 2014 @ 6:31:59 pm</dd>
    								<dt>SUBJECT:</dt>
    								<dd>TO: u1, u2, u3  BCC: u4, u5</dd>
    								<dt></dt>
    								<dd id='msgBody'>
    										<p>Testing View-PM queries...</p>
    								</dd>
    						</dl>
    						<div id='msgBarBottom'> <a id='returnToInbox' href=''>Trash Folder</a> </div>
    				</div>
    		</fieldset>
    </form>
    </body>
    </html>
    The css I added was just this:

    Code:
    /* changes */
    #msgWrapper dl.inline { display:block; }
    #msgWrapper dl.inline dd { width:auto }
    #msgWrapper dt.bcc { width:auto }
    #msgWrapper dl.inline a { margin-right:12px }
    I sepearted the dls into three dls and added three new classes.

    Code:
    <dl>
    		<dt>FROM:</dt>
    		<dd><a href='/account/profile/DoubleDee/about-me'> DoubleDee <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    				<img src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='80' alt='' title='' /> </a></dd>
    </dl>
    <dl class="inline">
    		<dt>TO:</dt>
    		<dd> <a href=''> username1 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    				<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username2 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    				<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username3 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    				<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> </dd>
    		<dt class="bcc">BCC:</dt>
    		<dd class="bcc-block"> <a href=''> username4 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    				<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username5 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    				<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> </dd>
    </dl>
    <dl>
    		<dt>DATE:</dt>
    		<dd>Thursday, Jan 16, 2014 @ 6:31:59 pm</dd>
    		<dt>SUBJECT:</dt>
    		<dd>TO: u1, u2, u3  BCC: u4, u5</dd>
    		<dt></dt>
    		<dd id='msgBody'>
    				<p>Testing View-PM queries...</p>
    		</dd>
    </dl>

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I'm getting a late start today...

    Thank you for the reply and code!!


    A few questions...

    1.) What is your opinion about this layout?

    Does it look okay to you, or not?

    (As a precursor to my CSS questions here, I started this thread asking for some feedback on this latest design.)


    2.) What happens to your code if I increase the # of allowable recipients?

    For example, lets say I allow a combined total between the "To:" and "Bcc:" lists to be 6 or 7 or 10 or 15 users?

    Will it break or does it handle things gracefully across browsers?

    In the mean time, I am diving into your code and trying to test things.

    Thanks again!!

    Sincerely,


    Debbie

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Am looking at your code now, and seeing that allowing things to scale as I increase the # of Recipients could be tricky...

    What about making it so if the # of Recipients was greater than 5, there would be hidden "overflow" to the, but which you could see using a horizontal scroll bar?

    Is that a crazy idea or reasonable?

    In the end, I don't expect to want to allow more than 5 Recipients, BUT it is always nice to design things so your website can easily adapt as things evolve!

    Thoughts?

    Sincerely,


    Debbie

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You could trigger a scrollbar if there were more elements than will fit on one line.

    You would need to set white-space:nowrap on the dl to stop the items wrapping and then the overflow;auto wil take effect.

    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: 760px;
    	margin: 0 auto;
    	padding: 30px 0 30px 0;
    }
    #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;
    }
    /* HERE IS WHERE I NEED HELP... */
    		#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 { padding: 0 0 5px 0; }
    /* changes */
    #msgWrapper dl.inline {
    	display:block;
    	overflow:auto;
    	white-space:nowrap;/* foce items not to wrap*/
    }
    #msgWrapper dl.inline dd { width:auto }
    #msgWrapper dt.bcc { width:auto }
    #msgWrapper dl.inline a {
    	margin-right:12px;
    	white-space:normal;
    }
    </style>
    </head>
    
    <body>
    <form id="viewPM" action="" method="post">
    		<fieldset>
    				<legend>Viewing Sent PM</legend>
    				<div id='msgWrapper'>
    						<div id='msgBarTop'> <a id='returnToInbox' href=''>Trash Folder</a> </div>
    						<dl>
    								<dt>FROM:</dt>
    								<dd><a href='/account/profile/DoubleDee/about-me'> DoubleDee <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='80' alt='' title='' /> </a></dd>
    						</dl>
    						<dl class="inline">
    								<dt>TO:</dt>
    								<dd> <a href=''> username1 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username2 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username3 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> </dd>
    								<dt class="bcc">BCC:</dt>
    								<dd class="bcc-block"> <a href=''> username4 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username5 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username7 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username8 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    										<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a></dd>
    						</dl>
    						<dl>
    								<dt>DATE:</dt>
    								<dd>Thursday, Jan 16, 2014 @ 6:31:59 pm</dd>
    								<dt>SUBJECT:</dt>
    								<dd>TO: u1, u2, u3  BCC: u4, u5</dd>
    								<dt></dt>
    								<dd id='msgBody'>
    										<p>Testing View-PM queries...</p>
    								</dd>
    						</dl>
    						<div id='msgBarBottom'> <a id='returnToInbox' href=''>Trash Folder</a> </div>
    				</div>
    		</fieldset>
    </form>
    </body>
    </html>
    The other alternative is to allow items to wrap but won't look very neat as they will move to the far left of the line when they wrap unless the structure is changed quite a bit.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You could trigger a scrollbar if there were more elements than will fit on one line.

    You would need to set white-space:nowrap on the dl to stop the items wrapping and then the overflow;auto wil take effect.
    Is there a way to make the Horizontal Scroll appear just below the User <dd> and not the "To:" and "Bcc:" <dl>??

    That way, when you scroll, you are not losing the "To:" and "Bcc:" and they are staying in place making it look less disruptive to the entire page layout...


    Quote Originally Posted by Paul O'B View Post
    The other alternative is to allow items to wrap but won't look very neat as they will move to the far left of the line when they wrap unless the structure is changed quite a bit.
    Yeah, I am seeing that now. (It could be done, but would take a wicked amount of php to code which HTML/CSS to display under different circumstances?!)


    Maybe I am getting ahead of myself?

    Would it be better to limit users to 5 Recipients, and then *if* that becomes an issue I can worry about it then??

    I know I over-analyze things at times, but it often it makes sense to address issues during development before they become a bigger issue in production...

    Sincerely,


    Debbie

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Is there a way to make the Horizontal Scroll appear just below the User <dd> and not the "To:" and "Bcc:" <dl>??

    That way, when you scroll, you are not losing the "To:" and "Bcc:" and they are staying in place making it look less disruptive to the entire page layout...
    Yes it is possible but it would need a change of html to achieve it and won't fit so neatly into the dl structure as you will need wrappers around the dds only which is invalid in a dl. Therefore it would need to be a div structure with headings and lists instead I would think.

    Would it be better to limit users to 5 Recipients, and then *if* that becomes an issue I can worry about it then??
    I suppose it depends on whether you see a need for it. If users are likely to want more than 5 recipients then it would be an issue but is that likely?

    You could implement the scrollbar anyway and then you can decide later on as the scrollbar will only show if there are more than 5.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes it is possible but it would need a change of html to achieve it and won't fit so neatly into the dl structure as you will need wrappers around the dds only which is invalid in a dl. Therefore it would need to be a div structure with headings and lists instead I would think.
    Oh, okay.


    Quote Originally Posted by Paul O'B View Post
    I suppose it depends on whether you see a need for it. If users are likely to want more than 5 recipients then it would be an issue but is that likely?
    What do you think?

    I don't think it's an issue, because presumably 95% of PM's go to a single person, right?

    My whole reason for allowing multiple recipients - up to 5 - was just in case someone wanted to send it to "a couple" of friends. (Or forward something to an Admin.)

    We can never predict what users will want, but I think allowing 5 recipients plus blind copying is more than enough for most users.

    But I could be wrong...


    Quote Originally Posted by Paul O'B View Post
    You could implement the scrollbar anyway and then you can decide later on as the scrollbar will only show if there are more than 5.
    True, it's just that I'm not too keen on how the example you provided looked. (Nothing personal.)

    It looks out of place how it expands the width of the parent container, and how the whole second row scrolls left-right.

    If the "To:" label would stay anchored and in alignment with the "From:", "Date:" and "Subject:", and the everything after the "To:" label scrolled left-right without adversely changing the parent-container wdth, I think it would look great. But in it the mockup you posted, it looks "unfinished" at best... (I can't believe I just told Paul O' that?!)

    I dunno...

    Sometimes I'm just not sure what anyone will think of my website or how it is designed...

    I'm just trying to design things in such a way that they are well thought out and scalable so I can stay ahead of my users and both impress people on their first visit, and keep people happy for the foreseeable future...

    Sincerely,


    Debbie

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's an example with the scroll under the images.

    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: 760px;
    	margin: 0 auto;
    	padding: 30px 0 30px 0;
    }
    #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;
    }
    /* HERE IS WHERE I NEED HELP... */
    		#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 { padding: 0 0 5px 0; }
    /* changes */
    .inline {
    	display:block;
    	overflow:auto;
    	white-space:nowrap;/* force items not to wrap*/
    }
    .inline h3, .inline div, .inline a {
    	display:inline-block;
     *display:iinline;
     zoom:1:0;
    	vertical-align:top;
    }
    .inline a {
    	margin-right:12px;
    	white-space:normal;
    }
    .users {
    	width:84%;
    	overflow:auto
    }
    .inline h3 {
    	font-weight: bold;
    	margin: 0 8px 0 0;
    	text-align: right;
    	width: 13%;
    	font-size:96%;
    }
    h3.bcc { width:auto }
    </style>
    </head>
    
    <body>
    <form id="viewPM" action="" method="post">
    		<fieldset>
    				<legend>Viewing Sent PM</legend>
    				<div id='msgWrapper'>
    						<div id='msgBarTop'> <a id='returnToInbox' href=''>Trash Folder</a> </div>
    						<dl>
    								<dt>FROM:</dt>
    								<dd><a href='/account/profile/DoubleDee/about-me'> DoubleDee <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='80' alt='' title='' /> </a></dd>
    						</dl>
    						<div class="inline">
    								<h3>TO:</h3>
    								<div class="users">
    										<div class="to"> <a href=''> username1 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username2 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username3 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a>
    												</dd>
    										</div>
    										<h3 class="bcc">BCC:</h3>
    										<div class="bcc-block"> <a href=''> username4 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username5 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username7 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username8 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a>
    												</dd>
    										</div>
    								</div>
    						</div>
    						<dl>
    								<dt>DATE:</dt>
    								<dd>Thursday, Jan 16, 2014 @ 6:31:59 pm</dd>
    								<dt>SUBJECT:</dt>
    								<dd>TO: u1, u2, u3  BCC: u4, u5</dd>
    								<dt></dt>
    								<dd id='msgBody'>
    										<p>Testing View-PM queries...</p>
    								</dd>
    						</dl>
    						<div id='msgBarBottom'> <a id='returnToInbox' href=''>Trash Folder</a> </div>
    				</div>
    		</fieldset>
    </form>
    </body>
    </html>
    It sounds like you wanted two scrollbars starting from the "To" and the BCC" but as we don't know how many of each items there will be we can't force a scrollbar individually.

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Here's an example with the scroll under the images.

    It sounds like you wanted two scrollbars starting from the "To" and the BCC" but as we don't know how many of each items there will be we can't force a scrollbar individually.
    That looks a lot closer to what I was envisioning!

    There seems to be only one catch...

    If I have 5 Recipients there is no Scroll Bar and everything looks normal. (Good)
    Attachment 63880


    If I have 6 Recipients, then the Scroll Bar appears and the 6th Recipient is hidden off to the right all except for a small portion. Container-width is same. (Good, other than not sure why it is showing the first slice of the 6th image?!)
    Attachment 63881


    If I have 7 Recipients, then the Scroll Bar appears, but the Container-width increases a little, so that the 6th Recipient can be seen, but the 7th Recipients is hidden off to the right. (Annoying, but tolerable.)
    Attachment 63882


    If I have 10 Recipients, then the Scroll Bar appears, but the Container-width increases quite a bit, so that the first 8 Recipients are shown, and the 9th and 10th Recipients are hidden off to the right. (Bad)
    Attachment 63883


    If I add even more Recipients, then the entire web page now expands and goes off of the View Port. (Very bad!!)


    Isn't there a way to prevent that? (You code works so nice when there is just a 6th Recipient...)


    BTW, I noticed some residual </dd> tags in your code... Could that be causing the issue?


    Hopefully things just need to be tweaked, because I think this latest version is very close to being perfect in my mind. (Not sure if others would like this approach, though?!)

    Thanks,


    Debbie

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The msgWrapper needs a width and those stray tags need removing although they weren't really causing the problem. The problem was the fieldset which just kept expanding when it shouldn't. It's a buggy element especially in firefox so we need to control the width on the inner element.

    This should be working better.

    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 type="text/css">
    /* 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: 760px;
    	margin: 0 auto;
    	padding: 30px 0 30px 0;
    }
    #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;
    }
    /* HERE IS WHERE I NEED HELP... */
    		#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 { padding: 0 0 5px 0; }
    /* changes */
    .inline {
    	display:block;
    	overflow:auto;
    	white-space:nowrap;/* force items not to wrap*/
    }
    .inline h3, .inline div, .inline a {
    	display:inline-block;
     *display:iinline;
     zoom:1:0;
    	vertical-align:top;
    }
    .inline a {
    	margin-right:12px;
    	white-space:normal;
    }
    .users {
    	width:83%;
    	overflow:auto
    }
    .inline h3 {
    	font-weight: bold;
    	margin: 0 8px 0 0;
    	text-align: right;
    	width: 13%;
    	font-size:96%;
    }
    h3.bcc { width:auto }
    #msgWrapper {
    	border: 1px solid #D7D3FF;
    	width: 658px;
    }
    </style>
    </head>
    
    <body>
    <form id="viewPM" action="" method="post">
    		<fieldset>
    				<legend>Viewing Sent PM</legend>
    				<div id='msgWrapper'>
    						<div id='msgBarTop'> <a class='returnToInbox' href=''>Trash Folder</a> </div>
    						<dl>
    								<dt>FROM:</dt>
    								<dd><a href='/account/profile/DoubleDee/about-me'> DoubleDee <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='80' alt='' title='' /> </a></dd>
    						</dl>
    						<div class="inline">
    								<h3>TO:</h3>
    								<div class="users">
    										<div class="to"> <a href=''> username1 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username2 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username3 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> </div>
    										<h3 class="bcc">BCC:</h3>
    										<div class="bcc-block"> <a href=''> username4 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username5 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> </div>
    								</div>
    						</div>
    						<dl>
    								<dt>DATE:</dt>
    								<dd>Thursday, Jan 16, 2014 @ 6:31:59 pm</dd>
    								<dt>SUBJECT:</dt>
    								<dd>TO: u1, u2, u3  BCC: u4, u5</dd>
    								<dt></dt>
    								<dd id='msgBody'>
    										<p>Testing View-PM queries...</p>
    								</dd>
    						</dl>
    						<div id='msgBarBottom'> <a class='returnToInbox' href=''>Trash Folder</a> </div>
    				</div>
    		</fieldset>
    </form>
    </body>
    </html>

  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You nailed it, Paul!!

    That is exactly what I wanted!!!

    THANK YOU!!!


    Here are some follow-up questions so I can better understand why you did what you did and how things work...

    1.) My parent container <form id='viewPM' had a width of 760px, so why didn't that stop things from expanding off the screen before?

    You said that fieldset was unwieldy, but to me that shouldn't matter since #viewPM had a width...


    2.) How evil was it to go from a pure DL/DT/DD to throwing in the <h3>'s??

    (If DeathShadow was here he'd flip?!)


    3.) It looks like you didn't need/use .bcc-block


    4.) All of this looks awesome in FireFox on my Mac, but what about on Windows and in Internet Explorer and other browsers and versions??

    (I tested this updated web page with 5 and 6 Recipients, respectively, on FireFox, Safari, Chrome, and Opera on my MacBook Pro and they look pretty good except that the horizontal scroll appears when there are 5 Recipients and of course I don't want that. I think this may be related to something else that is worthy of a new thread...)


    FWIW, I tweaked the margin here...
    Code:
    .inline a{margin-right: 11px;}
    ...because otherwise I was getting a horizontal scroll bar when there were only 5 Recipients.

    I also tested things up to 23 Recipients things worked perfect! Woo-hoo!!


    All in all, I'd say things look excellent!!

    Look forward - as always - to your response...

    Sincerely,


    Debbie

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    1.) My parent container <form id='viewPM' had a width of 760px, so why didn't that stop things from expanding off the screen before?
    The fieldset is a special element and doesn't seem to be bound by the width of the parent when things push it wide.

    if uyou look at this test you will see the fieldset border still stays with the content even though it shouldn't/

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    form {
    	width:300px;
    	border:1px solid red;
    }
    fieldset {
    	border:1px solid green;
    	display:block
    }
    </style>
    </head>
    
    <body>
    <form>
    		<fieldset>
    				<legend>Test</legend>
    				<p>ThisissomeunbrokentextThisissomeunbrokentextThisissomeunbrokentextThisissomeunbrokentextThisissomeunbrokentext</p>
    		</fieldset>
    </form>
    </body>
    </html>
    If you change the fieldset to a div with the same css then the border stops at the width of the parent and just the text spills out as expected.

    It's just one of those anomalies with fieldsets.
    2.) How evil was it to go from a pure DL/DT/DD to throwing in the <h3>'s??
    It's a small step down but semantically still makes sense. You have a heading and then a list of items related to that heading. I would have put all the images in a list though.

    3.) It looks like you didn't need/use .bcc-block
    That was put in while I was testing the feasibility of 2 scroll sections along the same line but was discarded and could be removed.

    Code:
    4.) All of this looks awesome in FireFox on my Mac, but what about on Windows and in Internet Explorer and other browsers and versions??
    It will work back to IE8 with no problem although you might want to hide the vertical scrolbar on those images for IE a sit pops one in when not needed.

    This version should work back to IE6 with any luck.

    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 type="text/css">
    /* 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: 760px;
    	margin: 0 auto;
    	padding: 30px 0 30px 0;
    }
    #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;
    }
    /* HERE IS WHERE I NEED HELP... */
    		#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 { padding: 0 0 5px 0; }
    /* changes */
    .inline {
    	display:block;
    	zoom: 1.0;						/* IE6 & 7 fix - invalid css. */
    }
    .inline h3, .inline div, .inline a {
    	display:inline-block;
     *display: inline;			/* IE6 & 7 inline-block fix - invalid css. */
    	zoom: 1.0;						/* IE6 & 7 fix - invalid css. */
    	vertical-align:top;
    }
    .inline a {
    	margin-right:12px;
    }
    
    .users {
    	width:83%;
    	overflow:auto;
    	overflow-y:hidden;
    	white-space:nowrap;/* force items not to wrap*/
    }
    * html .users{padding-bottom:16px}/* ie6 scrolbar sits on content so need more room*/
    *+html .users{padding-bottom:16px}/* ie7 scrolbar sits on content so need more room*/
    
    .inline h3 {
    	font-weight: bold;
    	margin: 0 8px 0 0;
    	text-align: right;
    	width: 13%;
    	font-size:96%;
    }
    h3.bcc { width:auto }
    #msgWrapper {
    	border: 1px solid #D7D3FF;
    	width: 658px;
    }
    </style>
    </head>
    
    <body>
    <form id="viewPM" action="" method="post">
    		<fieldset>
    				<legend>Viewing Sent PM</legend>
    				<div id='msgWrapper'>
    						<div id='msgBarTop'> <a class='returnToInbox' href=''>Trash Folder</a> </div>
    						<dl>
    								<dt>FROM:</dt>
    								<dd><a href='/account/profile/DoubleDee/about-me'> DoubleDee <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    										<img src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='80' alt='' title='' /> </a></dd>
    						</dl>
    						<div class="inline">
    								<h3>TO:</h3>
    								<div class="users">
    										<div class="to"> <a href=''> username1 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username2 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username3 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /> <br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> </div>
    										<h3 class="bcc">BCC:</h3>
    										<div class="bcc-block"> <a href=''> username4 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username5 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username6 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username7 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username8 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username9 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> <a href=''> username10 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br />
    												<img src='http://placehold.it/80x80' width='80' alt='' title='' /> </a> </div>
    								</div>
    						</div>
    						<dl>
    								<dt>DATE:</dt>
    								<dd>Thursday, Jan 16, 2014 @ 6:31:59 pm</dd>
    								<dt>SUBJECT:</dt>
    								<dd>TO: u1, u2, u3  BCC: u4, u5</dd>
    								<dt></dt>
    								<dd id='msgBody'>
    										<p>Testing View-PM queries...</p>
    								</dd>
    						</dl>
    						<div id='msgBarBottom'> <a class='returnToInbox' href=''>Trash Folder</a> </div>
    				</div>
    		</fieldset>
    </form>
    </body>
    </html>

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all of your help, Paul!!

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Thanks for all of your help, Paul!!
    No worries


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •