<p> Attribute <span style="color: #EFEFEF"> <accept> </span>
- Specifies the types of files that the server accepts (only for type="file") </p>
I want to see actual HTML & CSS markups in browsers not its rendered version. How can I accomplish that ?
We can see it often on tutoring websites
actually my solution is xmp tag for HTML markups
Related
I'm using joomla (last version) and just added this template in tinymce :
<a href="/test" class="darkimagediv">
<img src="/images/logo2.png">
<div>
<div>
Test
</div>
</div>
</a>
It displays fine in the popup dialog just before inserting, but when I do it is inserted like that:
<p><a class="darkimagediv" href="test"> <img src="images/logo2.png" /></a></p>
<div>
<div>Test</div>
</div>
<p> </p>
Which is very bad.
I'm superuser and text filtering is off in the global configuration. I don't find any cleanup option in tinymce, so I need to find which script modify my html but I don't even know if I must search tinymce or joomla itself.
If you are pasting code Don't use a rich text editor.
The editor is doing what it is supposed to and correcting your incorrect markup. Either way, if you want to insert markup, incorrect or not, then don't use a rich text editor.
I am trying to use CKEditor to edit some html created with a different tool (Quill) that has a different opinion on which tags one should place style attributes.
For example:
<p>
<strong style="color: rgb(230, 0, 0);">TEST</strong>
</p>
When one tries to use CKEditor (standalone V4.6) to change the color of this line of text one gets the following (which doesn't work due to the new color being overridden by the old color)
<p>
<span style="color:#00ffff;">
<strong style="color: rgb(230, 0, 0);">TEST</strong>
</span>
</p>
It seems obvious that any inner tags should get their color style removed when the color is set but I have been unable to find a way to configure CKEditor to do that. It seems like a bug that it doesn't. Is there any way to get CKEditor to do this? (this applies to all style properties, not just color)
If not, is there a way to get CKEditor to normalize the html on load so that all styles are extracted out to spans?
I have few lines of HTML in my database. I want to edit the content in CKEditor. But when I open that in editor the HTML gets break down. The HTML gets rearranged.
Below is the HTML which is in database:
<span class="sec_title">
<h1><span>Web</span> Engineering</h1>
<hr>
</span>
And when I open it in CKEditor the HTML looks likes below:
<h1><span class="sec_title"><span>Web</span> Engineering</span></h1>
<hr />
Some one please help me. I tried config.allowedContent = true; but it is also not stopping the CKEditor to do the modifications.
CKEditor works with a valid HTML only and <h1> is not a valid content of <span>. Quoting CKEditor basic concepts:
CKEditor is not a tool that will let you input invalid HTML code. CKEditor abides by W3C standards so it will modify code if it is invalid.
I am content with my current theme but the photosets are not laying out properly, they are the same width with my photos but say for instance i reblog a photoset with the photos side by side, it wont show up that way on my blog it will show up underneath each other and that is very frustrating since it makes the images blury.
This is my photoset html code. Is there anyway to correct this?
</div>
{/block:Photo}
{block:Photoset}
<div class="entry">
<div class="photosetbox">
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
{block:IndexPage}
<div class="photosett">
{block:Date}
{block:NoteCount}{NoteCountWithLabel} • {/block:NoteCount}{12Hour}:{Minutes} {CapitalAmPm}
{/block:Date}
</div>
<div class="photoset_a">
</div>
{/block:IndexPage}
</div>
Photoset Photos
Your current code specifies that you want each photo from photoset to rendered in the html as an img tag:
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
To render a photoset, you have two options. Either use the built in feature / theme operator. This will give you an iframe with a photoset prebuilt inside it:
{Photoset-700}
Or use a plugin to take your current code and turn it into a photoset.
References
Tumblr Theme Operators - Photosets
Photoset Grid jQuery Plugin
I have a structure which is as follows:
<a href="#">
<footer>
<p>Some text</p>
<h2>A Heading</h2>
</footer>
</a>
This works and displays as expected in all browsers (even IE6 with the HTML5shiv.js) except Firefox 3.6. In Firefox 3.6 the display is completely screwed and if you use Firebug to inspect the DOM, the <footer> element is empty and the elements which should be inside it are outside of it.
All the tags are closed correctly. The <a> is set to display:block in the CSS.
The W3C validator validates the document and does not mark this structure as incorrect.
The spec states that an <a> element may be classed as flow content when it contains other flow content. The <footer> is flow content.
Is it just that Firefox 3.6 doesn't render HTML entirely correctly?
Any ideas for a fix?
Ta!
According the W3C HTML5 Reference the Footer Elements content model is:
Flow content, but with no heading
content descendants, no sectioning
content descendants, and no footer
element descendants.
Which an a element is interactive content.(Which also can be a Flow Content)
So using the a element will validate, if you validate it against HTML5 Standards. Using something like the W3C validator.
So to answer your question, FireFox 3.6 Doesn't conform to HTML5 standards completely. FireFox 4.0 conforms better than 3.6. You can find a list of what elements of HTML5 (and CSS3) are supported by legacy browsers here.
As for the fix I would suggest that you hide the footer from Firefox, and show a div with your content in that is hidden for everything but firefox. I would accomplish this using jQuery CSS Browser Detection using jQuery instead of Hacks is a good place to start.
Firefox 3.6 doesn't implement the HTML5 parsing algorithm; it has an HTML4 "parser", basically.
I think your workaround options are:
Avoid "block level" HTML tags inside the footer.
Put a <span> as a child of <a> wrapping the <footer>.
Put a <div> as a child of <a> wrapping the <footer>.