Div resizing is different in Chrome and Firefox than IE

Best explained by the illustration attached.  When I drag/resize a div in Chrome and FireFox, it behaves differently than in IE11.
The drag behavior is done in jquery.  However, it seems like this might be a CSS issue.
I'm hoping someone might have suggestions as to how to start diagnosing.
Thanks!
Div drag issue
LVL 2
codequestAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

F PCommented:
Can you post the CSS and skeleton of the divs please?
0
F PCommented:
Also, Chrome, IE, and Firefox all use different rendering engines and pick and choose what CSS attributes they want to interpret individually from one another. This is why you will often see the same thing written 3 times...

take border radius for instance:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
codequestAuthor Commented:
Thanks for the response.  I wish I could post the code.  Unfortunately, it's a very large tangle mass.   I'm hoping for suggestions before I start mucking about in it;  I'm not that clever with CSS and have very little experience with cross-browser issues.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

F PCommented:
I don't know what your element with the star is, but I do know you're using <div> tags. I'm assuming you're floating them left, but you could also be using width as a percentage and setting the display to be inline?? I mean there's a lot of things that could be going on and interacting with one another when it comes to CSS.
0
F PCommented:
Also, what version of jQuery are you using?
0
codequestAuthor Commented:
So, maybe I should run it, inspect it, and starting fiddling with the CSS attributes in the inspector, to see what happens.  Ok, that's a start!

Though now I'm thinking about it, aren't there some specific differences in the rendering engines with respect to default padding or border sizes?  Because it looks like something on that order of size.
0
codequestAuthor Commented:
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
0
F PCommented:
Use this for playing around... it's much easier:

https://jsfiddle.net/

The differences in the rendering engines don't change the size of a pixel, or percentage of it on the monitor. It could be affected using 'em' as a unit of measure, but that also is dependent on the window size and view-port. Box-sizing is another big one that might play a big role, but typically the margins and padding are set within pixels and percentages. Use the developer tools on each to play with the live DOM and see what you can do to manipulate it without going back and forth if you want to try that maybe?
0
F PCommented:
BTW, the only differences in defaults is the font, and line/paragraph options for each. 14px = 14px regardless of which renders it.
0
F PCommented:
Any reason why you're sticking with a 2 year old version of jQuery UI and haven't moved to v2 of jQuery itself?

This might've already been a problem resolved and had nothing to do with the rendering engine itself.
0
codequestAuthor Commented:
Thanks for the tips.   The app does use percentages.  So I'll consider that.
This has been helpful;  I'll get back into it tomorrow.
0
F PCommented:
I just saw this released last month, and I'm guessing you're using Resizable....


"The fourth maintenance release for jQuery UI 1.11 is out. This update brings bug fixes for Draggable, Resizable, Sortable, Accordion, Dialog, Slider, and Tooltip [...]"
0
codequestAuthor Commented:
Reason for old jquery?  Probably something to do with my level of programming knowledge and skills, as in, I never thought to update it!  :-)  But done now, thanks. And, I'll add it to the "general upkeep" list.
0
codequestAuthor Commented:
FYI, the jq update didn't fix it;  I'll try the inspection route.
0
F PCommented:
Did you do both UI and regular jQuery?
0
codequestAuthor Commented:
Yes, updated both UI and regular JQ:

   <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Code still works in general, just did not fix the issue at hand.
0
codequestAuthor Commented:
Got to sign off now, thanks again, more tomorrow.
0
codequestAuthor Commented:
Relatively simple solution;  the "overhang" was a child of a div that did not have "overflow:hidden".
The responses to my question got me started and helped me focus, so big help in that way. Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.