Border around <dd>

[DoubleDee]

Per advice here, I am using a Definition List <dl> to define a Private Message page.

I am trying to put a border around the last <dd> which represents the body of of the PM itself.

Is that possible?

When I try this it doesn't work...

#viewPM dd#msgBody{
	border: 10px solid #AAA;
}

Also, if my approach is wrong, is there an easy way to still accomplish this?

Thanks,


Debbie

[deathshadow60]

Who on earth recommended a DL for a PM page?!?

As to why it's not working, you should know the drill by now -- without seeing everything else on the page we can't help you -- in particular the CSS without the markup it's applied to is gibberish. Without seeing what it is you have for markup and content, I can't weigh in on if a DL is the right markup, or why your CSS isn't working.

[DoubleDee]

Who on earth recommended a DL for a PM page?!?

As to why it's not working, you should know the drill by now -- without seeing everything else on the page we can't help you -- in particular the CSS without the markup it's applied to is gibberish. Without seeing what it is you have for markup and content, I can't weigh in on if a DL is the right markup, or why your CSS isn't working.

I don't remember "who", but it seems like a reasonable approach when the data we are talking about would look like this...

PRIVATE MESSAGE

FROM:	DoubleDee

TO:	Suzy Q

DATE:	Saturday, May 19, 2012  Saturday, May 19, 2012

RE:	My Start-up

	I decided to start my own business because I want 
	to be my own boss!

	My boss is a jerk and never appreciates anything 
	that I do for him, so why put up with the abuse?! 
	He takes me for granted and doesn't appreciate 
	all of my talents.

Here is a larger snippet of my code... (Go light on the echo comments, as I know you don't like my style. Besides, this is my first swing at things...)

    echo "<dl>
            <dt>FROM:</dt>
            <dd>$fromData</dd>
            <dt>TO:</dt>
            <dd>$toData</dd>
            <dt>DATE:</dt>
            <dd>" . htmlentities($msgDate, ENT_QUOTES)
                . "&nbsp;&nbsp;"
                . htmlentities($msgDate, ENT_QUOTES)
            . "</dd>
            <dt>SUBJECT:</dt>
            <dd><b>" . htmlentities($subject, ENT_QUOTES) . "</b></dd>\n\n";

            // Build Message.
            $messageEnt = (isset($body) ? htmlentities($body, ENT_QUOTES) : '');

    echo "    <dt></dt>
            <dd id='msgBody>'"    . nl2p($messageEnt, TRUE) . "</dd>
        </dl>\n\n"; 

Here are the related styles...

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

#viewPM dd#msgBody{
	border: 10px solid #AAA;
}

(There is obviously A LOT more code, but I can't see how it would apply here...)

The only thing I can think of, is that maybe you cannot style a <dd> like I am trying? (I know I go crazy trying to remember what you can and cannot style on Table elements...)

Sincerely,


Debbie

P.S. I know the <DL> code I have I stole from somewhere else in my code-base, and it came from Mr. Paul O' Not sure what I used it for before, but it was probably something pretty close to this context...

[DoubleDee]

DeathShadow,

Attached is a mock-up that I made in OO Calc earlier today...
Email_1.png


This is the look I am going for, and why I want a border around my <dd> Body field...


Debbie

[deathshadow60]

I'd be tempted to call that tabular data -- TH and TD respectively... easier to style consistently and just as semantically correct if not more so... The presence of the colons however makes me wonder if semantically it needs markup at all; meaning the ONLY reason for those to even have tags is as presentational hooks; in which case I'd be looking at B, SPAN and BR. The text already has plenty of meaning, what do you need more tags with meaning around it for? I'm getting increasingly draconian on that subject as a reaction to this obsession I'm seeing of wrapping individual tags around every last little blasted thing.

But you know me -- I hate the idea of throwing definition lists at things that just happen to be labels and data. Almost makes me wish LABEL was for more than just forms.

Of course as always I'd suggest losing the double quotes for singles and string additions for comma delimits...

[ralph.m]

When I try this it doesn't work...

When you are posting about CSS probs, remember that posting related HTML with PHP code mixed in is utterly useless from a testing point of view.

Off Topic:

Also be aware that being DoubleDee and posting a topic like "How to put a border around DD" gives us the wrong idea altogether.

[DoubleDee]

I'd be tempted to call that tabular data -- TH and TD respectively... easier to style consistently and just as semantically correct if not more so...

I could see that...

The presence of the colons however makes me wonder if semantically it needs markup at all; meaning the ONLY reason for those to even have tags is as presentational hooks; in which case I'd be looking at B, SPAN and BR. The text already has plenty of meaning, what do you need more tags with meaning around it for? I'm getting increasingly draconian on that subject as a reaction to this obsession I'm seeing of wrapping individual tags around every last little blasted thing.

I appreciate your stance on that topic, but I also like to have an over-riding structure/semantic markup around a body of text.

Avoiding putting tags around "George Washington" or "Date: May 25, 2012" is understandable, and I am trying to be more aware of that as a potential area for "Tag Abuse".

But at the same time, I think just using B, SPAN, and BR around a set of data that in total represents ONE Private Message is doing it a disservice and swinging to far the other way...

Whether one chooses a Table or Definition List or something else is up for debate. But the point I'd like to stress, is that I think it needs to be crystal clear both visually and semantically that we are looking at a PRIVATE MESSAGE (PM) and not just random data...

Of course as always I'd suggest losing the double quotes for singles and string additions for comma delimits...

Yeah yeah...

So, which is it, DeathShadow?

You answer above was a little soft...

I like the Definition List I have - assuming I can get my border around the Body of my PM.

Other than it being a pain in the a** to re-work my existing code, I would not be overly averse to re-tooling things and using an HTML Table.

Thoughts from the Peanut Gallery?

Sincerely,


Debbie

[DoubleDee]

When you are posting about CSS probs, remember that posting related HTML with PHP code mixed in is utterly useless from a testing point of view.

Hey, DeathShadow asked for more code!!

Off Topic:

Also be aware that being DoubleDee and posting a topic like "How to put a border around DD" gives us the wrong idea altogether.

Ralph, you naughty little school-boy!!

Debbie

[ralph.m]

Hey, DeathShadow asked for more code!!

Sure, but it's better to post the rendered HTML. Then we can test the CSS on it. I'l like to test that border code, but I can't do anything with it because the HTML isn't there.

Off Topic:

Ralph, you naughty little school-boy!!

[deathshadow60]

I can't see it in the code, but are you sure the parent ID is correct? Of course, given that ID's are UNIQUE, are you sure that should even be a ID or that you should bother having the parent one?

Looking deeper, the subject, the actual thing that SHOULD be the heading, being a DD/B pairing kinda bugs me. I'd move that up first as a heading tag before the rest, or use table so you have a TH scope="col"

That said, I'm not sure WHY you'd want a border around just that element when nothing else has it? Seems inconsistent.


Still, I'd suggest dropping all the other selector crap from it, and just try:

#msgBody {

If that works, you have an inheritance or selector issue... It's why as a rule of thumb I'm NOT a fan of using more than one ID in a selector -- ID's are inherently unique, so there should be no legitimate reason to do that.

Oh, and are you sure you're only using #msgBody once on the page? I know that's a obvious question, but again, guessing wildly due to incomplete data.

[deathshadow60]

Ok, and just to show you a few other suggestions -- lose the extra variable for nothing, that way you aren't interrupting the output stream (that or move it BEFORE you echo. Prepare, THEN echo)...

Wee bit more markup due to establishing all the PROPER relationships, like the entire thing actually being a subsection of the SUBJECT... Something a DL can't do but TABLE + SCOPE can.

  echo '
		<table>
			<thead>
				<tr>
					<th scope="row">SUBJECT:</th>
					<th scope="col">',htmlentities($subject,ENT_QUOTES),'</th>
				</tr>
			</thead><tbody>
				<tr>
					<th scope="row">FROM:</th>
					<td>',$fromData,'</td>
				</tr><tr>
					<th scope="row">TO:</th>
					<td>',$toData,'</td>
				</tr><tr>
					<th scope="row">DATE:</th>
					<td>',htmlentities($msgDate,ENT_QUOTES),'</td> 
				</tr><tr>
					<th></th>
					<td class="messageBody">',(
						isset($body) ?
						nl2p(htmlentities($body,ENT_QUOTES) :
						''
					),TRUE),'/td>
				</tr>
			</table>';

Notice I'd also suggest using REAL names and not vague/hard to decipher class names. Oh noes, a few extra characters, not that

Still I suspect your complex #ID tagName#ID is the culprit to your real problem.

[DoubleDee]

Still I suspect your complex #ID tagName#ID is the culprit to your real problem.

Or it could be that I am half-blind like you and missed this type-o...

<dd id='msgBody>'"

As to your question, "Why would you want to put a border around the Body?"

Well, I think these results speak for themselves...
Email_2.png


Thanks,


Debbie

[John_Betong]

I believe I have been crossed off DD's Christmas Card List and been added to her blocked posters list so please copy and paste this alternative script which is easier to debug:

<?php
  $fromData  = 'fromData';
  $toData     = '$toData';
  $msgDate  = '$msgDate';
  $subject     = '$subject';
?>

<dl>
  <dt>FROM:</dt>
  <dd><?php echo $fromData;?></dd>
  <dt>TO:</dt>
  <dd><?php echo $toData;?></dd>
  <dt>DATE:</dt>
  <dd>
    <?php
      echo  htmlentities($msgDate, ENT_QUOTES)
          . "&nbsp;&nbsp;"
          . htmlentities($msgDate, ENT_QUOTES);
    ?>
  </dd>

  <dt>SUBJECT:</dt>
  <dd>
    <b>
      <?php echo htmlentities($subject, ENT_QUOTES);?>
    </b>
  </dd>
</dl>

The original script errors are highlighted with the following Firefox Addon:

https://addons.mozilla.org/en-US/fir...r/155/?src=api

[deathshadow60]

I believe I have been crossed off DD's Christmas Card List and been added to her blocked posters list so please copy and paste this alternative script which is easier to debug:

Because opening and closing PHP every other line is "easier".

But again I'm the guy who thinks <?php ?> should be removed from the php spec entirely.

[John_Betong]

Because opening and closing PHP every other line is "easier".

But again I'm the guy who thinks <?php ?> should be removed from the php spec entirely.

But again I'm the guy that likes an easy life and instead of "barking myself" prefer to let the computer do all the work.

The script can easily be analised at a glance, each line is a separate entity and can be removed or remmed. This assists debugging tremendously. As mentioned before using the Firefox Validation Addon displays an icon indicating script errors along with the relevant lines.

I appreciate that opening and closing PHP does increase the processor time taken but the difference is negligible. Far more time is taken in waiting for the browser download.

Once the script is working then move on. Optimising script before final completion will no doubt result in optimising trivial bottlenecks.

[deathshadow60]

But again I'm the guy that likes an easy life and instead of "barking myself" prefer to let the computer do all the work.

How is following good coding practices "harder" -- it's like the idiocy of the people who never understood STRICT and call it 'harder' -- because clear rules and easy to follow practices are so much harder to deal with than slapping things together any old way... particularly in terms of long term maintenance and the overall development cycle.

I fail to see how doing this (good practice)

echo '
<dl> 
  <dt>FROM:</dt> 
  <dd>',$fromData,'</dd> 
  <dt>TO:</dt> 
  <dd>',$toData,'</dd> 
  <dt>DATE:</dt> 
  <dd>',
    htmlentities($msgDate, ENT_QUOTES),
    '&nbsp;&nbsp;',
    htmlentities($msgDate, ENT_QUOTES),
  '</dd> 
    <dt>SUBJECT:</dt> 
  <dd><b>',htmlentities($subject, ENT_QUOTES),'</b></dd>
</dl>';

is magically any harder to deal with when you write it in the first place, than the train wreck of <?php on every other line.

Optimising script before final completion will no doubt result in optimising trivial bottlenecks.

Following and establishing good coding practices that provide simple as you go well written code is NOT -- to borrow the popular term -- "premature optimization"; because it takes no more or less time than sleazing out the code any old way if you get in the habit of thinking that way in the first place. Anyone who tells you otherwise is just using it as a lame excuse to justify their half assed sleazy practices that generally tells anyone unfortunate enough to have to deal with it "BOHICA".