I am using the tint template in R Markdown for an HTML rendering. I don't think that this issue is specific to R or R Markdown, though. I think the fix can be accomplished with CSS or HTML. Although, I would guess that Dirk, Jon, or JJ, Yihui, or Dave could probably tell me how to fix this properly in R Markdown since they authored or contributed to the development of tint.
How can I modify this to prevent the margin notes from affecting the spacing below the table?
I did try setting the table tag with the styles align: left; and float: left; to see if that would work. Neither impacted the spacing at the bottom.
Here is the table footer with the margin note as HTML script:
<tfoot>
<tr>
<td style="padding: 0; " colspan="100%">
<span style="font-style: italic;">Note.</span> <sup></sup> This is the data dictionary based on the data adapted from CFPB (n.d.)<label for="tufte-sn-3" class="margin-toggle sidenote-number">3</label><input type="checkbox" id="tufte-sn-3"
class="margin-toggle"><span class="sidenote"><span class="sidenote-number">3</span> Consumer Financial Protection Bureau. (n.d.) <em>Consumer complaint database API docs</em> [data set and code book]. Office of Civil Rights. Retrieved
April 28, 2021, from https://cfpb.github.io/api/ccdb/index.html</span> and Rozzi (2021).<label for="tufte-sn-4" class="margin-toggle sidenote-number">4</label><input
type="checkbox" id="tufte-sn-4" class="margin-toggle"><span class="sidenote"><span class="sidenote-number">4</span> Rozzi, G. (2021). <em>Data & functions for working with US zip codes</em>. GitHub. https://github.com/gavinrozzi/zipcodeR/</span>
</td>
</tr>
</tfoot>
I realize it's not all that pretty. While I will likely modify the HTML directly, I didn't write it. It was generated through the use of R Markdown. I typically find that tables can be far less painful, for how often I'm using it, to adjust in the script.
When I render the HTML, there's this huge gap between the table and the next line of text. This is what's happening in the HTML when I run the script:
However, when I use the margin outside of the table, I don't have this problem. (Don't mind the writing; it's definitely not proofread.) If you look, you can see that the second margin note in this image is not impacting the next <p></p>.
Please let me know if there is other information I could provide to get help faster.
It may not be right, but it works. I took the footer off the table and added a block with the footer content. Issue solved. I don't know why I didn't think of that sooner. (sigh)
Related
Disclaimer: I'm super new to this and know very little about the technical terms. I might just not know what to search for in order to find the answer I need. In that case I would really appreciate someone just pointing me the right way.
Now, the problem/question:
Is there a way to avoid things like this:
<table>
<th>
<tr>One </tr>
<tr>Two</tr>
<tr>Three</tr>
</th>
</table>
displaying as if you typed this
<table><br>
<th><br>
<tr>One </tr><br>
<tr>Two</tr><br>
<tr>Three</tr><br>
</th><br>
</table><br>
because using "enter" in the text-box when writing a post is automatically rendered as a line break. Is there something you can put at the beginning of a post to overwrite/ignore this kind of global "enter = line break" thing for that post? As is, I have to type in tables and other things in this format to make it display correctly:
<table><th><tr>One </tr><tr>Two </tr><tr>Three </tr></th></table>
It gets a little hard to navigate after a while 😅
(I can only use things that can be written directly into a post)
I'd really appreciate any kind of help - even if it is a plain and simple "nope, can't be done" - then I at least know I can stop searching ^^
Thanks!
Newlines in HTML code should not matter (more precisely, they are just whitespaces) and they definitely do not render as newlines "by themselves".
If the newlines in yout HTML render as newlines on your screen, there must be something else in your HTML or CSS code that causes this. For example the <pre> or <code> HTML element or white-space:pre in your CSS. All of these (and a few other ones) instruct the browser that newlines in HTML should render as newlines on the screen.
I'm trying Slim templates in a new project (after using Haml for quite a while). While overall experience is great, I've run into a problem with spaces being always inserted around tags which normally use display: block
Say,
ul.ampm
li.am am
li.pm pm
generates
<ul class="ampm">
<li class="am">
am
</li>
<li class="pm">
pm
</li>
</ul>
while
.ampm
span.am am
span.pm pm
generates
<div class="ampm">
<span class="am">am</span></span class="pm">pm</span>
</div>
Normally it's not a big issue, but we use responsive layouts which applies display: inline-block to li tags; obviously, having whitespace between them breaks the layout.
I'm aware of
Slim::Engine.options[:pretty] = true
option (and turning it on does remove the offending whitespace), but it makes all generated source hard to read, not just the part I'd like to fix.
< and > in Slim seem to do the opposite to what I need - they're intended to be used for adding whitespace around inline tags.
So...
is it possible to remove whitespace around a single block tag in Slim similar to HAML whitespace eaters? (Without the impact of turning off the pretty option, that is)
if not, is it a fundamental Slim restriction ("by design") or something which is on the roadmap and would be potentially implemented in the future?
Much appreciated.
I worked around this by reverting back to inline HTML in the critical places. For me, it was adding a collection of options to a select:
select
- my_collection.each do |item|
<option value="#{item.id}">#{item.name}</option>
I can put up with this in the few cases where it really matters (as it did for me in the option elements). But if you need better whitespacing throughout your code, I think you're out of luck.
is it a fundamental Slim restriction ("by design") or something which is on the roadmap and would be potentially implemented in the future?
I'm going to go with "no" for both of those. It looks like the Slim team just implemented a naive algorithm and didn't look back. Case in point, this quote from the GitHub issue tracker:
The pretty renderer is not working well under some circumstances since Slim's focus lies on performance. If you have time please provide patches for the pretty renderer of the temple project https://github.com/judofyr/temple and also provide test cases.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am using html in servlet to develop a registration form but I am getting this huge space between header and my table, I don't know what is wrong, I tried setting margin to zero but nothing is happening please help. I am uploading both files, first one is .java file and second one is browser output.
Wrong break tag, it should be closed
<br/>
My guess:
Remove them, they are used wrong, you cannot use them inside a table, and outside a td tag. That should solve your problem.
And some tips:
Why you are using servlet to generate html? This way you will have big problems in future. You should be using some viewResolver, like Freemarker, jsp or velocity.
Tag center is "deprecated", don't use it. Replace it with a css styles.
Your table is missing tbody tag, it should be
<table>
<tbody>
<tr></tr>
</tbody>
<table>
But writing forms in a table is an antipattern. Here you can find some bootstrap example, how to do it right using only classes and css:
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php
Use FF or Chrome developer tools , Firebug(FF), F12 in Chrome. Thanks to them you will find your problem.
If you are using Chrome, click F12, you will have an window popup at the bottom of page. First tab is Elements, click on mignifying glass and select your table. You will see DOM tree of your app. When you click on a tag you will see how many space it takes: it's size, paddings and margins, you can even manipulate those values on fly. When you will find the reason, you just need to create some CSS to fix your bug. That will be easy to google.
Use "<h1 style="margin:0;">" instead of "<h1>" for reduce margin around title.
Use "<table border="0\" height="100%" cellpadding="0" cellspacing="0">" instead of "<table>" for reducing paddings around the table.
These two modification may reduce space between title and table.
The center tag is deprecated. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
Using tables for formatting is no longer a best practice.
Try something like this instead.
<h1>Registration Form</h1>
<form>
<p><label for="id">ID: </label><input type="text" name="id" /></p>
<p><label for="fName">First Name: <input type="text" name="fName"></label></p>
</form>
I'm asking you to help me for solving this mysterious issue:
When I visit this web page http://www.legrandclub.net/members using IE8 it's displayed a double border bottom below search field. How is it possible? I've checked a lot of times CSS rules but I haven't found any rules that can be the reason of this issue.
Can you help me?
Thanks
First search the following lines. It's invalid to redefine the same id.
<div id="container">
<div id="content">
<div id="container">
<div id="content">
line 1033 tr is not finished properly
also line 1059 </div> this closing div appear to be not necessary.
I see a couple problems with your markup which could be causing the problem.
Only use an id once. #eric-fortis said it right.
You have a table inside of a div inside of a form. Use tables only when you want to show an actual table, and if you're going to use a table, make sure to close the table! (</table>)
You have a form inside a form, this will never fly.
Your id usage is confusing. If I can't come in and find the problem that means no one on your team can (yourself included).
Once you fix those problems you might be able to find the mistake.
Both Eric Fortis and citizen conn have good answers ... the more general answer is to upload or paste your code to http://validator.w3.org/ or point the validator at your page's URL.
I'm not a nit-picker for 100% correct validation, but your HTML structure needs to be valid or you'll have no end of CSS mysteries.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.legrandclub.net%2Fmembers&charset=%28detect+automatically%29&doctype=Inline&group=0
Validation Output: 7 Errors
I'm using a extension for Firefox to check for 508 compliance issues.
I'm getting the following two errors which I have been unable to resolve on each report:
Fail: Data tables must use th elements to indicate header cells for the first cell in all the columns or rows.
Fail: For complex data tables, the td elements must have headers attributes that point to associated th header ids.
The addon highlights the following table cell for both errors but I can't find anything wrong with it:
<table cellpadding="5" width="100%" style ="text-align:right" class ="ecoRow" summary="Budget History" title="Budget History">
<tr> <th id="date_range" colspan="7" style="text-align:center;">From #params.start_date# To #params.end_date#</th></tr>
What to do?
I'm using this firefox extension and ran into this same issue today.
It appears that the tool wants to see some text inside the element.
Other dev on the team replaced plain text header labels with buttons and anchors. anchors were passing with the tool, but buttons weren't. We already had the scope defined and all the closing tags (I checked).
Results may differ, but this fixed our issue.
Note that the passing lines have actual text between tags.
Fail: <th><input type="button" text="blah"></input></th>
Fail: <th><img url="blah.jpg"></img></th>
Pass: <th>blah</th>
Pass: <th><span>blah</span></th>
Pass: <th>blah</th>
I see several things about the table that can be improved (inline styles, lack of <tbody>, etc), but header identification is not one of them. Then again, I can't see the entire table. But it looks like the plugin evidently doesn't understand a colspan. Try adding a scope="col" to the header.
For an alternative plugin, try the WAVE toolbar: http://wave.webaim.org/toolbar
UPDATE: Now that I see the table via the pastbin link in the comment, I see some serious problems. First and foremost, there's no closing table tag. You have some rows wider than others. You have an empty row that has has been inserted for display purposes. Don't do that, use CSS.