Wanting to Bump h3 Down 10 Pixels

HTML & CSS
1

Hello all,

I am interested in bumping down the h3 element at the bottom of the page here, but the h3 will not respond to any top or bottom margins or padding, but it will move left to right with either margin or padding? Why is this? Why am I struggling to move this downward 10 px?

Thanks.:frowning:

2

You need to add a bit more top margin to get the h3 to push off what’s above. Try something like margin-top: 25px;

3

Well, it looks like it’s still staying put. I tried margin-top:5000px to prove my point, and it still doesn’t move. Perhaps this has something to do with the absolutely positioned span with the image on top of it we know as my emailbox?

4

Hm, works for me in testing, but I only tried it in Chrome. What browser did you try it in? And just to confirm, are we talking about the “Return to top” text?

5

I tried it in IE8 and Firefox. I am still not seeing any changes in either browser.

6

Works perfectly for me in FF too. Again, are we talking about the same thing? What code are you using? You could either apply a class to the h3 or just use an inline style (at least for testing purposes).

7

I tried it in IE8 and Firefox. I am still not seeing any changes in either browser.

Do you suppose you could entertain us with a couple of screen shots showing what you see vs what you would like to see?
It would help.

8

Try the following changes.

Line 6, ADD overflow:hidden; CHANGE the margin-bottom

#textcontainer {
    width:800px; 
    padding-top:18px; 
    margin-bottom:[COLOR="#FF0000"]84px[/COLOR];    (change to "0")
    [COLOR="#FF0000"]overflow:hidden;[/COLOR]       (this is an ADD.)
}

Line 146, CHANGE the line-height

.headtitle {
    font-style:italic;
    font-family:"Lucida Console", Monaco, monospace; 
    font-size:14pt; 
    border-bottom:2px groove #000; 
    line-height:[COLOR="#FF0000"]38px[/COLOR];      (change to "1" with no unit of measure)
}

Enjoy readjusting your page.

9

Here is a screenshot of what I am seeing with those new changes, which I am seeing no change. What I want to do is very miniscule, almost trivial, but this is weird that just a bit of margin won’t move those orange links at the bottom down about 10px. This screenshot was taken of IE8, but it looks the same in Mozilla.

10

It has been three hours and the screenshot still hasn’t been “approved”. Maybe a link to a screenshot(s) hosted on your server would be better. Also, since I am testing with Firefox and IE8, it is probable that my view will match your screenshot; therefore, an image (albeit done with a paint program) of what you wish to see would be more helpful. Such comparisons help us help you.

The css in the example link that you provided is unchanged. Have you updated it with the changes?

Since my previous post may be misleading, here it is again with the recommended changes in RED.

Line 6, ADD overflow:hidden, CHANGE the margin-bottom


#textcontainer {
    width:800px; 
    padding-top:18px; 
    margin-bottom:[COLOR="#FF0000"]0px[/COLOR];    (was "84px")
    [COLOR="#FF0000"]overflow:hidden;[/COLOR]      (this is an ADD.)
}

Line 146, CHANGE the line-height


.headtitle {
    font-style:italic;
    font-family:"Lucida Console", Monaco, monospace; 
    font-size:14pt; 
    border-bottom:2px groove #000; 
    line-height:[COLOR="#FF0000"]1[/COLOR];      (was "38px")
}
11

Ah, well, you can’t blame Sitepoint for the approval process.

Here’s a link to the screenshot.

I did exactly what you indicated in your post, but I haven’t uploaded the changes yet. I’m still in front of my desk at my regular job.

12

The “screenshot” is significantly reduced in size (smaller than an actual screen capture) so it is not useful for counting pixels. However, the proportions look approximately the same as my on-line view of your test page.

Since you are expecting the space above the <h3> element to change, you will also have to make the following changes:


h3 {
	text-align:right;
	[COLOR="#FF0000"]margin-top:12px;
	margin-right:140px;[/COLOR]   (this was moved from  h3 a  below)
}
h3 a {
	font-size:14px;
	color:#F60;
}

Let us know when the test page has been updated.

13

This has solved this issue. Weird how this worked out, but I think I’m learning stuff. I did update the files for you to see. Thank you for the help, Ronpat!

14

You’re very welcome. Thanks for the feedback. Good luck in the future.