Databases
StackOverflow2013
Postsdbo
POStyling A Link Button Using CSS Across Browsers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStyling A Link Button Using CSS Across Browsers
    text
    copied!<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="http://i39.tinypic.com/n12h49.png" rel="nofollow noreferrer">alt text http://i39.tinypic.com/n12h49.png</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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload