SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Wanting to Bump h3 Down 10 Pixels

    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.
    Last edited by ralph.m; Sep 18, 2012 at 16:47.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I tried it in IE8 and Firefox. I am still not seeing any changes in either browser.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Try the following changes.

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

    Code:
    #textcontainer {
        width:800px; 
        padding-top:18px; 
        margin-bottom:84px;    (change to "0")
        overflow:hidden;       (this is an ADD.)
    }
    Line 146, CHANGE the line-height

    Code:
    .headtitle {
        font-style:italic;
        font-family:"Lucida Console", Monaco, monospace; 
        font-size:14pt; 
        border-bottom:2px groove #000; 
        line-height:38px;      (change to "1" with no unit of measure)
    }
    Enjoy readjusting your page.

  9. #9
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.screenshot.jpg This screenshot was taken of IE8, but it looks the same in Mozilla.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    Here is a screenshot of what I am seeing with those new changes, which I am seeing no change.
    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
    Code:
    #textcontainer {
        width:800px; 
        padding-top:18px; 
        margin-bottom:0px;    (was "84px")
        overflow:hidden;      (this is an ADD.)
    }
    Line 146, CHANGE the line-height
    Code:
    .headtitle {
        font-style:italic;
        font-family:"Lucida Console", Monaco, monospace; 
        font-size:14pt; 
        border-bottom:2px groove #000; 
        line-height:1;      (was "38px")
    }

  11. #11
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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:

    Code:
    h3 {
    	text-align:right;
    	margin-top:12px;
    	margin-right:140px;   (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. #13
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    You're very welcome. Thanks for the feedback. Good luck in the future.


Tags for this Thread

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
  •