Tip - Css - IE 7 / Firefox - Padding / Margin

Posted January 3rd, 2009 by admin

The Problem: You want to put an image border onto an image that's being stored in a CCK object.. (translation - an image has been uploaded as part of a detailed information about a product, company etc...) So what can you do..

Solution attempt - the drupal apprentice ninja- 1st try..

.field-field-logo {
  border: 3px solid #FCFBD5;
  float: right;
  margin: 0 0 15px 15px;
}

.field-field-logo img{
margin: 0 0 -6px 0;
}

Now add a hover

.field-field-logo:hover {
border: 3px solid #DCE67D;
}

It looks great in Firefox, but in IE 7.. oops.. it doesn't look right.. so what to do..

Final Solution - the drupal master

We need to fix for IE7.. so we use a standard css "hack" for the box model..
*margin: 0; /* Fixes image in IE7 and IE6 */

So final code is:

.field-field-logo {
  border: 3px solid #FCFBD5;
  float: right;
  margin: 0 0 15px 15px;
}

.field-field-logo img{
margin: 0 0 -6px 0;
*margin: 0; /* Fixes image in IE7 and IE6 */
}

.field-field-logo:hover {
border: 3px solid #DCE67D;
}

tags for Tip - Css - IE 7 / Firefox - Padding / Margin

Topics

To get the last Drupal Ninja Tips

Sign Up Below
First Name *
Email *

Recent comments