SitePoint Sponsor

User Tag List

Page 4 of 4 FirstFirst 1234
Results 76 to 84 of 84
  1. #76
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys, Back again.

    I have read through the last few posts and thanks so much for all that. I have altered that page to use pixels if possible and I seem to understand it all a bit more now.

    BUT,

    I have two new issues:

    1.) On this page: http://log.neiltonge.co.uk/newsletter.php What is causing the gap between the bottom of the text and the table below?

    2.) I want to make the gap between the two download format links be larger so I ahve used:

    [css]td a:nth-of-type(2)
    {
    margin-top: 1em;
    }[/css]

    But this does not seem to be being applied?

    Thanks

    Neil

  2. #77
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    	<p>Feel free to use the form on the right hand side to register for newsletters and we will e-mail them to you as they become available.</p> 
    	
    	<table> 
    	
    <tr><td>August 2010</td><td><a href="newsletters/newsletter14-08-2010.pdf">PDF</a><br /><a href="newsletters/newsletter14-08-2010.docx">DOCX</a></td></tr>&nbsp;</li><tr><td>April 2010</td><td><a href="newsletters/LOGApril10.pdf">PDF</a><br /><a href="newsletters/LOGApril10.docx">DOCX</a></td></tr>&nbsp;</li> 
    	</table>
    should be

    Code:
    <p>Feel free to use the form on the right hand side to register for newsletters and we will e-mail them to you as they become available.</p>
    <table>	
    <tr><td>August 2010</td><td><a href="newsletters/newsletter14-08-2010.pdf">PDF</a><br /><a href="newsletters/newsletter14-08-2010.docx">DOCX</a></td></tr>&nbsp;</li><tr><td>April 2010</td><td><a href="newsletters/LOGApril10.pdf">PDF</a><br /><a href="newsletters/LOGApril10.docx">DOCX</a></td></tr>&nbsp;</li> 
    </table>
    whitespace, whitespace ...

  3. #78
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whats strange is whilst I was waiting for a reply, I did some other bits and pieces on the page and the issue resolved itself and the whitespace is still there

  4. #79
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rctneil View Post

    1.) On this page: http://log.neiltonge.co.uk/newsletter.php What is causing the gap between the bottom of the text and the table below?
    That's the bottom margin on the p element.
    Code:
    #content p {margin:0.6em 0 0}

    2.) I want to make the gap between the two download format links be larger so I ahve used:

    [css]td a:nth-of-type(2)
    {
    margin-top: 1em;
    }[/css]

    But this does not seem to be being applied?

    Thanks
    Vertical margin on inline elements is not applied.

    Try this

    Code:
    td a:nth-of-type(2)
    {
    margin-top:1em;
    display:inline-block;
    }
    (Won't work in older browsers though because of nth-of-type)

  5. #80
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    Whats strange is whilst I was waiting for a reply, I did some other bits and pieces on the page and the issue resolved itself and the whitespace is still there
    nothing strange there, your html editor is playing tricks on you learn to better use it or change it.

    and PDF and DOCX should be on the same line, have a .85em font size and be separated by a | with some spacing both sides of it. and loose the table, you don't need it


    you seem to code this site with disregard for older browsers but still asking for support of those. strange...

  6. #81
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That's the bottom margin on the p element.
    Code:
    #content p {margin:0.6em 0 0}
    Vertical margin on inline elements is not applied.

    Try this

    Code:
    td a:nth-of-type(2)
    {
    margin-top:1em;
    display:inline-block;
    }
    (Won't work in older browsers though because of nth-of-type)

    Excellent, Thanks, I didn't realise vertical margins didn't work on inline elemtns.

    One thing, If I wnated to get a thin vertical line to the right of the table to separate the content on the left and right hand sides of this page. What options do I have?

  7. #82
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by noonnope View Post
    nothing strange there, your html editor is playing tricks on you learn to better use it or change it.

    and PDF and DOCX should be on the same line, have a .85em font size and be separated by a | with some spacing both sides of it. and loose the table, you don't need it


    you seem to code this site with disregard for older browsers but still asking for support of those. strange...


    I can't see how the issue was caused by the text editor? I think it must have been something I removed from the code before your reply appeared.

    I did originally have the two download links on the same line but I thought it looked confusing.

    Yes, I am sort of disregarding older browsers, not 100&#37; but slightly as I wanted to try out some of the newer HTML/CSS3 elements I have learnt from the live courses. I have added HTML5Shiv and IE9.js to sort of fit these features into the older browsers. Yes, they will fail in those browsers without javascript but those people will still be able to browse the site.

    If you have any other recommendations then, let me know as I am 100% open to suggestions and as always, still learning about the best practices.

  8. #83
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    trust me, it was your text editor. the genie story only works in Agrabah

    i was removing two whitespace nodes to make the problem go away. use developer tools browsers have to offer to examine and live model your page, and only after that post about possible problems you have. this is one suggestion.

    another suggestion would be to drop elements like <section>. html5 is only good for play. css3 is not good yet. one should harness html 4.01 and css 2.1 at the present, as these are the ones you'll still be using most likely for at least the next couple of years.

  9. #84
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rctneil View Post
    One thing, If I wnated to get a thin vertical line to the right of the table to separate the content on the left and right hand sides of this page. What options do I have?
    You could use the border-right on the table assuming you weren't going to keep that red border.

    However if you want a vertical line that keeps equal with both sides then the easiest solution is to wrap the table and the right column in a parent div and just use repeating gif to paint the middle border. It will then always be as long as the longest column.


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
  •