Question

So i’m trying to get familiar with jQuery, so i’ve been running some test code, but it looks like jQuery’s .css is having some problem? I spent the last 3 hours trying different stuff out… no go. I set my div to have the class Content and then i run the page and resize it to trigger the function.

.Content {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
  padding-top-width:1px;
  padding: 1px;
};

  <div id="wrapper" class="fullscreen">
     <div id="divContainer" class="Container">
        <div id="divContent" class="Content"> Content </div>
        <div id="divQuery" class="Query"> Query </div>
     </div>
  </div>

$(window).resize(function() {
  var container = $('#divContainer');
  var content   = $('#divContent');
  console.log(content.css('border-left-width'));
  console.log(content.css('padding-top-width'));
  //content.width(container.width()*.6-content.attr('padding'));
});

From the console, I get the following:

 0px
 (an empty string)

What am I doing wrong?

Answer 1

There are two problems here:

1. padding-top-width should just be padding-top.

2. border-top-width won’t work unless you have a border-style (e.g. “solid”) – otherwise it’s assumed to be “none”, i.e. no border, and your border-width declarations have no effect.

See http://jsfiddle.net/nrabinowitz/D2e4N/5/ for a working example.