CODEWITHSUNDEEP
htmlcss
James Hughes
James Hughes

Reputation: 6194

Styling A Link Button Using CSS Across Browsers

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>

Upvotes: 1

Views: 2612

Answers (5)

Perchik
Perchik

Reputation: 5620

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...

Upvotes: 2

slim
slim

Reputation: 2583

I'm actually confused myself. How are they supposed to look? If you don't let us know what you're intending to do, it's very difficult to fix the problem.

Upvotes: 0

floplus
floplus

Reputation: 315

Just one tip for a resource to the button/link problem in general:

http://mezzoblue.com/archives/2008/09/17/anchor_butto/

Upvotes: 0

Alistair Knock
Alistair Knock

Reputation: 1836

Edit: I actually don't get correct rendering in IE8, which is what I address below:

For a start, you should put the <a> elements inside the elements rather than the other way round. Block level elements shouldn't really exist within inline elements. e.g.

  <div class="niw-button-contents">
      <div class="niw-button-icon niw-icon-cancel"></div>
      <div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div>
  </div>


  <div class="niw-button-contents">
      <div class="niw-button-icon niw-icon-cancel"></div>
      <div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div>
  </div>

This fixes the positioning for me but there is a subsequent loss in styling. I haven't tinkered with the CSS to correct that yet but it should be straightforward. Secondly, you have an awful lot of classes to deal with a straightforward issue. Arguably you should only need one class in the outer div to identify what's happening inside, and then your CSS can descend from there.

Upvotes: 0

kkyy
kkyy

Reputation: 12460

IE6/7 doesn't support display: inline-block, IE6 doesn't support the child (parent > child) selector. So you probably should look into those points in your css...

Upvotes: 0

Related Questions