Quick 500 - IE Height is not sizing correctly??

Gweep
Gweep used Ask the Experts™
on
Hi experts,

I am designing a draggable interface using javascript, containing a lot of small icons spread around a larger div. These items can be dragged around the larger div by the user and as they are, they are 'snapped' to the larger grid in multiples of 16px.

My problem is, that IE seems to be resizing the height of these items incorrectly... making it function incorrectly in practice.

I have cut down my code and made a simple example of the problem below...

HTML:

<HTML>
      <head>
            <link rel="stylesheet" type="text/css" href="old.css" />
      </head>
      <body>
            <div id="testing" class="div_item div_item_car">
            </div>
      </body>
</HTML>

CSS:
* {
      margin:0pt;
      padding:0pt;
}

.div_item {
      /*A floating item */
      position: relative;
      width: 16px;
      height: 16px;
}

.div_item_car {
      /* specific item type */
      background-image:url("blank.gif");
}

Now, the div named testing contains a gif file that is 16 x 16 pixels ...  when run in IE, the top of the icon will be repeated because in actual fact, the div in IE is coming out at a size of 16px by 19px (height) !! even though my CSS specifically makes it 16x16?

Does anyone know the solution to get IE to size that correctly?

I've also noticed that it is doing this in more than one div and so its causing problems when calculating collision detection and drag movement ... pointing out what i'm commonly doing wrong or giving me one solution to solve all the divs at once is strongly preferred?

Thanks experts!!

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
OK .... after an hour of testing i fixed the problem... the solution is simple:

.div_item {
      /*A floating item */
      position: relative;
      width: 16px;
      height: 16px;
      padding: 0px !IMPORTANT;
      font-size: 0;
}

the font-size: 0 was the solution for anyone who also has this problem ...

For the admins, i'm requesting for the points to be refunded, but this question kept for other people to find. Thanks!

Author

Commented:
OK .... after an hour of testing i fixed the problem... the solution is simple:

.div_item {
      /*A floating item */
      position: relative;
      width: 16px;
      height: 16px;
      padding: 0px !IMPORTANT;
      font-size: 0;
}

the font-size: 0 was the solution for anyone who also has this problem ...

For the admins, i'm requesting for the points to be refunded, but this question kept for other people to find. Thanks!
Commented:
Closed, 500 points refunded.
Modname
Community Support Moderator

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial