I'm having a problem finding out which css is actually applied to an element when using Firebug 1.11.2. I'm setting the paragraph font from my own css file (d.css), which is meant to over-ride 3 system css files (a.css, b.css, c.css).
I click on the html tab, and click on the <p> element that I'm
trying to debug.
The style window on the right now shows the applied styles from a.css, b.css, and c.css, but not d.css. No paragraph font is shown, but I can change the paragraph line-height, for example, from a.css.
If I click on the css tab, and find d.css, I can manually change the font and font size and see the changes applied to the <p> element in the main window. However, the style window on the right still shows no font.
Is there some magic to showing all the applied styles?
Try using another add-on for viewing your CSS code, for instance:
https://addons.mozilla.org/en-US/firefox/addon/web-developer
You can try other add-ons.
A bit dumb, but probably worth answering rather than withdrawing the question...
turns out that you have to be rather more careful when selecting the html element than I'd realised. My text was actually in a span:
<p>
<span class="foo">bar</span>
</p>
The problem was simply that selecting the <p> element or the bar text doesn't show the styles applied to bar - you actually have to select the entire span element by clicking on the span word.
Thanks.
Related
I'm having trouble getting a span (or i) that I'm having represent a particular icon using FontAwesome styles to be the color I want it to be.
The weird thing is that the Chrome inspector shows it to "be" the color the CSS says it should be, and it shows that the rule is correctly implemented, but in the browser it appears as the color of the surrounding div, which, again, Chrome inspector shows to be correctly overridden.
Fontawesome works fine, using CSS styling to set color, in other parts of my app.
Has anyone run into any quirks with fontawesome and CSS styles? Under what circumstances would Chrome inspector show the font as one color but it would display as another?
If you can help, would appreciate. If not, that's fine, but don't down-vote me, if you would.
Assuming I understand your problem, you don't have any text in the <span>.
But even if you add some, you're hiding the parent element by calling:
#la-tarifa-es{
display: none
}
So all of the children will be hidden as well regardless of how you target them.
The answer was that FontAwesome works by adding a ::before to the SPAN (or I). So, apparently, the CSS rule for the containing DIV was operating on that, not the CSS rule for the SPAN. When I made a very specific rule for SPAN::BEFORE it worked.
Consider the following markup:
<p>spaceflight</p>
<p> </p>
<p> </p>
<p>spaceflight</p>
When user selects the whole block of text (e.g. using [Ctrl+A]) and applies font formatting in CKEditor the resulting markup is something like this:
<p><span style="font-family:comic sans ms,cursive">spaceflight</span></p>
<p> </p>
<p> </p>
<p><span style="font-family:comic sans ms,cursive">spaceflight</span></p>
i.e. font is not applied to the empty paragraphs.
Steps to reproduce the problem:
type a couple of lines of text, use [Enter] to insert empty paragraphs in between the lines
use [Ctrl+A] to select the whole block of text and apply "Comic Sans MS" font to the selection
use [Source] to check the resulting markup and see that the empty paragraphs are missing the font style
switch back to editing mode and type inside one of the empty paragraphs, the new text indeed uses default font
Is there any known workaround allowing to make CKEditor to apply formatting to empty paragraphs inside the current selection?
The problem here is after user has explicitly applied font to the whole block they expect the whole block to be in that font, but when they use cursor and navigate to one of the empty paragraphs and start typing there it's a different font altogether
So the problem is actually different - it's not related to data, but to these empty blocks not preserving styling inside the editor. There's a ticket for this somewhere, but the solution is not trivial. The problem is that when you apply style to an empty block this structure is created (inspect the DOM of the editor):
<p><strong></strong><br /></p>
The <br> there is for making the paragraph visible - it's so called bogus br. Otherwise, the paragraph would have 0 height.
Now, when you try to place your caret there (using mouse or keyboard) the browser finds an empty strong element, which is 0x0 and a paragraph which has non-zero width and height. Where the browser puts your caret? In the paragraph.
The same situation happens if you apply style on an empty selection and move your caret - there's still an empty inline element out there, but you won't be able to move your caret back to it.
It is possible to workaround this and there's even more than one way. Unfortunately, none is trivial.
If you want to attempt to implement a hack which should solve the most common cases, then it should work like this:
Watch the selection changes (editor#selectionChange).
If selection is collapsed and it is placed in an empty block (mind bogus brs) and there's an empty inline element, move caret there.
CKEditor's selection engine is able to place caret in an empty inline element (native implementations in Webkit and Blink are not able to do that).
I need a wee bit of help with css formatting on my website. Please see the provided screenshot, which relates to http://www.zerogravpro.com/.
css problem http://zerogravpro.com/temp/zgp_formatting.jpg
Problem #1: My orange-background box in the Testimonial sections goes quite a bit lower than I want it. How do I force it to move up, directly beneath the word "Testimonials"?
Problem #2: See the nice "More" button with the green ball and arrow in it? When I tried to use the same exact style down in my Testimonials box, it shows up as just a boring link. I want it to look the same as the button. I'm guessing that the style only gets invoked when it has the right hierarchy, but how can I fix this without messing up any other styles?
I provided the link to my website, so you can view it in Firebug and see exactly what the styles are, etc. Thanks!!
The Box below Testimonials is so low because there are two <br>-Tags below this line:
<p class="dotline"></p>
Remove them and it will fit.
And for the more button, you should add the class more to this <p>-Tag (untested):
<div id="testimonial6" style="">
<p></p>
</div>
The styles describing the button-like more-element is applied to a paragraph with class="more". However, the paragraph also includes a lot more rules than just the button, so you should try to extract the CSS regarding the button in order to make it reusable.
When it comes to positioning of the lower link, if you want to place it near the header you really need to move it closer to the header in the DOM.
There's an empty p element with the class of 'more' right above the testimonial box. Remove it and the testimonial box will be pulled up. Give it an appropriate margin top, and it will look good.
As for the button, here's my attempt at it -> http://jsfiddle.net/joplomacedo/c3vqh/
You can see the issue here:
http://referrals.users34.interdns.co.uk/
It works in all other browsers, it is using a custom font that is being generated by PHP (Base64 encoded). There is no javascript included on that page and the text seems to be just changing colour. However, not all the text with that custom font is disappearing, only the body text and the text above the table (Well, most of it). The navigation and grey text stays the same.
I am using the reset CSS:
http://meyerweb.com/eric/tools/css/reset/
I have tried Googling but couldn't find anything.
If anyone could help that would be great as I have absolutely no idea what is happening!
UPDATE: Happens in IE8 too.
Regards,
Connor
the culprit is color: transparent from div:focus in style.css (line 59)
when you click the text, IE is giving the focus to the div you click on which makes the text transparent per the style above.
you can remove that style or set the color explicitly for the elements that disappear.
I've very new at this. I appreciate any help I can get with this. I haven't found an answer on the internet yet. (At least, not one I understand!)
When I use blockquote in WordPress, it shows up on the right side of the screen. Sometimes, I want it to appear on the left side of the screen. How do I do that? Here is the blockquote (below) I'd like to have on the left side of the screen. It currently appears on the right side of the screen.
<blockquote><p>Living a better life is less about things and more about being thankful.</p></blockquote>"
As the respected members said above, also if you have a plugin such as firebug on firefox or in your chrome browser, right click the blockquote and choose "inspect element". Then you will see all the rules(i.e effects) applied to that element and you can show/hide them to see their effect on the element which will give you a better understanding of what the rules are doing to your element.
Cheers.
<blockquote style="text-align:left;">Test</blockquote>
This will change it on a quote-by-quote basis.
A better solution is to open your theme's style.css file, search for blockquote, and replace the text-align:right; with text-align:left;. This will change the behavior or a blockquote site-wide.
What happens if you wrap up the blockquote element in it's own div element? Such as this:
<div>
<blockquote>
<p>Living a better life is less about things and more about being thankful.</p>
</blockquote>
</div>
You would then possibly be able to control the blockquote as a div block element using float:left, setting the width larger so that it gets moved below any elements to it's left, or using other means of absolutely positioning it.
For the theme that I am using, Twenty Fourteen, the correct answer would be to use:
<blockquote class="alignleft">This is my quote</blockquote>
I found this by using the Chrome devtools to inspect the example on the demo. Since this theme has a special class with nice formatting for the aligned blockquotes it is better to use this than to override the CSS with style settings. Note that while inspecting the element you get direct links into the CSS that can be used to check which other classes the theme has - quite useful! You may need to read a bit about CSS syntax to interpret it though.