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.
Related
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 know that you can do what you want, but what is best practice?
Should I use CSS only to make the visual design of my application (colors, hover-effects, backgrounds, text-styles, ...)? Or should I also handle padding for the elements for it?
If you ask me, padding should be set in FXML, because you will then be able to use any CSS stylesheet and apply it to your application to give it a completely new appearance. If you handle padding in CSS and want to use that CSS for another application, it may get very ugly, right?
Some articles claim that you should do as much as you can in CSS. Is this true?
I have 2 modals that I'd like to style differently at the modal-dialog level. I'm not sure how to do it. It seems that if I apply a style that I think should only apply to one, it applies to both of them. One modal template is passed as an HTML string, the other is passed as a script/ngTemplate that is part of the partial page that the controller runs on, if that difference matters. The one that is passed as a string has an ID on the root div, and the CSS that is applied to that doesn't seem to work. But if I have just a .modal-dialog in my css, that is applied to both modals, as I would expect it to. In the Chrome debugger, the #ErrorModal selector is greyed out, so it does see it, it's just not applying it, even with an !important, and I'm not sure why. When either modal is displayed, the HTML looks similar, in that the one that uses the template doesn't contain any of the classes from the parent div that it's wrapped in. One of the main things I want to do is set the background-color of the error modal to white, but leave my other one opaque.
I've looked at this question, but I don't know that it will let me apply styles 'above' the template.
My css-fu isn't very strong, nor is my Angular, but it seems like the specificity should make it apply.
Any ideas?
Turns out there is an option you can pass to the modal, windowTemplateUrl. I haven't found great documentation for it, but I was able to cobble something together using this question as a springboard.
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.
What is the simplest and most elegant way to simulate the hover pseudo-class for non-Anchor tags in IE6?
I am specifically trying to change the cursor in this instance to that of a pointer.
I think the simplest way is to use the hover.htc approach. You add the hover.htc file to your site, then reference it in your stylesheet:
body { behavior:url("csshover.htc"); }
If you want to keep things as clean as possible, you can use IE conditional comments so that line is only rendered users with IE6.
Regarding your request -- I am specifically trying to change the cursor in this instance to that of a pointer -- the easiest way is to specify cursor:pointer in your css. I think you will find that works in IE 6.
Try this to verify (where div can be any element):
<div style="background:orange; cursor:pointer; height:100px; width:100px;">
Hover
</div>
I would say that the simplest method would be to add onmouseover/out Javascript functions.
Another alternative that will fix many more issues in one go is to use IE7.js.
Another approach, depending on what the item is, is to add a non link anchor and set its display to block. Either put the anchor within or surrounding the item you want the pseudo hover behavior on.
Aside:
I actually already needed to swap the image anyhow
Make sure you take a look at Image Sprites. Sometimes its much nicer to use one image and "shift" the image then to use two separate images and "toggle" or "swap" between them. In my experience its been much nice when as user interacts with it is sometimes an advantage that there is a single request for the 1 image then multiple requests for multiple images.
I liked the mouseover/out best since I actually already needed to swap the image anyhow. I really should have thought of doing this with javascript to begin with.
Thanks for the quick answers.
#Joseph
Thanks for that link. I had never heard of this technique before and really like the idea.
I will definitely try that out and see how I fare with it.
If your willing to use JQuery, I would use Set Hover Class for Anything technique.