Internet Explorer, Padding and Width

Filed in: Web Development — May 13th, 2005

Kahsoon message me this morning, asked me about his blog layout width does not match in Firefox and Internet Explorer, the IE display the block width smaller than Firefox.

(Oh mah! Cross browser problem! *headache* )

From my past trial and error experience, I know IE is somehow does not like Padding. I didn’t know the reason, until I read the following article.

Microsoft decided that padding shouldn’t add to the total actual width of a block-level element, but should subtract from the content display space within the element. The text appears in a more confined space rather than a larger box. Their formula is margin-left, margin-right and width add together to compute actual width. Padding doesn’t play a roll.


Exposed: Visual Formatting Model Flaw In Internet Explorer v6.0

The author has a solution, use max-width. max-width is not recognized by Internet Explorer but yes for Mozilla. By using max-width, the content area will abit smaller(subtracted padding width) but same block width as in Internet Explorer.

Thought:
I haven’t test the max-width personally. It should work, right? Or, you have better solution to the problem(block width, Mozilla vs. IE, padding)?

I am beginner to CSS. Cross browser website layout always caused headache to me. The method I use is “trial and error”, and it always take long time for me to make a webpage look similiar in both Mozilla and IE.

You know, sometimes users are in so passive position. :neutral:

Like this post? Please share:

Follow @liewcf on Twitter; Join Facebook page; Subscribe to free newsletter for updates like this article..

  • http://www.kahsoon.com/ Kahsoon

    Hi liew…Thanks for helping out. The article is useful but in my case that author is trying to cari pasal one lol He hate IE thats why he did something to make IE look bad…phew~

  • http://www.kahsoon.com/ Kahsoon

    Hi liew…Thanks for helping out. The article is useful but in my case that author is trying to cari pasal one lol He hate IE thats why he did something to make IE look bad…phew~

  • http://www.kahsoon.com Kahsoon

    Hi liew…Thanks for helping out. The article is useful but in my case that author is trying to cari pasal one lol He hate IE thats why he did something to make IE look bad…phew~

  • LcF

    Ya, yours is rare case ;)

  • LcF

    Ya, yours is rare case ;)

  • LcF

    Ya, yours is rare case ;)

  • Alopex

    Thanks for that trick! I was having all sorts of headaches trying to set width of DIVs that appear the same in both Firefox and IE, but IE’s lack of compliance was driving me crazy. Your trick of using max-width worked great.

    …for now. I suppose the next version will not bring width into compliance, but will recognize max-width, thus breaking this trick…

  • Alopex

    Thanks for that trick! I was having all sorts of headaches trying to set width of DIVs that appear the same in both Firefox and IE, but IE’s lack of compliance was driving me crazy. Your trick of using max-width worked great.

    …for now. I suppose the next version will not bring width into compliance, but will recognize max-width, thus breaking this trick…

  • Alopex

    Thanks for that trick! I was having all sorts of headaches trying to set width of DIVs that appear the same in both Firefox and IE, but IE’s lack of compliance was driving me crazy. Your trick of using max-width worked great.

    …for now. I suppose the next version will not bring width into compliance, but will recognize max-width, thus breaking this trick…

  • http://www.light11.ca/ Don Eval

    great trick. works perfect with max-height as well.

  • http://www.light11.ca/ Don Eval

    great trick. works perfect with max-height as well.

  • http://www.light11.ca Don Eval

    great trick. works perfect with max-height as well.

t