I have Javascript codes building a small div layer with CSS. The div layer has inline style codes to display the way I want. I notice the div layer looks distorted on some microsites. Are there ways to write the inline style code from being overwritten by other CSS?
Thanks in advance
Inline styling cannot be overwritten by a stylesheet. However, if there are properties in a stylesheet that aren't written inline, and therefore nothing is conflicting with one another, those styles will also be active.
The reason for distortion could be that other CSS files from these 'microsites' share similar naming conventions for this particular element. If this is the case, the stylesheets from these microsites are applying their styles that are otherwise unfounded within your inline styling.
Related
I'm looking for an easier way to get all the styles applied to a particular element so that I can re-use them in my project.
I've checked the chrome tool and there is lots of clutter on the right side of the selected element.
Is there any extension or hack to get styles for an element quickly?
I have a div and apply the latest version of tinymce (4.2.5) to it, including some of my websites stylesheets.
When I use the editor old fashioned way the loaded css is only applied to the div I'm attaching tinymce to. Like a charm.
But I want to use the inline: true option. When I use that all the css is applied to the complete page of the application, not only the div.
Is this expected behavior? Or should I look for another approach? My main reason to use the inline feature is that it keeps the toolbar visible on scrolling. Unfortunately tinymce loads different sets of html for the inline and fixed toolbar (for example, the menu bar and icon/tool bar are separate div's. On inline they have a parent div) so just applying the same or similar css isn't working out.
Anybody has any tips or tricks for me? Or should I accept the limitations of one or the other?
You will have to accept the limitations.
Both editor modes need different css for the UI and in inline mode it seems to be necessary to apply it to the complete page (even though you don't like that).
I got a JSF page which has a <rich:tooltip> as well as an arbitrary component with a title attribute.
Those two do neither look, nor act in the same way.
HTML title attribute has rounded corners, a black border, a smaller font and does not show directly on mouseover.
Do you have any idea, how I can achieve a more similar behaviour on both tooltips? I thought of CSS styling via the styleClass option of <rich:tooltip>.
The appearance of #title depends on the browser and OS, you cannot style it with CSS. You can try making the tooltip look the same but on a different computer they might be different anyway.
In CSS, there are pseudo elements like "before" and "after". That creates virtual elements before or after an element.
Container pseudo element?
Is there a "container" pseudo element?
Problem example 1:
I need to create 15 borders around an element (I know this particular example can be done by using box-shadow).
Problem example 2:
I need to create 15 transparent background colors on top of eachother.
A lot of unnecessary markup
I know that is possible by adding containing divs, but that creates a lot of unnecessary markup.
The old CSS3 Generated and Replaced Content Module had a proposal for an ::outside pseudo-element which seems close to what you describe, but there are no implementations, and the module itself is slated for a rewrite... someday.
In other words, there's currently no way to achieve this using only CSS, and there probably won't be any for a while.
Of course, there are ways to emulate wrapping elements using JavaScript to manipulate the DOM, but that's just about the only way you can achieve this besides hardcoding in the extra markup. Some trivial jQuery methods with respect to the fabled ::outside pseudo-element are described here:
Enable support for CSS3 ::outside pseudoelement
Working on a rather small, and simple layout, I decided to use Meyer's CSS Reset rules to clear some of the expected discrepancies between browsers. All was working fairly well until I decided to add a few paragraphs into a couple nested divs.
Once I placed the paragraph-tags within the second nested div, the background images of both the parent, and the grant parent divs vanished in IE7.
Removing the paragraph tags (and going with untagged-text) returns the background images. Additionally, leaving the tags and removing reference to the reset.css file restores the background images.
Obviously I don't want to go with either of those routes to solve this issue. Any CSS gurus here know what is taking place?
Demo: http://www.sampsonresume.com/projects/patriot-depot/
It looks like a version of the disappearing content bug in IE.
Add zoom:1 to div.pd_horiz_content and div.pd_horiz_content_b. That will invoke 'hasLayout' in IE and your background will show up.
You can also invoke hasLayout by adding a dimension (width:960px) to the divs. This would probably make more sense in your case since your divs have a fixed width based on the background images.
Oddly enough, when I remove the following rule from the reset.css file, the issue is resolved:
background:transparent
This rule is applied to the first large block of matched elements, so I'm not sure the implications it will have in the long run. Hopefully there's a better solution, as I'm a little uneasy about editing Meyers' reset.css in order to "fix" my problem.