Home/ Questions/Q 177119
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T13:59:52+00:00

UPDATE #2: I have solved almost all my issues bar the one major one.

  • 0

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?

UPDATE: Should Look Like This

alt text

I have the following html page (detailed below). It simply renders 2 styled buttons from the links. My problem is IE6 & 7 renders it differently than Firefox, Safari, IE8 and Chrome that all render it correctly.

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?

Thanks

<html>   <head>     <style>        .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 > .niw-button-contents {           border: 1px solid #73b1da;       }        .niw-button > .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);       }     </style>   </head>   <body>     <a class='niw-button right-align' href='#'>       <div class='niw-button-contents'>           <div class='niw-button-icon niw-icon-cancel'></div>           <div class='niw-button-text'>Cancel</div>       </div>     </a>     <a class='niw-button' href='#'>       <div class='niw-button-contents'>           <div class='niw-button-icon niw-icon-cancel'></div>           <div class='niw-button-text'>Cancel</div>       </div>     </a>   </body> </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. EDIT: Now that I understand your image:

    Just make your <a> elements block elements with display:block and put some kind of span inside of them to hold the icon. Or you could make the whole thing an image…

    • 0