I have been using Firebug in Firefox and the Developer toolbar in IE to help trace my styles for a branding effort in SharePoint. The trace styles feature in the Developer Toolbar is very nice.. I can easily trace a hyperlink's styles and create the CSS to change it's styling, I'm having some trouble with tracing the hover style for links as neither Firebug nor Developer Toolbar will tell me where those styles are being defined, which makes me hard to override it..
I even tried a:hover { color: #ccc !important; } as a hackish way of doing things, and this fixed a lot of them, but some still remain. The CSS that comes with SharePoint is pretty big, and it's hard to manually go in and find them myself.
Any suggestions?
Jopache, I've been debugging on Chrome or Safari for several months and have grown really fond of the "inspect element" option that's built into webkit when you right-mouseclick on an element. I believe that firebug also adds that functionality to Firefox as well--I switch to Firebug when I really need to get detailed on my requests. So, if you've never tried this one, right mouse click on your link (it will be in the hover state at that point) and click on inspect element. Hopefully, that'll point you to at least the a: state which can then be searched via ctrl-f or grep for similar styles. Also, you'll notice a "computed style" that can be helpful to find specific quirks that can serve as alternate elements to search on.
It can be frustrating to do this on big documents....I'm in the middle of a hugely complex application UI refresh with a 5,000 line CSS document that's more complicated that any I've ever seen. Sometimes, it just requires head-banging. You might try a shortcut and see if a generic a:hover declaration at the bottom of the CSS doc (remember, it reads top to bottom so the last element will override any previous) to solve the issue while you search for a better solution.
If all else fails, here's a pretty good tut: http://www.cleverworkarounds.com/2007/10/08/sharepoint-branding-how-css-works-with-master-pages-part-1/
Related
I've seen this effect on different websites. It is really subtle. How is it making this effect? It is not just the border but the empty space.
https://wordpress.com/
You will need to provide a link for an exact answer.
The easiest way to find out is to load the page in Chrome, press F12 to bring up the dev-tools, and use the elements inspector.
You can then select the html elements and it will tell you exactly what styles are used.
For more details, see Chrome's page on Inspecting the DOM and styles.
take a look please:
The azure one is just clicked. Firefox only. It's just an <img> inside a <li>, no links. Why the hell does it becomes azure?? It's the first time in almost 20 years of web programming I see this. It seems to have nothing to do with ::selection, nor tap highlight, so I can't find a useful css rule to stop it. Firebug shows nothing meaningfull on the styles analisys panel. Also it's the only element in the page that behave this way. So what the hell is it? How to avoid?
You can avoid it using user-select: none;
The text of the element and sub-elements will not be able to be selected
Note
This feature is non-standard and is not on a standards track
I've recently found that most of the measurements I thought I knew were actually different from what I thought they where due to browser specific defaults. I assessed that all my knowledge of my visual inspections were relative...item A is 20px so I can see that Item B is 22px. However because of browser hidden defaults...this method doesn't work too well. How can I know what absolute pixel count is.
Currently, I just created a 20px by 20px ruler in a graphics editor with tick marks.
Attached here
Now I can move this around by using absolute positioning and measure things. However is there something built into the development tools to do this. I'm using Firefox 10 right now.
Thanks
Chrome's inspector tool shows the dimension of any element that you happen to hover over. However, if you must remain loyal to Firefox, Firebug can show the exact dimensions of any element upon hover as well. When you open up Firebug, click "Layout" in the sidebar to the right. Then, when you hover over an element, the dimensions will appear within that box (no clicking necessary). Not exactly as intuitive as Chrome's inspector tool, but it works regardless.
Are you just looking for a tool to easily measure heights and widths without messing around in Firebug?
I'd suggest this add-on for Firefox (also available for Chrome): Web Developer
If this isn't what you're looking for, can you please clarify?
Edit: If you can't install software or add-ons, use the no-install Firebug Lite
there is a sweet measurement tool called "measure it." you can find it HERE. that's the best one i have found so far.
another thought... you could check and make sure all of your different browsers aren't at all zoomed in... view actual size etc...
also - are you using a "reset" of any kind ? if not - you could check out the meyer reset - or normalize... or - the freak reset... (that combines both).
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.
I want to click / look at on an html element and find out which css rule is responsible for which format property.
i.e. I want to know the font's come from body{ } the color from h { } and the padding from #headercontainer
Is there a way of doing this?
I've tried firebug and cssedit (both of which are very cool) but can't see where you'd find out the inheritance.
It seems like such a useful thing to want to do there has to be a way!
Thanks.
It's right here in firebug:
The built-in tools basically offer the same feature now:
use firebug. The style information will show which css rules are being applied and which are being canceled out.
When you inspect an element, the style tab shows what styles are being applied. style rules with a strikethrough are overridden styles (note: this is with "show computed styles" turned off)
Firebug's inspect feature (there should be a little inspect button or flashlight under the tab) allows you to click on an element and see all of the CSS blocks that it inherits from.
Here is a youtube video which demonstrates this feature.
Here is the firebug website. You can see in the picture at the top the styling inheritance data on the right.
If you can tolerate IE, try IE8's developer tools - they're actually quite nice. Open the page in IE8 and press F12 to bring up the tools.
(source: microsoft.com)
I thought Firebug did this? If you inspect an element it shows the styles on the right, and all the CSS that effects that element. It even shows the formatting that has been overridden by using a strikethrough.
Yeap, for that FireBug is awesome. Firebug is a add-on for Firefox and allows you to inspect each element in currently viewing page and allows you to change them and see the results immediately.
Also Google's Chrome is able to provide you that info when you run chrome://inspector which I like a lot.
Also new verison (2.x) kind of validates your code and errors are shown after clicking error icon in bottom right corner
Firebug is for advanced users, you can use x-ray if you want to click to find out http://www.westciv.com/xray/
For fonts there is a firefox add-on called font finder.
https://addons.mozilla.org/en-US/firefox/addon/4415