title: Styling A Link Button Using CSS Across Browsers
body: <p>UPDATE #2: I have solved almost all my issues bar the one major one.  With the same structure and CSS IE7/6 displays each a with 100% width of it's container.  I need this to  no happen.  Besides that everything else is fine.  Can anyone enlighten me?</p>
  
  <p>UPDATE:  Should Look Like This</p>
  
  <p><a href="https://i.stack.imgur.com/HouXG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HouXG.png" alt="alt text"></a>
  </p>
  
  <p>I have the following html page (detailed below).  It simply renders 2 styled buttons from the links.  My problem is IE6 &amp; 7 renders it differently than Firefox, Safari, IE8 and Chrome that all render it correctly.  </p>
  
  <p>I have been banging my head against the wall for a day now trying to make it work in IE6/7.  Can anyone offer advice as to what I am doing wrong? </p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
  
        .niw-button {
            background:      #1f81c0 url(niw-btn-gradient-normal.png) repeat-x;
            border:          none;
            color:           #fff;
            display:         inline-block;
            font-weight:     bold;
            margin-right:    6px;
            min-width:       95px;
            padding:         2px;
            text-decoration: none;
        }
  
        .niw-button:hover {
            background: #5e698f url(niw-btn-gradient-hover.png) repeat-x;
        }
  
        .niw-button &gt; .niw-button-contents {
            border: 1px solid #73b1da;
        }
  
        .niw-button &gt; .niw-button-contents:hover {
            border: 1px solid #99a1bc;
        }
  
        .niw-button .niw-button-icon {
            background-position: center;
            background-repeat:   no-repeat;
            float:               right;
            height:              25px;
            width:               27px;
        }
  
        .niw-button .niw-button-text {
            height:         25px;
            line-height:    1.5em;
            padding-left:   5px;
            padding-right:  27px;
            text-align:     center;
            text-transform: uppercase;
        }
  
        .right-align {
          float:right;
        }
  
        .niw-icon-cancel {
            background-image: url(niwater_cancelIcon.png);
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;a class="niw-button right-align" href="#"&gt;
        &lt;div class="niw-button-contents"&gt;
            &lt;div class="niw-button-icon niw-icon-cancel"&gt;&lt;/div&gt;
            &lt;div class="niw-button-text"&gt;Cancel&lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;a class="niw-button" href="#"&gt;
        &lt;div class="niw-button-contents"&gt;
            &lt;div class="niw-button-icon niw-icon-cancel"&gt;&lt;/div&gt;
            &lt;div class="niw-button-text"&gt;Cancel&lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>