I have a problem where i am doing an ajax fetch of some table rows which i use to replace a table's body.
The problem is that sometimes IE(6/7) decides to forget about all page styles after such an append. (that is to say, it reverts to using styles in css includes at the top of the page, but not styles defined on the page itself)
I have been able to find other people describing the same problem, but no solution. has anyone encountered this before, and was able to solve it?
bonus points if the solution did not involve externalizing all css on the page.
Well, if you mean that you have style tags in the body, they shouldn't really be there, so it's not surprising that some browsers may react badly to that.
If you are replacing all rows in a table, try to replace the entire table instead. The structure of a table isn't really meant to be changed that drastically, so replacing the entire table may very well cause a less aggressive reflow of the page. That may keep it from removing the questionable style tags in the code.
Verify that the code that you are putting in the page is valid. If you introduce invalid HTML code, that may force the browser to change rendering mode. That in turn would require a complete reexamination of the code, which could be a possible explanation why it's throwing away inline style tags.
Instead of a table you could try using div tags that you arrange to form the layout that you want. Replacing some div elements may cause less confusion to the browser than replacing a table or part of a table, which may make the page more stable.
If all that fails, I don't really see any other solution than making the page more robust by not putting style tags in the body. That's something that you should consider in the long run anyway.
Related
Sorry if this makes no sense as am only just getting to grips with WordPress and editing CSS.
I have a calendar plugin which for the most part is pretty standard.
However, I wish to make a minimum height for the elements so if there isn't much text, the format still looks better.
Following tutorials, I am able to inspect the source, make the change, and have the desired effect. My issue is, that if I find the element, it seems the custom CSS makes changes to multiple elements on the screen, I can work round most of this but it effectively breaks a clickable link (Makes it not cover the whole button).
The element part I edit is quite large but here is a chunk of it:
.tribe-common abbr, .tribe-common acronym, .tribe-common address, .tribe-common applet, .tribe-common article,
There's about 50, so I'm guessing my edit is covering too much or that I'm editing an attribute that more than one element inherits?
The only attribute I am setting is min-height, so unsure why this seems to make the clickable button area smaller? The button itself stays the same, but I can only click it right at the top.
The plugin I am using is a free one called events calendar. And for the most part I am able to edit the way I've described, I am just struggling to get this one to work and thought it might be the giant list that's causing it. Or should I say my lack of knowledge
Thanks
I am not sure if i get the issue you are describing correctly, but if your changes in css apply to some elements that you don't want them to apply, then you are not precise enough with your selector.
For example, the element you mentioned in your text contains many commas (","), which select all elements separated with comma. This makes your selection wider, not narrowing it down.
If you are not familiar with syntax of CSS selectors, i recommend checking out this resource:
https://www.w3schools.com/cssref/css_selectors.asp
There are so many issues with contenteditable divs and deleting html and/or non content editable content inside editable divs.
Using an answer by the excellent Tim Down here: How to delete an HTML element inside a div with attribute contentEditable?
Using Tim's code, the entire text node gets deleted. I need this to work like any textarea would, deleting character by character and just making sure html elements can be backspaced as well.
I tried the following
else if(node){
var index = node.length-1;
if(index >= 0)
node.deleteData(index,1);
else
this.removeChild(node);
}
But this is obviously not going to work correctly. If I am at the end of the content, things work as expected. But if I place the cursor anywhere else, it's still deleting from the end.
I'm lost at this point, any help is very appreciated
http://jsfiddle.net/mstefanko/DvhGd/1/
After breaking down how google uses contenteditable divs in their google plus user tagging, I landed on a much more reasonable solution. Maybe it will help someone else out.
After adding 1 tag, you can already see a lot of differences in the html browser to browser.
In Google Chrome, a space is added with each tag. The button tag is used. And the chrome-only contenteditable="plaintext-only" is used.
When I backspace the space in chrome, a BR tag is then appended.
In Firefox the BR tag is added immediately with the first tag. No spaces are needed. And an input tag is used instead of the button tag.
The BR tag was the single greatest break-through I had while digging through this. Before adding this, there was a lot of quirky behavior with deleting tags, as well as focus issues.
In IE, more interesting changes were made. A span with contenteditable false is used for the tags here. No spaces or BR tags, but an empty text node.
With all of that, you don't have to copy google exactly.
The important parts:
If you're rendering HTML, do the following...
1. Chrome should use the button tag
2. Firefox/IE should use the input tag
For range/selection you generally want to treat things like tags as a single character. You can build this into your range/selection logic, but the behavior of the input/button tags is much more consistent, and way less code.
IE behaves better in IE7-8 using a span. Just from a UI standpoint. But if you don't care if your site is pretty in old versions of IE, the input has the correct behaviour in IE as well as firefox.
3. Chrome only, use the contenteditable="plaintext-only" attribute on your editable div.
Otherwise, a lot of weird issues happen not only when a user tries to paste rich-text, but also when deleting html elements sometimes the styles can get transferred to the div, I noted many strange issues with this.
4. If you need to set the caret position to the end of the div, set the end of the range before the BR.
for FireFox:
range.setEndBefore($(el).find('br')[0]);
As styling of a website/application gets more complex, and style sheets get bigger, I find that at some point inheritance starts adding to complexity.
You keep scrolling up and down through a long document to restyle a single element. You also need to keep in mind the consequences of any edits to all other tags/selectors that will inherit from it. Things break.
What if instead of that...
Each element's styles were fully contained within its ID/Class
Repetitive/common styles were applied using mixins and variables
(with Sass for example)
That way (my assumption):
Elements would be easier and more intuitive to style. Everything that makes an element look certain way is contained in one place. Elements could be customized as much as possible without breaking anything else - nothing inherits from anything else.
Global styling would still be possible, and easier too. You define global variables and mixins and use them as you see fit. That way, any element can "inherit" exactly what it needs, and nothing else.
Arguably, the resulting CSS would be bigger, but minification and ever increasing internet speed aside - this could make resulting CSS leaner too. Since each element is completely separate from all others (no cascade), you can easily just remove it. While with inheritance we're not always sure if removing something will break something else, so we keep piling up stuff.
Am I overlooking something here? Is there any downside to doing it like this?
Well Felipe is right that you will want to have your font applied to your html body, and do something similar for any other completely global styles. Otherwise your approach makes complete sense and greatly simplifies your design, which is one of anyones main goals.
I am creating a banner that has a form in it to go on various different websites. However, when it goes on other websites it inherits the style from the first one. So sometimes it looks messed up. Is there a way to make it so that the css won't inherit?
Insert it into the sites using an iframe. Other than that it may be tough. You could try explicitly setting every style using very specific selectors. Then it would be hard to override them.
You're probably going to have to reset all styles in a parent container for your form and then place your form in that container.
Also use a unique name for your classes such as .myform-banner-mysitename or something. Even then, it sounds like you're designing your way to a world of pain.
Okay I'm wondering whether there is a way to tell the printer when to create a page-break when printing a HTML page? There must be something, cross-browser compatible, that allows me to do this.
An example would be to create a page break before every element with a class of 'mainHeading'.
Can anybody shed some light on this?
Thanks
You can specify where to put page breaks by using CSS page-break-before and page-break-after.
The values you'll use for this are auto, which is default and always. Auto means that the page will break before or after the element (depending on which method you used) if necessary. Always will always force a page break before or after the element.
A note, there are other values available, however I believe these are the only ones which work cross-browser.