I have an entire page that will be PHP included onto an already established website. The website will include my site after the <body> tag on their own site. I do not have access to the <head> section of the page. I am including my <link> and <script> tags in my page (so after the <body> of the parent page). I can change the title dynamically with javascript after the fact.
However, the CSS from the parent page is causing some interference with some of my elements that aren't explicitly styled. I would like a blanket way to stop CSS from cascading to my own elements without using an iframe. Is there a CSS reset that will work? How about a javascript solution? Would HTML5 scoped styles fix this issue eventually?
I can't give you a good answer. The closest I can think of is to take one of the CSS Reset scripts and apply them to your root <div>.
It's still a long list of things you're cancelling but at least it's maintained by someone else...
You can try by wrapping content and appending CSS rules only to wrapped content, for example.
CSS
#wrapper1 .className{/* RULES */}
#wrapper1 div{/* RULES */}
#wrapper2 .className{/* OTHER RULES */}
#wrapper2 div{/* OTHER RULES */}
HTML
<div id="wrapper1">content 1</div>
<div id="wrapper2">content 2</div><!-- CONTENT YOU APPEND LATER -->
Another solution, not the best1 is maybe to use jQuery and replace all class-es or ID-s in body when content is changed, here again you should define CSS before.
There is one thing I must note, in my experience appending HTML as pure text (like innerHtml='html') get right CSS rules in Google Chrome and Mozilla, but on IE you need to use proper JS and append content differently to get those CSS rules used. By different I mean like creating element should really be creating new element with JS function.. that was before I am not sure anymore if this thing is changed.
Related
Basically what i want to do is grab all CSS that is referenced in an external stylesheet e.g <link rel="stylesheet" href="css/General.css"> and append it to any existing styling for each HTML element in my page. (make all CSS inline)
The reason for this is because i need to call .html() to grab a div and send to server to be made into a PDF. The downside with this tool is that it only recognises inline CSS.
Are there any ways to do this?
Edit: the question that was linked to mine as a "possible duplicate" spoke only of putting everything in the <style> tag. while that may be useful, im mainly concerned with loading into the style="" html atribute
In the past I've used window.getComputedStyle(element); for this purpose. It will return a map of all styles applied to the element, which you can then loop across and apply as an inline style. I wouldn't apply them to the actual DOM if you can avoid it (just create a document fragment / concat it in the style of the string you're sending up). It will be a performance nightmare to actually apply that many inline styles to an element.
Using computed styles still might not be enough, as there are vendor prefixed styles in the user agent stylesheet. If you send up markup from Firefox to PhantomJS(webkit), you will obviously not get the same looking element.
I am a user of the content management system (TYPO3) that does not allow me to add something to the head of the html document. Is it possible to define a css style sheet and script in the body so that I do not duplicate corresponding styles and javascript everywhere in the html code that I add?
Technically, it's not valid to place a style tag inside the body, but most, if not all browsers will actually implement it.
I've always been under the impression that a link tag should be inside the head according to the specs, but given a quick test, it looks like using a link tag inside the body validates as HTML 5, so that might be an option. See Alohci's comment about this below.
And yes, you can place a script tag inside your body.
You can add a script in the <body>, but css should be in the <head>.
Major browsers recognize <style> in the <body>, but it's not valid.
Use Content Element of HTML type to do that with TYPO3 backend if there is no other possibility.
Of course as suggested in other answers you should not add CSS in the body, so maybe it will be just better to use inline styles for required elements?
<div style="color: red">title</div>
I have got some detail content pages on my site where I don't have the complete control over the html content that is displayed in a certain div. Now when the content of the external resource contains invalid html, like having no ending my navigation in the right-bar is also italic. I don't want to use iframes, like ebay, and there is probably other ways to fix this. Hope on an answer.
<html>
<body>
<div id="page">
<div id="content">[content of external resource]</div>
<div id="right-bar">[My navigation]</div>
</div>
</body>
</html>
A simplified structure of my page is above.
I hate to tell people to use Tables when they aren't necessary, but in this case, I feel that it could solve your problem.
The issue that you are facing is one of the browsers well-formed html check, so, you could have some browsers that work as you hope, and others that work the way that bothers you, as each rendering engine is going to perform it's own well-formed html check flavor.
If you wrap it inside a td, then I don't think that it will be able to bleed styling the way that you are seeing. Just a thought. The reason that a td container is going to help more than the div container that you are currently using is the following: Since you are wrapping their stuff in a div, and they are most likely wrapping their own stuff in divs, the browser doesn't know where the mistake is at. It doesn't know where the missing div tag should be inserted. So essentially, div in div in div creates problems for the well-formed html check, as it is not sure which of the tag you forgot. However, div in div in td, that is more distinct. If the td open and closes, then it knows that the missing tags belong to a smaller group of possible elements. In other words, you are making it easier on the well-formed check to do it's job by wrapping it inside different tag types.
This makes sense to me. I hope that I have explained it ok.
I think that there is no other way than using iframes. If you don't use an iframe to host the external content means that the external content will be included in the DOM structure of your page, so unless you parse all the external content code to check all the possible things that should affect your page (and this could be a madness), you will never be sure that your page will be safe from collateral effects coming from the external code.
And even using iframes, you should parse anyway the external content to look for script tags, to prevent any undesired javascript code been executing inside your page.
I am looking for a tag that i can use to mark out a position in the html, which i can then find later using JQuery. However, I need the tag to be as useless as possible: even empty divs and spans can cause the layout to change depending on the CSS rules you set. For that matter, even rubbish tags that html doesn't understand seem to acquire styles from css, and I don't think there is any way to find comments via DOM traversal?
This tag will be used to mark out the start and end of a chunk of HTML to be Ajaxed. I do not want to wrap the whole chunk in a div or span (which i what i'm doing now), because this can affect how the CSS cascades and i want the fact that the html is marked out as a chunk to be completely transparent to the programmer (me).
Any ideas?
edit: I just thought of using empty script tags. Those should be completely inert and invisible. I shall look into it
edit: How could i forget about display: none? stupid stupid stupid
Script tags
Anchor tags <a name...>
Can you use comment tags: <!-- whatever -->? Parser would allow you to distinguish it.
Given that you're talking about trying to use comments or <script> tags it seems that you don't want the content of your "chunk" to be visible to the user? If so, why can't you just wrap it like this:
<div style="display:none;" id="myChunk1">...your content...</div>
That won't interfere with the layout. If you have multiple "chunks" on the page use class="chunkClass" instead of setting the style inline.
Using jQuery you can easily get access to the content, delete the whole chunk, replace it, make it visible, etc.
If one extra <div> or <span> is screwing up your layout there's probably something else going on with your CSS.
[Responding to the title, not the actual scenario] If PHP is involved, <?php ?> makes a dandy no-op tag; e.g.,
<p>No space between this<?php
?>that.</p>
will render as
No space between thisthat.
(except this facility does not do the Right Thing for embedded PHP multi-line tags, so the preceding was coded without any embedded newlines).
I commonly use hidden divs on my pages until they need to be unhidden with javascript. I used to do the initial hiding with javascript too, but now moved away to hiding them with css to guarantee that the hiding takes place (js disabled in the browser). Also there was a latency issue with js hiding (waiting for the js to load).
My problem is that with css, there's still some latency, and so I end up including the style with the markup like below, and I kind of hate doing it, makes me feel like I'm doing something wrong..
<div style="display:none;">
content
</div>
How often do you guys do this? and is there a way I can get the css or js to somehow load BEFORE the rest of the markup?
Thanks in advance
Include the css in an inline style block at the top of the page:
<style>
.hidden: { display: none; }
</style>
Then annotate your div with the needed class:
<div class="hidden"> ... </div>
The upshot of this approach is that to show the element, you don't need to set display to block, you can just add/remove the class from the element with JavaScript. This works out better because not every element needs display=block (tables and inline elements have different display modes).
Despite what another poster said, it's not bad practice. You should separate your CSS into presentational and functional markup - functional one controls such logical things as whether or not something gets shown, presentational one just determines how to show it. There is no issue putting functional CSS inline to avoid the page jumping around.
I may get hammered for this, but in a lot of apps, when I want to avoid this latency I use inline script tags immediately after the content, like this:
<div id="hidden-div">
content
</div>
<script type="text/javascript">
$('#hidden-div').hide();
</script>
Or if you're not using jQuery:
<div id="hidden-div">
content
</div>
<script type="text/javascript">
document.getElementById('hidden-div').style.display = 'none';
</script>
At first this seems clunky; however, there are a couple of reasons why I take this approach:
The hiding is immediate (no waiting
for the entire DOM to load)
People with JavaScript disabled will
still see the content, whereas if we
hide it with CSS there is no way for
non-JS users to make it visible
again.
Hope this helps!
I would suggest moving your display:none rule to the top of the stylesheet so it's the first or first of a few parsed, though to be honest it would really depend on how many http requests/media resources you have.
You could try throwing the js before the end body tag and making sure the css is at the top, and the css stylesheet that hides those elements is the very first one linked.
Depends on the browser. Opera, WebKit and Konqueror load CSS and JavaScript in parallel (all CSS is loaded before being applied, however).
display:none is the best solution, but you can use inline-css (like in your description) which is directly loaded with the page, if you want to be extra cautious, its bad practice though.