Inability to adjust Box Model Content Size Property in Studio Creator2

Re: Studio Creator2
I am trying to make my RadioButtonGroup smaller. I think my problem resides with not being able to reduce the Box Model content size [17,17] within the properties of the individual buttons. Any suggestions would be appreciated.

Your template contains an IE Conditional Comment that is adding 30px of top padding to #sidebar1. This padding may required in older versions of IE but not IE9.

To fix it, change [if IE] to [if lt IE 9]
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

On the box model the text indicating content, padding etc is white. It is completely illegible.

When you inspect a element and go to the box model and hover/click on the different regions of the box model it shows what region the color indicates, for example content, padding,border etc. In Firefox 37.0.1 the text which show the name of the region is White, it is completely illegible and impossible to read. Why would you make the text white? Please revert the change.

Try to see if there was an option that was changed in the tool:
*[https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector]
Else please contact stackoverflow.com and tag mdn, there is a dedicated team for more information.

Adding template break box model and font

I have been working on this one for a few hours now and I can't figure it out. I am working with the HTML5 Boilerplate and recreating the home page for our company. When I do not include the template, the file works fine in IE. But the second I apply a template the whole page becomes broken and the IE box model applies and my font sizing gets messed up.
I have included a link to the files on a testing server, if this is not allowed, let me know and I can put up the code.
Excuse the cupcakes from FlexSlider, I have not yet finished that piece.
Working (no template): http://www.qa.mpay.com/index.asp
Not working (template): http://www.qa.mpay.com/copy.asp
Do I just need to rework my entire code so that it is more compliant with the IE Box Model qualifications, ie. div inside of a div with width on one and padding/margin on the other?

Alright here's the code for the one that's not working. After posting last night, I realized the links were probably only viewable internally.
UPDATE: Just added <html> after <!doctype html> like I've seen you post about in another forum discussion. That seems to have fixed it. Why is that needed? Isn't it the html tag being opened in the line <html class="no-js" lang="en"> What I mean by this, is why does it work fine in other browsers when that is missing, but it messes up with IE?
P.S. I'm starting to blame H5BP for poor documentation, but I'm learning a lot in the process.
TEMPLATE: (without <html>)
templates>template_page_home_new.dwt
<!doctype html>





 <html class="no-js" lang="en"> 
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>MPAY Inc.</title>


<meta name='description' content='Payroll Software/Services- Business Process Outsourcing, Reseller and Referral Programs for Payroll Providers, Brokers, CPAs, and more offered by MPAY Inc'/>
<meta name='keywords' content='MPAY, payroll, payentry.com, millennium, millennium payroll, payroll processing, payroll software, online payroll, outsourcing, business process outsourcing, timekeeping, Boston, MA, Charlotte, NC, work comp, workers comp, SecureView, online tax forms'/>


<meta name="viewport" content="width=device-width,initial-scale=1">



<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/flexslider.css" type="text/css" media="screen" />

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

<script src="../js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
    
<div id="navigation">
    <div id="logoregion">
          <div id="logo">
              <a href="default.asp"><img src="../images/logo.gif" alt="mpay_logo" /></a>
          </div>
          <div id="headerlink">
              <ul>
                      <li><a href="../client-login.asp"><p class="new">NEW!</p>  <img src="../images/blue_bullet_line.gif" alt=""> Client Login  </a></li>
                      <li><a href="contact_us.asp"><img src="../images/blue_bullet_line.gif" alt=""> Contact Us  </a></li>
                      <li><a href="careers.asp"><img src="../images/blue_bullet_line.gif" alt=""> Careers  </a></li>
                      <li><a href="about_us.asp"><img src="../images/blue_bullet_line.gif" alt=""> About Us</a></li></ul>
          </div>
          <div id="contact">
          (781) 810-9000<br />
          <a href="mailto:[email protected]">[email protected]</a>
          </div>
      </div>
      <div id="mainnav">
          <ul class="navigation-controls">
                  <li><a href="../index.html"><p class="navigation-text">Home</p></a></li>
                  <li><a href="../services.html"><p class="navigation-text">Services</p></a></li>
                  <li><a href="../products.html"><p class="navigation-text">Products</p></a></li>
                  <li><a href="../solutions.html"><p class="navigation-text">Solutions</p></a></li>
                  <li><a href="../support.html"><p class="navigation-text">Client Support</p></a></li>
                  <li class="nav-border-right"><a href="../resources.html"><p class="navigation-text">Resources</p></a></li>
           </ul>
      </div>
    </div>
    

    
        <div id="footer">
          <div id="footercontent">
              <div id="legal">
              <a href="../index.html">MPAY Inc.</a>  |
              <a href="../legal.html">Legal Notices</a>  |
              <a href="../privacy.html">Your Privacy</a>
              </div>
              <div id="copyright">
               <script type="text/javascript">
      now=new Date();
      year=now.getFullYear();
          </script>
               © Copyright
               <script type="text/javascript">
      document.write (year);
               </script>
               MPAY, Inc. All Rights Reserved.</div>
         </div>
       </div>

   </div>



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>

<script defer src="../js/plugins.js"></script>
<script defer src="../js/script.js"></script>

    
     <script type="text/javascript">
       /* <![CDATA[ */
       document.write (
          '<img src="http://marketing.mpay.com/acton/bn/1170/visitor.gif?ts='+
          new Date().getTime()+
          '&ref='+escape(document.referrer) + '">'
       /* ]]> */
       </script>

<script>
    window._gaq = [['_setAccount','UA-12607129-1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
</script>
</body>
</html>
File it's being applied to:
copy.asp
<!doctype html>





 <html class="no-js" lang="en"> 
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>MPAY Inc.</title>


<meta name='description' content='Payroll Software/Services- Business Process Outsourcing, Reseller and Referral Programs for Payroll Providers, Brokers, CPAs, and more offered by MPAY Inc'/>
<meta name='keywords' content='MPAY, payroll, payentry.com, millennium, millennium payroll, payroll processing, payroll software, online payroll, outsourcing, business process outsourcing, timekeeping, Boston, MA, Charlotte, NC, work comp, workers comp, SecureView, online tax forms'/>
<style type="text/css">

</style>


<meta name="viewport" content="width=device-width,initial-scale=1">



<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
    
<div id="navigation">
    <div id="logoregion">
          <div id="logo">
              <a href="default.asp"><img src="images/logo.gif" alt="mpay_logo" /></a>
          </div>
          <div id="headerlink">
              <ul>
                      <li><a href="client-login.asp"><p class="new">NEW!</p>  <img src="images/blue_bullet_line.gif" alt=""> Client Login  </a></li>
                      <li><a href="contact_us.asp"><img src="images/blue_bullet_line.gif" alt=""> Contact Us  </a></li>
                      <li><a href="careers.asp"><img src="images/blue_bullet_line.gif" alt=""> Careers  </a></li>
                      <li><a href="about_us.asp"><img src="images/blue_bullet_line.gif" alt=""> About Us</a></li></ul>
          </div>
          <div id="contact">
          (781) 810-9000<br />
          <a href="mailto:[email protected]">[email protected]</a>
          </div>
      </div>
      <div id="mainnav">
          <ul class="navigation-controls">
                  <li><a href="index.html"><p class="navigation-text">Home</p></a></li>
                  <li><a href="services.html"><p class="navigation-text">Services</p></a></li>
                  <li><a href="products.html"><p class="navigation-text">Products</p></a></li>
                  <li><a href="solutions.html"><p class="navigation-text">Solutions</p></a></li>
                  <li><a href="support.html"><p class="navigation-text">Client Support</p></a></li>
                  <li class="nav-border-right"><a href="resources.html"><p class="navigation-text">Resources</p></a></li>
           </ul>
      </div>
    </div>
    

    <div id="slideshow">
        
        <div class="flexslider">
        <ul class="slides">
            <li>
                <a href="#"><img src="img/planet_hollywood.jpg" />
                <div class="flex-caption">
                    <div id="slideone">
                        <h2 class="gold" >MPAY Sales & Product <br />Roadmap Workshop</h2><br />
                        <h3 class="white">
                        March 2, 2012 / Las Vegas
                        <br />
                        </h3>
                         <br /> <br /> <br />
                        <p class="gold underline">
                        Learn more about IPPA Event
                        </p>
                    </div>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_samoa.jpg" />
                <div class="flex-caption">
                    <h2 >Our Products</h2><br />
                    <h3 >Payentry.com
                    <br />Secure and reliable online solution for payroll and human resource management
                    Millennium
                    <br />User-friendly PC solution provides a flexible system with robust functionality
                    </h3>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_donut.jpg" />
                <div class="flex-caption">
                    <h2 >Our Solutions</h2><br />
                    <h3 >Business Process Outsourcing<br />
                Reseller Program<br />
                Referral Program<br />
                Direct Services
                    </h3>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_pumpkin.jpg" />
                <div class="flex-caption">
                    <h2 >Compliance & Security</h2><br />
                    <h3 >Payroll Processing and Tax Management<br />
                Employee Management<br />
                New Hire Reporting<br />
                Workers’ Compensation<br />
                Wage Garnishment<br />
                COBRA Administration
                    </h3>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_donut.jpg" />
                <div class="flex-caption">
                    <h2 >Paperless Solutions</h2><br />
                    <h3 >Secure Document Delivery via SecureView<br />
                Employee Self Service with Online Tax Forms<br />
                Money Network Payroll Distribution Service
                    </h3>
                </div></a>
            </li>
        </ul>
        <div >
        <ul class="custom-controls">
                <li><a href="#">Upcoming Events</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Our Solutions</a></li>
                <li><a href="#">Compliance & Security</a></li>
                <li><a href="#">Paperless Solutions</a></li>
         </ul>
         </div>
      </div>
    </div>
    <div id="main" role="main">
        <div id="banner">
          <div id="leftbanner" class="bluedropshadow">Learn how MPAY can find a <br />solution that’s right for you.</div>
          <div id="bannerdivision">
          <img src="img/banner_division.png" alt="" />
          </div>
          <div id="rightbanner">
            <div id="emailbutton">
            <a href="#"><img src="img/email_us_button.png" alt="Email Us!" /></a></div>
            <div id="or" class="bluedropshadow">or</div>
            <div id="callus">
            Call us today at<br />
            781-810-9000</div>
          </div>
        </div>
      <div id="bannerbottom">
          </div>
        <div id="leftcol">
          <div id="introduction">
          <p>MPAY Inc. is a <a href="#">payroll software</a> and <a href="#">services</a> company providing strategic <a href="#">business solutions</a> to employers and business partners nationwide. MPAY presents a variety of programs, including <a href="#">business process outsourcing</a>, to a wide range of <a href="#">industries</a>. MPAY’s offerings streamline processes, improve productivity, and simplify administration, allowing clients to get the most out of their workday.</p>
          </div>
          <div id="twitterfeed">
              <div id="twitterlogo">
              <h4>Twitter<br />Feed</h4>
              </div>
              <div id="twitter">
              </div>
            <p class="viewall"><a href="#">View All</a></p>
          </div>
        </div>
        <div id="rightcol">
          <div id="mediacenter">
            <div>
            <h4>Media Center</h4>
            </div>
            <div id="medialinks">
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/news_icon.png" alt="News Icon" />News</a></p>
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/press_icon.png" alt="Press Release Icon" />Press Releases</a></p>
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/calendar_icon.png" alt="Calendar Icon" />Calendar</a></p>
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/client_icon.png" alt="Client Testimonials Icon" />Client Testimonials</a></p>
            </div>
          </div>
          <div id="affandawards">
            <div id="affandawardstitle">
            <h4>Affiliates & Awards</h4>
            </div>
            <div id="affandawardsframe">
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="200" height="150" title="sponsors_small">
                <param name="movie" value="sponsors_small.swf">
                <param name="quality" value="high">
                <embed src="sponsors_small.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="150"></embed>
              </object>
            </div>
          </div>
          <div id="socialmedia">
            <div id="reachout">
            Reach <br />Out To Us!
            </div>
            <div id="socialarrow">
            <img src="img/social_arrow.gif">
            </div>
            <div id="socialicons">
            <a href="#"><img class="socialmediaicons" src="img/facebook_30px.gif" alt="Facebook Icon" /></a>
            <a href="#"><img class="socialmediaicons" src="img/twitter_30px.gif" alt="Twitter Icon" /></a>
            <a href="#"><img class="socialmediaicons" src="img/linkedin_30px.gif" alt="LinkedIn Icon" /></a>
            </div>
          </div>
        </div>
    </div>


    
        <div id="footer">
          <div id="footercontent">
              <div id="legal">
              <a href="index.html">MPAY Inc.</a>  |
              <a href="legal.html">Legal Notices</a>  |
              <a href="privacy.html">Your Privacy</a>
              </div>
              <div id="copyright">
               <script type="text/javascript">
      now=new Date();
      year=now.getFullYear();
          </script>
               © Copyright
               <script type="text/javascript">
      document.write (year);
               </script>
               MPAY, Inc. All Rights Reserved.</div>
         </div>
       </div>

   </div>


        
    <script type="text/javascript">
        $(window).load(function() {
            $('.flexslider').flexslider({
                manualControls: '.custom-controls li a'
    </script>
    
<script type="text/javascript">
$(document).ready(function(){
    $.getJSON('http://twitter.com/status/user_timeline/MPAYInc.json?count=3&callback=?', function(data){
        $.each(data, function(index, item){
            $('#twitter').append('<div class="tweet"><p>' + item.text.linkify() + '</p><p class="timestamp">' + relative_time(item.created_at) + '</p></div>');
    function relative_time(time_value) {
      var values = time_value.split(" ");
      time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
      var parsed_date = Date.parse(time_value);
      var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
      var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
      delta = delta + (relative_to.getTimezoneOffset() * 60);
      var r = '';
      if (delta < 60) {
        r = 'a minute ago';
      } else if(delta < 120) {
        r = 'couple of minutes ago';
      } else if(delta < (45*60)) {
        r = (parseInt(delta / 60)).toString() + ' minutes ago';
      } else if(delta < (90*60)) {
        r = 'an hour ago';
      } else if(delta < (24*60*60)) {
        r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
      } else if(delta < (48*60*60)) {
        r = '1 day ago';
      } else {
        r = (parseInt(delta / 86400)).toString() + ' days ago';
      return r;
    String.prototype.linkify = function() {
        return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
            return m.link(m);
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>

<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>

    
     <script type="text/javascript">
       /* <![CDATA[ */
       document.write (
          '<img src="http://marketing.mpay.com/acton/bn/1170/visitor.gif?ts='+
          new Date().getTime()+
          '&ref='+escape(document.referrer) + '">'
       /* ]]> */
       </script>

<script>
    window._gaq = [['_setAccount','UA-12607129-1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
</script>
</body>
</html>
CSS
css>style.css
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* ==|== normalize ==========================================================
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 100%; line-height: 150%; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
::-moz-selection { background: #496793; color: #fff; text-shadow: none; }
::selection { background: #496793; color: #fff; text-shadow: none; }
/* =============================================================================
   Links
   ========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
   Lists
   ========================================================================== */
ul, ol { margin: 0em 0; padding: 0 0 0 0px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
   Embedded content
   ========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }
/* =============================================================================
   Figures
   ========================================================================== */
figure { margin: 0; }
/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
legend { border: 0; *margin-left: -7px; padding: 0; }
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
button, input { line-height: normal; *overflow: visible; }
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
table button, table input { *overflow: auto; }
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
* Consistent box sizing and appearance
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
* Remove inner padding and border in FF3/4: h5bp.com/l
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
   Tables
   ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
   Eric Meyer Reset Snippet
   ========================================================================== */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
body {
    max-width: 49.6875em;
    text-align: center;
    margin: auto;
    #container{
    text-align: left;
    margin: auto;
a {
        color: #6699CC;
        text-align:left;
        text-decoration:underline;
        border: none;
    a:link { color: #6699CC;}
    a:visited { color: #6699CC;}
    a:hover { color: #496793;}
    a:active { color: #496793;}
/* ==|== text styles ====================================================== */
p{
    color:#444444;
    font-family:Verdana, sans-serif;
h2{
    font-size:2.5em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight:bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
h3{
    font-size:1.5em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight:bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
h4{
    font-size:1.3125em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight:normal;
    font-family:Verdana, sans-serif;
h5{
    font-size:1.3125em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight: bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
/* ==|== navigation styles ====================================================== */
/* Custom Nav */
#navigation{
    margin:10px 20px 5px 20px;
    width:775px;
#headerlink a:link { color: #666;}
#headerlink a:visited { color: #666;}
#headerlink a:hover { color: #00274C;}
#headerlink a:active { color: #00274C;}
#headerlink li{
    font: .625em "Arial Narrow", sans-serif;
    display: inline;
    text-decoration: none;
    list-style-image:url(../images/blue_bullet.gif);
    letter-spacing:.08em;
#headerlink a{
    text-decoration: none;
#headerlink {
    padding: 2px 135px 0px 0px;
    float: right;
.new {
    text-align:right;
    font: bold 1.175em "Arial Narrow", sans-serif;
    color:#8f9d4e;
    display:inline;
#header {
    margin: 15px auto 0 auto;
    width:775px;
#logoregion {
    width:775px;
    height: 91px;
    background:url(../images/header_small.gif) no-repeat 0 0;
#contact{
    font: bold .75em/1.35em sans-serif;
    color: #919194;
    padding: 10px 135px 0 0px;
    float: right;
    text-align:right;
.nav-border-right{
    border-right: 1px solid #6699cc;
#logo {
    padding: 32px 0 0px 8px;
    float: left;
#mainnav {
    width: 100%; width: 775px;
    height: 28px;
.navigation-text{
    text-align: center;
    font-weight:bold;
    font-size:.75em;
    font-family: sans-serif;
    letter-spacing:.01em;
    padding-top:2px;}
.navigation-controls {width: 100%;}
.navigation-controls li {margin: 0 0 0 0px; float:left; display: inline-block; zoom: 1; *display: inline; list-style:none;}
.navigation-controls li:first-child {margin: 0;}
.navigation-controls li a {color: #00274c; text-align:center; width: 129px; height: 28px; display: block; background: url(../img/main_navigation_tab.gif) no-repeat 0 0; cursor: pointer; text-decoration:none;}
.navigation-controls li a:hover {background-position: 0 -28px; color: #00274c; }
.navigation-controls li a.active {background-position: 0 -28px; color: #00274c; cursor: default; }
#nav a:link { color: #000000;}
#nav a:visited { color: #00274C;}
#nav a:hover { color: #919194;}
#nav a:active { color: #919194;}
#nav li{
    list-style-type: none;
    display: inline;
div#nav a{
float: left;
text-decoration:none;
padding-top: 2px;
padding-right: 15px;
/* ==|== slideshow styles ====================================================== */
#slideshow {width: 100%; width: 775px; margin: 0 16px; }
#slideone{
    width:60%;}
.gold{
    color:#d79b00;}
.white{
    color:#fff;}
.underline{
    text-decoration:underline;}
/* ==|== main styles =========================================================== */
/* ==|== main content column styles ======================================================= */
#main{
    background:url(../img/body_bg.jpg) no-repeat 0 0;
    width: 775px;
    height: 885px;
    display:inline-block;
    margin-top: 90px;
    padding: 30px 20px 0px 20px;
    background:url(../img/body_bg.jpg) no-repeat 0 0;
    width: 795px;
    display:inline-block;
    margin-top: 90px;
    padding: 30px 0px 0px 0px;
#maincontent{
    height: 885px;
    padding: 0px 20px;
/* ==|== banner styles ====================================================== */
#banner{
    font-size:1.3125em;
    line-height:1.25em;
    letter-spacing:.02em;
    font-weight: bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
    height: 70px;
    width: 755px;
    margin: 0px 0px 0px -10px;
    padding: 0px 20px 20px 20px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    -khtml-border-top-left-radius: 2px;
    -khtml-border-top-right-radius: 2px;
    background-color: #496793;
    background-image: url(../img/banner_bg.gif);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#496793), to(#2c5079));
    background-image: -webkit-linear-gradient(top, #496793, #2c5079);
    background-image:    -moz-linear-gradient(top, #496793, #2c5079);
    background-image:     -ms-linear-gradient(top, #496793, #2c5079);
    background-image:      -o-linear-gradient(top, #496793, #2c5079);
#leftbanner{
    float: left;
    padding-top:20px;}
.bluedropshadow {
    color:#00274c;
    text-align:left;
    text-shadow: 1px 1px 1px #6882a4;}
#bannerdivision{
    float: left;
    padding: 16px 20px 0 30px;}
#rightbanner{
    float: right;
    padding-top:20px;
#emailbutton{
    float: left;
    padding: 5px 0px 0px 0px;
#or{
    float: left;
    padding: 13px 25px 10px 20px;}
#callus{
    color:#ffffff;
    width: 180px;
    text-align:right;
    text-shadow: 1px 1px 1px #00274c;
    float: right;}
#bannerbottom{
    height: 20px;
    background:url(../img/banner_bottom.jpg) no-repeat 0 0;
    width: 795px;
    margin: 0px 0px 0px -10px;
/* ==|== left column styles ======================================================= */
#leftcol{
    float: left;
    width: 485px;
#introduction{
    padding: 15px;
    margin: 10px 30px 30px 30px;
    width: 390px;
    background-color:#FFFFFF;
    border: 1px solid #ededed;}
#twitterfeed{
    text-align:right;
    margin: 30px;
    width: 415px;
#twitterlogo{
    text-align:left;
    padding:37px 0 0 160px;
    height: 78px;
    background:url(../img/mpay_twitter_bird.png) no-repeat 0 0;
.tweet {
    padding: 1px 0px 1px 0px;
    margin: 7px 0;
    text-align:left;
    font-family: Verdana, sans-serif;
    font-size:.75em;
    line-height:1.75em;
.timestamp {
    text-align:right;
    font-weight: normal;
    color:#8f9d4e;
.viewall {
    padding: 12px 0 0 0;
/* ==|== right column styles ====================================================== */
#rightcol{
    float: right;
    width: 290px;
#mediacenter{
    margin: 10px 30px 50px 30px;
#medialinks{
    padding: 10px 0 0 0;
.mediaicons{
    vertical-align:middle;
    padding: 0px 10px 0 0;
.medialinks{
    vertical-align:middle;
    padding: 10px 0 0 0;
#viewall {
    padding: 12px 0 0 0;
#affandawards{
    margin: 50px 5px 23px 14px;
#affandawardstitle{
    margin: 0px 25px 0px 16px;
#affandawardsframe{
    margin: 20px 0 0 0;
    padding: 27px 40px 50px 29px;
    background:url(../img/flash_bg.png) no-repeat 0 0;
#socialmedia{
    margin: 23px 30px 30px 30px;
#reachout{
    float:left;
    font-size:1.875em;
    line-height:1.25em;
    color:#8f9d4e;
    font-weight:bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
#socialarrow{
    float: right;
    padding: 20px 0 0 0;
#socialicons{
    float: left;
    padding: 15px 0 0 0;
.socialmediaicons{
    padding: 0 5px 0 0;
/* ==|== footer styles =

CSS layout box model?

Hi, I'm using Dreamweaver cs4. I downloaded a diablo 3
fansite kit from blizzard, and was looking at their code &
style sheets and such for reference while learning to use DIV to
layout new websites. I pretty much have the same DIV box going for
all the content in the middle. But when i click on their DIV box,
it shows margin on the left and the right, and while in design
view, automatically centers their DIV box.
I created a page, setup a div box 1000px wide, centered it,
and it does not give me a preview of it centered while in design
view, nor does it show me the margins & padding (displays
diagonal white transparant stripes where the padding & margins
goes). i made sure i clicked the "CSS Layout Box Model" in the
visual aid menu, but it does not want to work on my page, yet i can
turn it on and off on the fan site index page. How do i make it
work on my page?
Thx

Which page? Can we see the other one too?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ZzarkZul" <[email protected]> wrote in
message
news:[email protected]...
> Heres the code for the .css document.
>
>
>
> /* Stylesheet 1 -------------------------------*/
>
> body { margin:0; font:12px Tahoma; color:#FFFFDD;
> background:url(../images/bg1.jpg) 50% 0 #170f05
repeat-x; }
>
> #ev_bg {
> background:url(../images/ev_bg1.gif) repeat-y;
> width:1064px;
> margin:auto;
> }
> #everything { width:1000px; margin:0 32px;
> background:url(../images/stone-dark.jpg); border:1px
solid black;
> border-width:0px 1px; }
>
> #header { height:162px;
background:url(../images/d3_header1.jpg) right
> no-repeat; padding:0 20px; }
> #header h1 {
> padding-top:115px;
> margin:0;
> color:white;
> }
>
> #middle { clear:both;
background:url(../images/borderb1.gif) repeat-x;
> padding:20px 10px; }
>
> #left_column { width:195px; float:left; }
> .horizontal #left_column { width:auto; float:none; }
> #navigation a { background:url(../images/button_bg1.gif)
no-repeat;
> width:170px; height:25px; display:block;
padding-left:25px; margin:5px 0;
> font-size:13px; color:white; text-decoration:none;
line-height:25px;}
> #navigation a:hover { background-position:0 bottom; }
> .horizontal #navigation a { float:left; }
> #more_information { padding-top:15px;}
>
> #middle_column { float:left; width:50%; margin:0px 20px;
> #middle_column.two_column { float:left; width:75%; }
> .horizontal #middle_column { width:auto; float:none; }
> .date_break { font-size:19px; border-bottom:1px solid
#680808;
> margin-bottom:10px; }
> .post { background:url(../images/leather-heavy.jpg);
border:1px solid
> #221100; margin-bottom:35px; line-height:18px; }
> .post h1 { background:url(../images/title_bg1.gif)
repeat-x #0d2368;
> padding:2px 10px; margin:0; font-size:15px;
color:white;}
> .post_body { padding:5px 15px; }
> .post .postedby { float:left; clear:both; }
> .post .timestamp { float:right }
>
> ul { margin:20px; padding:10px; }
> li { list-style:none;
background:url(../images/bullet.gif) 0 5px
> no-repeat;
> padding-left:30px; line-height:25px; }
> .list_left, .list_right { width:48%; float:left }
>
> .post_info { clear:both; padding-top:10px; }
>
> #right_column {
> width:26%;
> float:left;
> }
> .box { background:url(../images/leather-vdark.jpg);
border:1px solid
> #545454; margin:10px 0 25px 0; padding:10px; }
>
> #footer { clear:both; padding:20px }
> #subnav { margin:10px 0;}
> #subnav a { color:#7A0C0C; }
> #subnav a:hover { color:#E51414 }
> .copyright { font-size:10px;}
>

Box model experts, why wouldnt this layout allow for a container div to fully expand?

Box model experts, why wouldnt this layout allow for a container div to fully expand?
Please see attached jpg.
Live site is at http://www.theminnternet.com/

You have an answer for the height issue, you may also be interested in this article that talks about cutting down on the stylesheet size... you have a lot of styles in your stylesheet that can really be trimmed down by using shorthand rules.
http://www.communitymx.com/content/article.cfm?cid=A43B828960590F55

Content size of UILoader or Loader

how to get content size of UILoader or Loader and how can i
resize the contents.
any positive response will be highly appreciated.
regards
maani janjua

i have solved the problem by using loader.scaleX and
loader.scaleY property.
you can also adjust scaleX and scaleY values (range 0-1)
according to your loader size. because it varies with loader size.
regards
maani janjua

How to add an image to combo box model in java

i want to display a images.for that i take a combox.in that i want to add al images those i want to display, while clicking the image in combo box the image will be display.there is no problem for displaying an image, but i dont know how to add
an image to a combo box model in net beans. please help me. if u have any idea plese forward to this mail
[email protected]

Hi Thomas,
You need to create an image field and in the source choose 'graphic content ; give the name of the variable which has the binary data . and give the type as 'MIME/image'.

Box model/none absolute positioning with flash

In recent years none-absolute positioning (or box model positioning) has become the norm with HTML/CSS
this is uselfull for dynamic functions which appear on an event (such as an object which appears when a button is clicked on or a error message that appears when a form box is given invalid input because it automatically inserts itself it the right place.)
One very important example of this is when you have a form which automatically produces an error message and the error message appears bellow the input area which caused it and the rest of the page is pushed down.
With none absolute positioning the developer does not need to worry about this.
But if the objects are given absolute position then it becomes a massive problem, the developer has to go about giving the objects differetn positions dependant on if dynamic objects appear or not
potentially the developer has to consider all possible variables, and code if statements which determine the position of all static objects for all possible variables which dynamic objects could take.
so does flash have a "none absolute positioning" solution to this problem.

Before you get all happy and pleased with yourself, APDivs or Layers seldom work well as a primary layout method. Here are some reasons why:
http://apptools.com/examples/pagelayout101.php
You're much better off using default CSS positioning (which is no positioning at all) along with CSS margins, padding and floats. If you don't believe me, check your page in non-IE browsers with increased/decreased text-sizes (zoom, text only).
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Viewing Rules and Box Model Simultaneously in Firefox 20 Inspector

I upgraded to Firefox 20 and now my inspector is confined to the bottom of the viewport in an iFrame that I can pop out.
In previous versions, I could open up the CSS rules and box model visualization at the same time. This was one of the main reasons I considered the Firefox inspector superior to those of Opera, Chrome and Safari.
I can't seem to figure out how to do this now.. do I need to click between the box model and the rules or is there some way to revert to the old inspector layout or one that is more like it?
I'll code an add-on if I have to get this thing to work.
Very disappointed that Firefox removed their old default inspector view.

Yes, you can open open one tab at the time in the left pane (you will also get a Fonts tab).
There will be a lot more tools added to the inspector window in future Firefox versions and opening all windows could reduce the screen available for web page to almost nothing.<br />
So that is how it goes and you will have to adjust.
* http://blog.mozilla.org/ux/2012/10/coming-soon-the-firefox-developer-toolbox/

Canon HF100 import using imovie08 bloated the content size by 8 times

I imported videos from canon HF100 in AVCHD format to iMAC using iMovies 08.
The content in the camera was around 8GB, but after iMovies finished the imported content size on iMAC was 58 GB.
I have imported 1080i videos in large format, but don't think it should increase the actual size by 8 times on import. Any help is greatly appreciated.

1080i AIC movie's datarate is about 89mbps, and AVCHD datarate ranges from 6 to 24mpbs. If you shot your AVCHD footage with 12 or 13mbps rate (usually mid quality setting, depending on camera model) it would explain the size difference.

Single item having content type property set for both GIF and JPEGs

Is it possible to have a single blob column in the database that stores either jpegs or gif files and then the ability to display either type through a hyperdrill on a Discoverer item? If so, how can the content type property on an blob item be set to two options?
regards
Paul P

Hi,
Discoverer will use the content_type property to set the MIME type used when opening the blob. So if your blob contains more than one type of file and you want to use different programs to view the files then there are 2 options you can use:
Option 1: Create a EUL item for each content type. For example, you create a item called gif_content, set the content type to gif, and use decode(type, 'GIF', blob) to populate the item only if the content is gif. Then the user will see multiple hyperlink columns, but only one of the columns will contain a link in each row.
Option 2: Create a mod_plsql procedure to download the blob. Rather than include the blob in your EUL, instead include a URL that runs your mod_plsql procedure to download the blob. Set the content type for the URL to be FILE and in the procedure set the MIME type using OWA_UTIL.mime_header and download the blob using WPG_DOCLOAD.download_file. Then the user will see one URL hyperlink that will download all file types.
Hope that helps,
Rod West

Flex-box model not correctly implemented in Dreamweaver CS5.5, pleas improve!

Hi all,
there is a good introduction to: Flexible Box Layout module
see: http://www.css3.info/introducing-the-flexible-box-layout-module/
I tried the same example in my new Version of Dreamweaver CS5.5
--> surprise: Dreamweaver CS5.5 cannot show in a correct manner a following div:
<div class="flex_box flex_stretch flex_vertical">
where css are:
    .flex_box {
                        background: url('./img/box-model.png') no-repeat center center;
                        height: 180px;
                        margin-top: 16px;
                        width: 180px;
            .flex_stretch {
        display: -moz-box;
                        display: -webkit-box;
                        display: box;
        -moz-box-align: stretch;
                        -webkit-box-align: stretch;
        box-align: stretch;
            .flex_vertical {
        -moz-box-orient: vertical;
                        -webkit-box-orient: vertical;
                        box-orient: vertical;
CS5.5 can only strech in 1 direction, when shown as in a browser (German "ENTWURF").
In Firefox, sam is ok:
I need a correct representation of these boxes, when will there be an improvement??????????
WSteiner

John,
I misundrstood you response
I entered http://localhost in my browser and recieved the following page:
Asd you can see everything is working. I thought that when you called local host, it went to the www/ directory where I have my sites
I still don't see a problem with my settings
Server Folder: C:\TNG813onMowesII\www\
Web URL: http://localhost/genealogy/
I hate it when the tool is more trouble than the work.
Larry Voyer
Site Creator/Administrator
http://larryvoyer.com/genealogy/

How to export an entire model content (tables and charts) to pdf

Hello,
I would like to export a complete model, which includes tables and charts, to pdf.
I am already familiar with [this|https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/47fe4fef-0d01-0010-6f87-ed8ecb479123] tutorial but it explains how to do it for a single table and doesn't deal with charts. What I would like to do is take like a screenshot of the entire iView/model content to pdf.

Hi, rbish-
Not for the entire stage. The only thing you could do is to highlight everything and convert it to a symbol, then ensure that you move your triggers and labels to the new symbol. Then you could export an individual symbol, which will also package all of the dependent symbols.
Hope that helps,
-Elaine

Is it possible to change out of the box Callout content for already existing library using some javascript API ?

Is it possible to change out of the box Callout content (change DOM elements) for already existing library using some javascript API?
API ?

Hi,
We can use CSS and jQuery to achieve it.
Please add the following code into the Content Editor Web Part.
<style type="text/css">
.js-callout-content{
display:none;
.js-callout-mainElement span{
display:none;
.js-callout-mainElement{
border-width:0px;
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("a[title='Open Menu']").click(function(){
setTimeout(function(){
$(".js-callout-body .js-callout-bodySection").eq(0).html("<span>Test</span>");
$(".js-callout-mainElement span").show();
$(".js-callout-content").show();
$(".js-callout-mainElement").css("border-width","1px");
},1000);
</script>
Result:
Best Regards
Dennis Guo
TechNet Community Support

Maximum Content Size

Dear all
what is maximum of content size allowed in the request and is there any way to increase th size of the request content size.
because iam doing one application which allows users to enter unlimited size of charecters,if the enter very large number of characters than the value not inserted in the database. please suggest me.
thanks in advance

There is no limitation, but according to your problem description, I think you actually mean the size of the query string. In case of GET you're dependent on the webbrowser and the appserver used. Usually this limit vary between 256 and 2048 characters. In case of POST this is less or more unlimited (although some servers will complain when you exceed 2GB~4GB).
So your problem is probably more that you used GET to submit a form. Don't do that, better use POST for this.

Inability to adjust Box Model Content Size Property in Studio Creator2

Similar Messages

Maybe you are looking for