Help with CSS issue

[rctneil]

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

[noonnope]

	<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

<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 ...

[rctneil]

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

[Paul O'B]

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.

#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

td a:nth-of-type(2)
{
margin-top:1em;
display:inline-block;
}

(Won't work in older browsers though because of nth-of-type)

[noonnope]

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...

[rctneil]

That's the bottom margin on the p element.

#content p {margin:0.6em 0 0}

Vertical margin on inline elements is not applied.

Try this

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?

[rctneil]

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% 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.

[noonnope]

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.

[Paul O'B]

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.