The blog of Jafar Aliyev

Archive

Creation date:

The meaning of margin in Internet Explorer and Firefox

The meaning of margin for container with block model in IE differs from Mozilla. If U have two containers with block model placed beside, IE considers margin-left of right container as distance from the left edge of parent. But Mozilla, Firefox and Opera use this margin as the gap between the left component and the right component. In such cases you have to set two different values for the same field. One for IE and other for all other browsers. You can do that by the following way.

#content{
  margin: 5em 0px 0px 10em;
}

html>body #content{
  margin-left: 0;
}

IE doesn't see html>body and ignores the instruction. This part works for other browsers. Hence IE sets left margin to 10em, when Mozilla/Opera rewrites this rule and sets it to zero.

Author: Jafar N.Aliyev (Jsoft)

Read also

Fixing overflow: hidden in IE

<div> against <table>

Measuring units for padding

Fixed background image

IE bug with first line

Overflow of inner block

CSS hacks
Nowadays many designers give all measures in pixels, including the font sizes. They fit their site to Internet Explorer and...

Internet Explorer bug with tall block
The problem of IE with two containers. If the internal container is longer than one screen of browser you'll encounter the problem.

Height of parent container

© Copyright

All articles in this site are written by Jafar N.Aliyev. Reproducing of any article must be followed by the author name and link to the site of origin(this site). This site also keeps the same rules relative to the articles of other authors.