title: Building Widgets for Adobe Muse, very close to final, can't figure out why my animated CSS property is not reaching the top of my div container
body: <p>Title pretty much says it all, I'm a newbie with CSS and HTML and have done a tremendous amount of work and research to quickly get to where I am today, I'm stumped.  Unfortunately, I guess I'm brand new to StackOverflow and cannot post images yet, you can view the image at <a href="http://www.bryantcoffey.com/images/muse_coding_error.png" rel="nofollow">http://www.bryantcoffey.com/images/muse_coding_error.png</a> so you can see the discrepancy between what Adobe Muse thinks is the top and where the box comes to it's final resting position… code is below.  I'm utilizing coding terminology and instructions from <a href="http://adobe-muse.github.io/MuCowDocs/" rel="nofollow">http://adobe-muse.github.io/MuCowDocs/</a> if anyone is unfamiliar with this particular setup.  Any help is much appreciated.  I'll keep digging and let you know if I resolve it on my own.  Thank you!  </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;!--
  Random line of text
  --&gt;
  
  &lt;HTMLWidget name="TMG Overlay Widget" formatNumber="3" localization="none" creator="Bryant Coffey" defaultWidth="640" defaultHeight="360" isResizable="true"&gt;
  
  &lt;parameters&gt;
      &lt;separator&gt;&lt;/separator&gt;
      &lt;info label="Sliding Box Color"/&gt;
      &lt;color name="BoxColor" label="Box Color" defaultValue="#b10000"/&gt;
      &lt;separator&gt;&lt;/separator&gt;
      &lt;info label="Global Opacity and Transition Parameters"/&gt;
      &lt;text name="GlobalOpacityTiming" label="Global Opacity Timing (s)" defaultValue=".5"/&gt;
      &lt;text name="SlidingBoxOpacityTiming" label="Sliding Box Opacity Timing" defaultValue=".2"/&gt;
      &lt;text name="SlidingBoxSpeed" label="Sliding Box Speed Timing (s)" defaultValue=".5"/&gt;
      &lt;text name="CaseStudyHoverSpeed" label="Case Study Text Hover Dissolve Speed (s)" defaultValue=".2"/&gt;
      &lt;separator&gt;&lt;/separator&gt;
      &lt;info label="Line 1 Text Options"/&gt;
      &lt;text name="Line1Text" label="Line 1 Text" defaultValue="Line 1 Text"/&gt;
      &lt;color name="Line1TextColor" label="Line 1 Font Color" defaultValue="#ffffff"/&gt;
      &lt;text name="Line1FontSize" label="Line 1 Font Size" defaultValue="30"/&gt;
      &lt;text name="Line1TopPosition" label="Line 1 Top Position" defaultValue="120"/&gt;
      &lt;text name="Line1LeftPosition" label="Line 1 Left Position" defaultValue="0"/&gt;
      &lt;separator&gt;&lt;/separator&gt;
      &lt;info label="Line 2 Text Options"/&gt;
      &lt;text name="Line2Text" label="Line 2 Text" defaultValue="Line 2 Text"/&gt;
      &lt;color name="Line2TextColor" label="Line 2 Font Color" defaultValue="#ffffff"/&gt;
      &lt;text name="Line2FontSize" label="Line 2 Font Size" defaultValue="13"/&gt;
      &lt;text name="Line2TopPosition" label="Line 2 Top Position" defaultValue="135"/&gt;
      &lt;text name="Line2LeftPosition" label="Line 2 Left Position" defaultValue="0"/&gt;
      &lt;separator&gt;&lt;/separator&gt;
      &lt;info label="Case Study Box Options"/&gt;
      &lt;text name="CaseStudyBoxText" label="Case Study Box Text" defaultValue="Case Study"/&gt;
      &lt;color name="CaseStudyInitialTextColor" label="Case Study Initial Font Color" defaultValue="#ffffff"/&gt;
      &lt;color name="CaseStudyHoverTextColor" label="Case Study Hover Font Color" defaultValue="#000000"/&gt;
      &lt;text name="CaseStudyTextTopPosition" label="Case Study Text V-Position" defaultValue="11"/&gt;
      &lt;color name="CaseStudyBoxColor" label="Case Study Box Color" defaultValue="#ffffff"/&gt;
      &lt;text name="CaseStudyBoxTextSize" label="Case Study Font Size" defaultValue="15"/&gt;
      &lt;text name="CaseStudyBoxTopPosition" label="Case Study Box Top Position" defaultValue="180"/&gt;
      &lt;text name="CaseStudyBoxLeftPosition" label="Case Study Box Left Position" defaultValue="200"/&gt;
      &lt;url name="CaseStudyURL" label="Case Study Button URL" defaultValue="http://www.tmgcreative.tv"/&gt;
      &lt;separator&gt;&lt;/separator&gt;
      &lt;info label="Background Image Selection"/&gt;
      &lt;file name="bgImage" label="Select a Background Image" filterLabel="Images" fileTypes="*.jpg;*.jpeg;*.png;*.gif" fileRequiredForOutput="True"/&gt;
      &lt;builtIn name="width"/&gt;
      &lt;builtIn name="height"/&gt;
  
  
  &lt;/parameters&gt;
  
  &lt;pageItemHTML&gt;
      &lt;![CDATA[
      &lt;style&gt;
  
  #container {
      width: {param_width}px;
      height: {param_height}px;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      overflow:hidden;    
  }
  
  #boxmodify {
    opacity: 0;
    width: {param_width}px;
    height: {param_height}px;
    background: #{param_BoxColor};
    position:relative;
    top: {param_height}px;
    -webkit-transition: height .25s, opacity {param_SlidingBoxOpacityTiming}s, top {param_SlidingBoxSpeed}s;
    -moz-transition: height .25s, opacity {param_SlidingBoxOpacityTiming}s, top {param_SlidingBoxSpeed}s;
    -o-transition: height .25s, opacity {param_SlidingBoxOpacityTiming}s, top {param_SlidingBoxSpeed}s;
    transition: height .25s, opacity {param_SlidingBoxOpacityTiming}s, top {param_SlidingBoxSpeed}s;
  }
  
  #casestudybox {
      opacity:0;
      width: 100px;
      height: 40px;
      background: transparent;
      border-style: solid;
      border-color: #ffffff;
      border-width: 2px;
      position:absolute;
      top:{param_CaseStudyBoxTopPosition}px;
      left:{param_CaseStudyBoxLeftPosition}px;
      z-index: 4;
      -webkit-transition: opacity {param_GlobalOpacityTiming}s, background {param_CaseStudyHoverSpeed}s;
      -moz-transition: opacity {param_GlobalOpacityTiming}s, background {param_CaseStudyHoverSpeed}s;
      -o-transition: opacity {param_GlobalOpacityTiming}s, background {param_CaseStudyHoverSpeed}s;
      transition: opacity {param_GlobalOpacityTiming}s, background {param_CaseStudyHoverSpeed}s;
  
  }
  
  
  #textLine1 {
      position: relative;
      top: {param_Line1TopPosition}px;
      left: {param_Line1LeftPosition}px;
      color: #{param_Line1TextColor};
      z-index:3;
      opacity:0;
      font-size:{param_Line1FontSize}px;
      -webkit-transition: opacity {param_GlobalOpacityTiming}s;
      -moz-transition: opacity {param_GlobalOpacityTiming}s;
      -o-transition: opacity {param_GlobalOpacityTiming}s;
      transition: opacity {param_GlobalOpacityTiming}s;
  }
  
  #textLine2 {
      position: relative;
      top: {param_Line2TopPosition}px;
      left: {param_Line2LeftPosition}px;
      font-size: {param_Line2FontSize}px;
      color: #{param_Line2TextColor};
      z-index:3;
      opacity:0;
      font-size:{param_Line2FontSize}px;
      -webkit-transition: opacity {param_GlobalOpacityTiming}s;
      -moz-transition: opacity {param_GlobalOpacityTiming}s;
      -o-transition: opacity {param_GlobalOpacityTiming}s;
      transition: opacity {param_GlobalOpacityTiming}s;
  }
  
  #caseStudyText {
      position:relative;
      top:{param_CaseStudyTextTopPosition}px; 
      color:#{param_CaseStudyInitialTextColor};
      font-size:{param_CaseStudyBoxTextSize}px;
      -webkit-transition: color {param_CaseStudyHoverSpeed}s; 
      -moz-transition: color {param_CaseStudyHoverSpeed}s;
      -o-transition: color {param_CaseStudyHoverSpeed}s;
      transition: color {param_CaseStudyHoverSpeed}s;
  }
  
  #container:hover #boxmodify{
    opacity: .5;
    top: 0px;
  }
  
  #container:hover #textLine1 {
      opacity: 1;
  }
  
  #container:hover #textLine2 {
      opacity: 1;
  }
  
  #container:hover #casestudybox {
      opacity: 1;
  }
  #casestudybox:hover {
      background: #ffffff;
  }
  
  #casestudybox:hover #caseStudyText {
      color: #{param_CaseStudyHoverTextColor};
  }
  
  
  &lt;/style&gt;
  
  &lt;div id="container"&gt;
  &lt;center&gt;&lt;div id="textLine1"&gt;{param_Line1Text}&lt;/div&gt;
  &lt;div id="textLine2"&gt;{param_Line2Text}&lt;/div&gt;&lt;/center&gt;
  &lt;div id="boxmodify"&gt;&lt;/div&gt;
  &lt;div id="image" &gt;&lt;img src="{param_bgImage}" height="{param_height}" width="{param_width}""&gt;&lt;/img&gt;&lt;/div&gt;
  &lt;a href="{param_CaseStudyURL}"&gt;&lt;div id="casestudybox"&gt;&lt;center&gt;&lt;div id="caseStudyText"&gt;{param_CaseStudyBoxText}&lt;/div&gt;&lt;/center&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;/div&gt;
      ]]&gt;
  &lt;/pageItemHTML&gt;
  
  &lt;/HTMLWidget&gt;
  </code></pre>