Problem with Indent

HTML & CSS
1

Okay, I am embarrassed to be asking for help on this, but obvious my HTML and CSS are rusty?! :frowning:

When a user changes their e-mail, I display a message confirming the change.

I would like the e-mail to be bold, indented maybe 2em, and have maybe 0.5em above and below it, so that it stands out from the other text.

For the life of me, I cannot get the code below to recognize my style?!


<div id="pageMidCol_1">
  <div id="boxMessage">
    <h1>E-mail Changed</h1>
    <p>Your e-mail has been changed, and a confirmation e-mail sent to:<br />
    <span id='indentText'><b>username@mail.com</b></span></p>
    <p>Please log in using the new e-mail. (2128)</p>
    <a class="button" href="http://local.debbie/account/log-in.php">Log In</a>
  </div>
</div><!-- End of #MIDDLE -->



#boxMessage p{
	padding: 0.5em 0 0.5em 0;
}


#boxMessage #indentText{
	padding: 0.5em 0 0 2em;
}

The code above is actually generated by PHP, which is why I have the single quotes around <span id=‘indentText’>.

Also, I tried using FireBug to figure things out, but no luck.

Any help would be appreciated.

Sincerely,

Debbie

2

Yeah, top/bottom padding/margin doesn’t work like that on inline elements (such as <span>). You can fix it by doing this:

#boxMessage #indentText{
	padding: 0.5em 0 0 2em;
	[COLOR="#FF0000"]display: block;[/COLOR]
}

With display: block on the span, you can also now lose the <br> before it.

3

That should have worked, Ralph, but this is what I see…

E-mail Changed

Your e-mail has been changed, and a confirmation e-mail sent to:username@mail.com

Please log in using the new e-mail. (2128)

It seems like my code is ignoring my style…

Also, notice that my <span> is INSIDE the parent <p>.

I suppose there are a couple of ways I could do things, including:

1.) Making each line a paragraph and wrapping the Email in <p> tags

2.) Using a nested <span> like I am now inside a parent <p>

3.) Other?

Debbie

4

Try !important. If it works you know it’s a specificity problem.

5

How and where do I do that? :-/

Debbie

6

Debbie, the style recommended by Ralph works for me in Firefox and IE8. I see:


[b]E-mail Changed[/b]

Your e-mail has been changed, and a confirmation e-mail sent to:

    [b]username@mail.com[/b]


Please log in using the new e-mail. (2128)

Log In

Could there be other code overriding your styles?

PS: you could assign #indentText to the <b> tag and omit the <span> if you wish.

Try the following test page in your browser and see how it behaves. What browser are you using?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?958892-Problem-with-Indent
Thread: Problem with Indent
2013.01.20 21:03
DoubleDee
-->
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

#boxMessage {
    outline:1px solid magenta;
}
#boxMessage p {
    padding: 0.5em 0 0.5em 0;
    background-color:#ccf;
}
#boxMessage #indentText {
    display:block;
    padding: 0.5em 0 0 2em;
    background-color:#fcc;
}

    </style>
</head>
<body>

<div id="pageMidCol_1">
  <div id="boxMessage">
    <h1>E-mail Changed</h1>
    <p>Your e-mail has been changed, and a confirmation e-mail sent to:
    <b id='indentText'>username@mail.com</b></p>
    <p>Please log in using the new e-mail. (2128)</p>
    <a class="button" href="http://local.debbie/account/log-in.php">Log In</a>
  </div>
</div> <!-- End of #MIDDLE -->

</body>
</html>
7

This may be a case of where FireFox’s cache is causing issues AGAIN. :mad:

Right now I’m listening to Casey Kasem’s Countdown, and we’re on #5, but after my show is over, I’ll close all instance of FireFox, and see if that helps?! :lol:

Debbie

8

Just in case clearing the cache doesn’t help, try Eric’s suggestion and add the !important modifier to your styles like this:


#boxMessage p {
    padding: 0.5em 0 0.5em 0 [color=blue]!important[/color];
}
#boxMessage #indentText {
    padding: 0.5em 0 0 2em [color=blue]!important[/color];
    display:block [color=blue]!important[/color];
}

If this solves the problem, then eliminate the modifiers one at a time until you determine which property is being overridden; then try to find out where the override is occurring and you should be able to address your selector so it wins the contest.

The !important modifier shouldn’t be considered a solution unless there is no other way to overcome the specificity issue.

There is a recent thread that gives some great information about specificity:

A bit of useful trivia for your notebook:

Ctrl+F5 (or) Ctrl+Shift+R will force a full reload of a page in Firefox.

9

Well, it is a new day, and I tried all of the suggestions above and I am still striking out?!

Here is the incorrect output I am seeing…

E-mail Changed
Your e-mail has been changed, and a confirmation e-mail sent to:

username@mail.com

Please log in using the new e-mail. (2128)

And here is the PHP code I am currently using…


		echo '<h1>E-mail Changed</h1>';
		echo '<p>Your e-mail has been changed, and a confirmation e-mail sent to:</p>';
		echo '<p id="newEmailAddy">' . str2htmlentities($newEmail) . '</p>';
//			echo '<p>Your e-mail has been changed, and a confirmation e-mail sent to:';
//			echo '<span id="indentText"><b>' . str2htmlentities($newEmail) . '</b></span></p>';
		echo '<p>Please log in using the new e-mail. (2128)</p>';
		echo '<a class="button" href="' . BASE_URL . '/account/log-in.php">Log In</a>';

Here are my current styles…


#boxMessage h1{
	font-size: 1.2em;						/* 2012-05-11 */
	margin: 0.5em 0 -0.2em 0;		/* 2011-05-11 */
	padding: 0;									/* 2011-05-11 */
}


#boxMessage p{
	padding: 0.5em 0 0.5em 0;
}

#newEmailAddy{
	display: block;
	padding: 1em 0 1em 2em !important;
}

And here is the actual HTML from my PHP…


	<!-- MIDDLE COLUMN -->
		<div id="pageMidCol_1">
			<div id="boxMessage">
				<h1>E-mail Changed</h1><p>Your e-mail has been changed, and a confirmation e-mail sent to:</p>
				<p id="newEmailAddy">username@mail.com</p>
				<p>Please log in using the new e-mail. (2128)</p>
				<a class="button" href="http://local.debbie/account/log-in.php">Log In</a>
			</div>
		</div><!-- End of #MIDDLE -->

When I select this code in FireBug…


<p id="newEmailAddy">username@mail.com</p>

…I see this in the Style window off to the side…


#boxMessage p {
    padding: 0.5em 0;
}

…which is active, and then I see this below it…


p {
    padding: 0 0 1em;
}

…which has a STRIKETHOUGH through it saying that my #boxMessage style is over-riding my default p style.

However, nowhere do I see newEmailAddy?! :-/

Any ideas what is going on???

Thanks,

Debbie

10

I think I have things working now, but I certainly can’t explain all of the anomalous behavior described above?!

When I added this line first thing today, it didn’t help…


	padding: 0 0 0.5em 2em !important;	/**/

And then later it started working?! :-/

Then I decided to experiment some more, and tried this…


p#newEmailAddy{
	display: block;
/*	padding: 0 0 0.5em 2em !important;	/**/
	padding: 0 0 0.5em 2em;		/**/
	font-weight: bold;
}

And that seems to also work - and is probably better.

Yet when I tried p#newEmailAddy last night it was NOT working… :-/

Strange?!

Debbie

11

The difference may be that leading “p” in p#newEmailAddy which makes the selector more specific. Yesterday’s code doesn’t appear to have included that leading “p”.

That message about specificity would be a worthwhile read.

12

In what I posted last night, you are correct. But before coming to SP, I did have p#newEmailAddy in my code, and it didn’t help. (May have been that notorious FireFox Caching issue…)

That message about specificity would be a worthwhile read.

Yes, I did read the link you provided, and I think I knew all of that.

(I think when I re-write my site in v3.0 I need to completely scrap my CSS and start from scratch. It has become unwieldy, and its messiness probably complicates issues like this one.)

Thanks for the help, though!

Debbie