advanced code snippet search

Posted By

jleblanc on 07/15/06


Tagged

css hack box model


Versions (?)

Who likes this?

17 people have marked this snippet as a favorite

luman
jonbaer
Taleamus
fatihturan
dojob
Ernstladen
theMacpenguin
tavo
fantomex
icarus
fael
marcoba
vali29
SpinZ
sudhakmy
m4tik
dajocko


CSS Box Model Hack

 / Published in: CSS
 

URL: http://intensivstation.ch/en/css/8.html

The CSS standard defines the width of a box as the width inside the box. Padding, border and margin are added seperately. The same applies to the height of a box. (!!) IE 5.X WIN (!!) fails to implement the specification correctly. Border and width inside the box are added to the width. A box with a width of 200px, a padding of 20px and border of 10px results in a width of 260px in Mozilla and 200px in Internet Explorer. This can be extremely tedious if you want to do a pixel perfect layout. TANTEKS HACK: (named after it's inventor) utilizes this weakness.

width:200px; is the defintion for Internet Explorer. IE stops processing the CSS rules after voice-family: "\"}\"";. Other browsers recognize the the value after it and overwrites the value. Opera doesn't, unfortunately

Expand | Embed | Plain Text 
  1. #box {      
  2. border:10px solid #000;
  3. width:200px;
  4. padding:20px;
  5. voice-family: "\"}\"";
  6. voice-family: inherit;
  7. width:140px;
  8. }
  9.  
  10.  
  11. html>body #box {
  12. width:140px;
  13. }

Report this snippet  

You need to login to post a comment.