For some reason, i'm not able to paste css code to the "inspect element" window..
Lets say I want to test "font-weight:bold; color: red" and paste it to the element.style, which results with:
As you can see, only the "font-weight" was pasted.
This is really annoying as I was used to just paste the code as is...
Especially if i'm trying a couple of styles from a tutorial or a solution to a problem I found here.
Is it only me? Anything I can do to fix it?
The bug is known and will be fixed in the next release :
https://groups.google.com/forum/?fromgroups=#!topic/google-chrome-developer-tools/RC3i6GW2h28
You could always edit the style in-line for testing:
Right click tag. Click 'add attribute'. Type style=" ctrl+ v "
Not sure if there's a more elegant solution. element.style just adds a style="" attribute anyway.
Related
I am using several fonts on my website , and i don't think all the fonts are loading properly .
is there a way to check which font an element is having as style perhaps a good plug in anyone can recommend ?
I know there are plenty of debugging tools but i am searching for one that gives you all the given styles of an element not just the css code relevant to it .
you can use firebug for firefox , it has a really useful way to inspect html elements ( or even scripts ) .
what you are asking for is present in the computed styling section on the right once you click on the specified element after inspecting using firebug .
you can find it at : https://getfirebug.com/
There are several ways to check this, but one example is to use the developer tools in Chrome. If you view the 'Styles' applied to your text there should be a font-family rule.
Uncheck / check this rule to see if your text changes. If you can see no visual change on the page, then this rule is not applying any meaningful changes to your text - ie. most likely your font is not working.
Using the exact same CSS,
the onclick pseudo effect works fine with this code on one page of same site:
<a data-url="#" class="btn btn-share referral_button">Button Text</a>
(but admittedly it is on a different page with different divs)
but not on another page, where the code is:
<a data-url="#" class="btn btn-share referral_button" onclick="javascript:$find('ABC').set_activeTabIndex(3);">Button Text</a>
instead of behaving as it should it shrinks when clicked - and sort of reverts to how it would look without any css styled - or at least not the correct css styling
I initially thought it was something to do with the onclick="javascript... stuff somehow clashing/over-riding and affecting the CSS from performing how it should but * EDIT it can't be this because I just removed the whole onclick section and the problem still existed :( **
so it must be something else..
the relevant CSS is here: sorry it's long and probably bloated. the most relevant stuff i believe is at the bottom...
https://docs.google.com/document/d/1N7YQ5YuvY6DJn8-nr4sinx4LY7WOS88eErpRHe4IE_g/pub
Seeing as how its an invalid syntax, I would say remove the " \9" from all of your :active and .active statements
Like below:
.btn.active{background-color:#cccccc \9;}
EDIT: Furthermore, (not really relevant to the answer)
Your CSS is a pretty hot mess. (No offence)
You can easily clean that up and make it a lot more manageable.
Plus, it could just be my tired eyes, but it seams like half of it is just repeating and/or overwriting the other half (which goes back to cleaning it up and making it manageable).
Honestly though, your the one working on it, so its as long as you can read it and use it. To each their own. I prefer my CSS quite readable in a dev environment.
The most obvious suggestion is there is something on this mysterious "Other" page, that is overriding the style.
Use a tool like Firebug for Firefox to inspect the elements and its' styles this may give you a hint as to what is overiding the behaviour you are expecting.
Also check that the CSS is the same on both pages if you are not using a common CSS file.
Read up on CSS Specificity, which is could be the root cause of you problem. This could help explain why style b is overiding style a.
It boils down to some difference on the two pages.
Site:
oldfashionedgoods.com
I'm using SquareSpace to build a splash page for my site, and while I've been able to figure everything out, this last thing plaques me.
I'm trying to have it so when you type your email in to the submit field, it uses the font Cutive Mono, just like I'm using for the text above the box.
So far I have this:
input[type=text] {
color: #cc5723;
font-family: cutive mono;}
While I do not want it to be that amber color, I was messing with the color to make sure I was working with the correct item. The text changes color as I type, but the font will not change. What am I missing here?
I'm a complete newb so sorry if this is a dumb question! I already looked everywhere online, but nothing seems to work. Thanks!
I suspect it is being overridden by another CSS style. Try using:
input[type=text] {
color: #cc5723;
font-family: cutive mono !important;}
If that works then it is being overridden somewhere in your CSS.
NOTE:!important should only be used to test. It is not a solution.
I have tried a basic example here: http://jsfiddle.net/n4S3s/ which seems to work fine.
Your other styles have priority over this. Use
font-family: cutive mono !important;
to test.
Yep. important! works. I just wasn't sure of it, but here is the
DEMO
The other answers are correct; other styles in your CSS are overriding this one. I'm not sure I like using !important to force the style; I think of that as a last resort. But it's good for testing.
But more importantly, would you like to know how you could figure this out for yourself? Use the Developer Tools in Chrome (or any browser). Simply right-click the input element and select "Inspect Element". Then look at the Styles panel in the bottom right and you can see what styles are in effect for this element, and which CSS rules they came from. You can also temporarily toggle off any styles, edit the styles, etc.
Stack Overflow is a fast way to get questions answered, but the Developer Tools are much faster! :-)
I have started to use the CSS framework Bluetrip, and I just noticed that for some reason my layout doesnt line up exactly with the browser.
I only have one example to show, http://justcollect.com/ebay_app/index.php/home/index, but if you look closely, my footer doesnt line up with the bottom of the browser. There is some whitespace there.
Any ideas. Thanks.
put as answer so you can accept :)
do you see the effect of the content: "." from your screen.css in your browser(s)?
Have you looked at in Firefox using Firebug - that is a great tool to look at what styling is being applied to each particular DOM element, and where each CSS attribute is originating from, what is inheriting, what is overridden. You can quickly solve a bunch of strange things like that.
In screen.css, change content: "." to content: " " for .clearfix:after, .container:after. The period seems to be confusing the browser.
Use a CSS reset first:
http://meyerweb.com/eric/tools/css/reset/
I was wondering if there is such an addon in firefox where you can test out css paths to check if they are finding the correct element? I was looking for something similar to xpather for xpath locations.
Edit 2019-12-04:
The firefinder addon no longer exists, but you can use the developer console (press F12), and the $$ function to get elements matching a selector, eg. to select all divs: $$('div')
Old answer:
FireFinder does exactly what you are looking for. You can evaluate either CSS, or XPath expressions, it will list the matching elements, and also draw a red border around them.
Yes you can go for FireBug, a versatile Firefox web development add-on.
(source: getfirebug.com)
To test a CSS selector, go to the "Console" tab and enter a command in the bottom form (more info on how to find the command line).
Inside the command line use the $$("your CSS selector") syntax to test CSS selectors, explained in more detail here. For example use this command to select everything:
$$("body")
Here's how to use the built in CSS query selector in Firefox:
Go to Tools > Web Developer > Web Console
Also, you could press ctrl shift i in Windows/Linux, or cmd opt i in Mac.
Type in your CSS selector (using traditional $$() syntax) at the very bottom left corner.
The object node list will appear on the right hand panel of the console.
$$('div')
[object NodeList]
$$('div').length
42
This is handy for Selenium Webdriver instances of Firefox, where having an extension isn't feasible.
Try firebug. http://getfirebug.com/
Not sure if this helps. Try Firebug. Allows you to select an item, and see what it's css path is, as well as the css currently being applied.
Can do some experimentation in the html/css right in the browser.
FireFinder is good, but I started with and prefer FirePath for Firebug. It works similarly, but can give you an expanded view of the HTML around the matching elements w/o need to click inspect, FriendlyFire, etc.
The field where you test the locator also has syntax checker where field turns red if syntax is bad. Just click eval to test the locator and matches show below with additional HTML around the matching elements.
But for testing CSS locator, you'd want the drop down option of "Sizzle" rather than CSS in FirePath. The CSS option only works for simple CSS selectors, complex ones only work under Sizzle (l mode, such as:
div.namedService.photoService > div.photoBrowserContainer:nth-child(3) > div.albumName:contains('someName')
Selenium IDE 1.0.11 released has inbuilt CSS locator builder
The DOM standard function document.querySelectorAll is what you want, modern browser all support it. See the document
https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
You can call it in built-in web console. In console there is a shortcut $$, call it like $$('div a').
I like firebug because it can click to scroll to view the element. It also can test in 'CSS' panel.
The 'Find' button in Selenium IDE is very useful for this. It uses the same method to locate elements as your tests will, so can be used to locate elements using any of the supported strategies.
jQuery
With jQuery you could easily add a large red border to an element using the selector.
$(document).ready(function(){
$('#your-css-selector').css('border', '5px solid red');
});
Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) or Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60). Both show path.
Firefinder is great for testing selectors. However, if also you want to obtain the CSS selector for an element try SelectorGadget.
I've found FirePath to be really great, it lets you look up not only CSS but xPath as well. Wish there was something similar for Chrome and IE, but alas!