JQUERY UI too much space from the top border to the haeder ...

Question

I am trying JQUERY UI but I have a problem; the distance form the top of the border of DIV is too much even if the padding is 0. What can i do -> he theme is "smoothness" but I don't think it is a problem of the theme.

Thanx for your help

Alex

function themify(){
     $("div").addClass("ui-widget ui-widget-content ui-corner-all");
     $("input").addClass("ui-widget");
     $(":header").addClass("ui-widget-header ui-corner-all");
}
</script>

<style>#test{display:none}</style>

<script type="text/javascript">
  function rendiVisibile(){
     if(document.getElementById("test").style.display = "none"){
       $("#test").css({"width":"200px","float":"right","text-align":"center"});
       $("#test").show("slide",{},1000);
     }
  }
</script>

The CSS is as follows :

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; } .ui-widget-content { border: 2px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; } .ui-widget-content a { color: #222222; } .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; } .ui-widget-header a { color: #222222; }

Answer 1

Perhaps you have a margin or border set that you are unaware of.. Remember always.

The element is wrapped by the Padding, which is wrapped by the Border, which is wrapped by the Margin.

If padding is zero and the elements are not lined up then perhaps you have border or margin set.