?
Solved

Firefox Inspector - found a setting I want to change but not sure which HTML doc it is referencing

Posted on 2013-11-22
9
Medium Priority
?
350 Views
Last Modified: 2013-11-25
When i go to my web page to adjust a visual look of the web site I can make the change using Firefox Inspector, but now I am trying to figure out what file actually has the coding.
Is there any way to do this?
0
Comment
Question by:Scott Johnston
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 999 total points
ID: 39670477
When you examine an element in Firebug, it will show the styles that are applied to that element, and it will also show you which CSS file those styles are coming from. It even shows which line number to look at in the CSS file.
0
 

Author Comment

by:Scott Johnston
ID: 39670537
That is what I am trying to determine what CSS file is being used?
I looked at the default on but it does nothav any of the info I am looking to change.
0
 

Author Comment

by:Scott Johnston
ID: 39670601
When i look at the Rules, i see that the parameter is "Inherited from DIV, then it lists the div.page  and tell me what styles.css:28.  I guessing that is the style setup and what line but it is not what matches the data I look at in the Inspector?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39670602
It might be getting generated from client side scripting in which case it will not be in any stylesheet or even inline.  In that case the styling is obfuscated somewhere in the scripting.

Cd&
0
 
LVL 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 999 total points
ID: 39670632
Because of the nature of CSS, most elements will inherit some styles from other elements further up the DOM tree. Sometimes an element won't have any style explicitly set, but will inherit everything from other elements. Maybe this is the case on your site.

If you want to provide a link to your site and tell us which elements you're examining we can give you more info.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39671424
I like the Chrome code inspector better than Firefox's. I think it's easier to use and see what is happening. And it gives you a blank:
element.style {

}
 CSS element, so if you click on a div or span or whatever on the left, and try applying the style there and it works on the page, then you are in the right place. Maybe FF does this too and I just haven't noticed it.
0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39671431
@nanharbison - In Firebug, right click in the Style tab and you'll see an option for Edit Element Style...

:)
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 501 total points
ID: 39671505
@nanharbison,

In Firefox inspect you can change any of the styles using th right side.  For existing properties you can uncheck them,  and you can edit any style property for immediate effect.  

I have been doing Web Development a long time, and there is no way I would ever consider using Chrome for my primary browser.  It is just too lame.  I only use it for testing after using Firefox, so I can see which Chrome defects I have to work around or provide fallback.

Cd&
0
 

Author Closing Comment

by:Scott Johnston
ID: 39675312
Thanks
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question