34

I have two div's that display slightly differently, I have looked through each of their CSS properties and they appear to be the same, however I am wondering if I've overlooked something.

Is there a tool that will basically diff the CSS of two different elements?

Preferably integrated into the browser.

EDIT

I have used Chrome's built in dev tools and gone through the computed styles area and manually compared each property (IE div.A font-weight:normal; div.B font-weight:normal etc...)

I am looking for a tool that essentially says "Select Element A and B", and shoots out a list of differences. Like a Winmerge comparison or something like that.

8
  • You have looked through their properties how? Aug 2, 2011 at 13:28
  • use Firebug for firefox and web developer tool for IE Aug 2, 2011 at 13:29
  • 1
    @Ahsan Rathod: Can you show us how you use Firebug/F12 to compare the styles of two elements side-by-side?
    – BoltClock
    Aug 2, 2011 at 13:29
  • 1
    Have you checked surrounding parent and child elements? Perhaps the difference is from a parent's padding or a child's width which makes one of the two divs look dissimilar.
    – Moses
    Aug 2, 2011 at 13:30
  • 6
    @Nathan In Chrome: right click the DIV -> Inspect element. Then open "Computed style", check "show inherited". Copy the list into a text-file. Repeat for second DIV. Then compare the text-files. Aug 2, 2011 at 13:33

5 Answers 5

23

Similar question was asked here and, as a result, I created a script that compares two elements in Chrome (you will find it in the linked answer). Also, based on said script, I created a handy Chrome DevTools Extension "CSS Diff".

CSS Diff in action

2
  • 1
    Super, I'm just wondering if it could be applied to two elements in different pages open in chrome ?
    – medmek
    Oct 21, 2019 at 8:25
  • 2
    The link is broken, but I found a new link here: github.com/kdzwinel/CSS-Diff
    – Ryan
    Mar 5, 2021 at 15:29
3

I think Firediff is what you want. While it doesn't compare two elements, but it kind'of logs DOM changes, so that you can compare those logs to see what's happening.

Also you can go to computed style in Firebug, and copy/paste computed style of each div into a different notepad file, and then compare those files using a file comparison tool. BeyondCompare is really cool.

0

div tags sometime behave different with same properties. The reason is your other code may be affecting it. In Firefox you can use firebug. the important thing in my opineon is you need to check the code around divs which is affecting their behaviour.

0

I am using Code Cola extension for Google Chrome. Very good and powerfull tool. Recomend for everybody.

1
  • not actually what I wanted to solve this problem, but is a very cool tool Aug 3, 2011 at 14:46
-3

Beyond compare is the tool for comparing css or any kind of file

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.