HELP: Stopping </table> ruin a HTML design - html

I have some BBCode-like code for my forum:
[quote] opens a table, tr, td...
[/quote] closes the table, tr and td...
But when the user writes another [/quote] it adds another </td></tr></table>, and this closes the table the 'forum body' was in.
I know there is probably a simple solution, but what do I put it in so closing a table will not 'break the layout' so to speak?
Div? Span?
Or is it more complex?

Try preg_replace/regex:
preg_replace('/\[quote\](.*)\[\/quote\]/', "<table><tr><td>$1</td></tr></table>", $string);
This would match up to the first end-quote tag.

It's more complex - there is no way to tell an HTML parser "ignore the spec between these two points" without telling it to treat the interior part as raw text ... which won't work because you are generating HTML from this BBCode. You'll need to validate the user-entered BBCode to make sure it is "well formed".
If that simply is not an option, you can hack it by making sure that your forum body is only wrapped in tags that the BBCode to HTML generator does not generate - but that limits you quite a bit, and it doesn't guarantee that spurious close tags won't break your layout.

Related

Avoid line breaks / paragraph gaps in posts when using custom HTML tags

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.

How to teach Intellisense about the existence of <tr> and <td>?

Intellisense has macro for making new table:
Yet when I try to create new row, it forces the <strong> tag:
I actually have to press Esc, otherwise the <strong> is inserted if I type >. I have similar problems with <th>, where <math> is inserted instead.
Is there a way to add HTML element to known elements of intellisense?
VS should totally know about these elements. It sounds like the HTML schema has somehow been corrupted. You can try to delete the HTML schema cache and see if that fixes the problem. To do this, go to %AppData%\Microsoft\Visual Studio\15.0_<InstanceID>\ and remove (or rename) the GeneratedSchemas folder.

How to use the MT:EntryBody tag with additional modifiers for removing content

I'm trying to remove text (with a specific class) from MT:EntryBody. More specifically, I'm trying to remove headers from my summary pages.
On this page, http://www.taconic.com/taconic-insights/microbiome-and-germ-free/, in the middle of the first entry there is text that says "Defining Rodent Health Standards". This makes no sense in the summary (because I'm stripping HTML - obviously). SO I want to just remove this line from the summary. I tried using a tag as well as a CSS hidden class but I can't get this to work properly.
Thoughts?
To clarify, you want to remove this in the entry body?
<h3 class="hidden">Defining Rodent Health Standards</h3>
Then, before stripping HTML, you need to use a regexp to catch and remove those blocs. Then, you can remove HTML.
See https://movabletype.org/documentation/appendices/modifiers/regex-replace.html
The easiest thing you could do is to replace:
<$mt:EntryBody$>
With:
<$mt:EntryBody replace="Defining Rodent Health Standards",""$>
Glad to answer also other questions that you might have!

Cant see my form button or footer on page

I've build a page with a form and for some reason my button for the form and my footer element is not showing up on the page.
I have added a link so you can check out my code. And I know its a HOT MESS! so if you can give me any tips on the css and html please feel free to let me know.
http://jsfiddle.net/jeramiewinchell/j6n0w1tj/
enter code here
Fair point in the edit. I said it was a mess without giving anything positive.
Here are some tips that could improve the HTML (with links for reference):
You should specify a doctype (e.g.: <!doctype html>) instead of having an empty <!DOCTYPE> tag.
http://www.w3.org/TR/html-markup/syntax.html#doctype-syntax
It would be nice to have a <html> wrapping everything, and a <head> wrapping the title and links. I'm not clear if it's technically valid not to have them (the W3C HTML validator will not validate a page without a <head> although it will validate without the <html>), but it's nice and it will help keep things organized.
The links should have a type indicating the mime type (in this case type="text/css").
http://www.w3schools.com/tags/tag_link.asp
Closing empty elements (e.g.: img, link, input) is not mandatory in HTML5, but it is in XHTML. Depending on the doctype that you choose, you should close them accordingly. Using /> at the end is valid for both HTML5 and XHTML, so you may want to consider it.
http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/
Don't nest <p> tags. Paragraphs are block elements that should contain only phrasing content (= not block/paragraph elements). How to fix it: replace <p class="site_section1"> with a <div class="site_section1">.
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
Always close the block tags that you open. For example, you never close the <p class="site_section1"> (altough as I said in the previous point, you should making it a <div>... and then close it). The result in the browser may be unpredictable.
I mentioned in my comment above (sorry, I don't know the name in English), you should avoid crossed tags/nesting of tags. This is incorrect: <label>...<select></label>...</select>, it should be <label>...</label><select>...</select>.
Again, not mandatory but it could be nice to set a value attribute in the <option> tags. If you don't specify a value, the value sent will be the content inside between the <option> tags (that may be what you want in this case).
Don't forget all the code and to close the tags correctly! Things like this: <button type="submit">Save</buttons </div> can have disastrous results (although it looks more of a typo to me).
Don't close tags twice (e.g.: you have </body> twice)
And for the CSS (also with some links for reference):
Avoid unnecessary styling. E.g.: border-radius:0px is unnecessary because 0 is the default value for border-radius (unless you have defined some previous style and you want to overwrite it).
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Specifying units is required for values different than 0. E.g.: margin-left:15 is that 15 in px or em?
http://www.w3.org/TR/CSS21/syndata.html#length-units
The units are optional when the value is 0. Some people find it more readable and better because it is shorter; I personally like them. Your call, but always:
Be consistent: if you omit the units for a zero value, do it in all your definitions. It looks awkward to me to see a padding:0 (without units) next to a margin:0px. It will help you read and maintain the code later.
You could merge many styles together. For example: .zonelist23, .zonelist24, and .zonelist25 are the same, you could define one style only (e.g.: .zonelist_bml30) or set all of them together: .zonelist23, .zonelist24, .zonelist25 { ... }
Not mandatory, but nice: The font-family tag should have several names as a "fallback" system. That way, if the browser does not support the first font, it will go to the next and so on.
http://www.w3schools.com/css/css_font.asp
Just out of curiosity: did you meant to put in the stylesheet .header or is it header? I personally try to avoid classes/ids with the same name as a tag to keep the code easier to understand, but that's a personal choice. As far as I know there's nothing against naming a class like a tag.
One way of having fun and learning (you may now think that I have a strange way of having fun and learning):
Go to the W3C HTML Validator.
Click on the the "validate by direct input" tab.
Copy your code in the box.
Click on the "Validate" button.
View the first error, and read the comments (visit the links for reference).
Fix the code according to what you've read.
Click on the "Revalidate" button.
Repeat steps 5-7 until no errors are found.
(You can do the same with the CSS in the W3C CSS Validator)
Please see this fiddle : http://jsfiddle.net/j6n0w1tj/1/
I have corrected your code.
Kindly follow the steps mentioned by #monty82, who has given an excellent explanation on how to proceed with your code.
Wrong html:
<label>..<select></Label><option></option></select>
Correct html
<label>..</label><select><option></option></select>
Tags like <input>,<br> are self closing tags,close it like <input
type="radio"/> and <br/> not as </br>.
Please make sure whether your opening and closing tags match

Containing markup INSIDE data

Yes, I am struggling with displaying data from our database that CONTAINS markup! One particular field I am displaying has an open-bold tag but no close bold tag. I am trying to 'contain' this markup so it doesn't affect the rest of the page.
The data coming from my database is like this text:
this is soem nasty <b>data
(note the lack of a closing < /b > tag)
If I enclose the markup in a div, the rest of the page is bold:
<div>this is some nasty <b>data</div>
However if I wrap it in a table like this:
<table><tr><td>this is some nasty <b>data</td></tr></table>
All is well! In fact, the DOM inspector for both FF (FireBug) and IE9 show the tree. In the div-case, it shows the open-b tag and the rest of the document contained within it. But the table seems to enclose it.
How can I get this to 'close the b' without a table?
You use a closing </b> tag properly, like any sane human being.
You can use DOMDocument and tidy to try and fix the malformed markup in case you have no control over it, but it's best if you could fix it before it got to your database.
I've read somewhere that HTML Purifier should be able to achieve this. Might be worth trying.
I took a cue from HTML rich-text editors like TinyMCE and built up an IFrame. It seems to contain the arbitrary, possibly-mal-formed content better.