Fixing IE’s image gap

This IE bug happed typicaly if you use a XTML Transitional doc type

doctype is: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

The problem sometime like this :

The images have a 1px border that render ok in the compliant browsers but IE6 leaves a small gap between the bottom of the graphic and the border leaving me with white space.

an this is an IE bug!,

The solution :

Add a CSS rule to set the image in display:block like this

#header img {padding:0; margin:0; display:block; }

Goodluck! :)


Fixing IE 5/6 Doubled Float-Margin Bug

What Goes Wrong With Float Margins in IE6

A coder innocently places a left float into a container box, and uses a left margin on the float to push it away from the left side of the container. Seems pretty simple, right? Well it is until it’s viewed in IE6. In that browser the left float margin has mysteriously been doubled in length!

Thankfully, IE7 does not show this bug.

The Way It Oughta Be

The graphic below shows a simple div (tan box) containing a left-floated div (green box) . The float has a left margin of “100px”, producing a 100px gap between the left edge of the container box and the left edge of the float box. So far so good.

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  /*This last value applies the 100px left margin */
  }

Read the rest of this entry »