In jQuery, if I add a resizable feature to a div, why does it add a weird style to it and how do i fix it?

Question

Hi, I have a click function setup to make a div resizable. When I click on the div, the style has white lines and is all spaced out, I am guessing it might have something to do with the jquery ui css file? How would i go about styling it?

Example: http://www.fissiondesigns.com/simon/

try clicking on one of the boxes on the image. Thanks!

Answer 1

How about experimenting with jQuery UI's draggable/droppable interactions, as well as sizeable? They're very helpful, and would probably be perfect for this (reducing your code to a minimum as well!)

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/resizable/

Answer 2

Its your css thats doing it. when it becomes resizable, jQuery is adding a bunch of div in dynamic-pinpoint-area. All divs the have this rule applied

.dynamic-pinpoint-area div {
    border: 1px solid white;
}

you need to be more specific in your css, so it doesnt get applied to generated divs