advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

jleblanc on 07/15/06


Tagged

css hack box model


Versions (?)


Who likes this?

15 people have marked this snippet as a favorite

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


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

Plain TextExpand 
  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.