Member Avatar for prkumar.jha

hi all,
can anyone help on the fact that the "padding:5%" (or any other percentage) is not working in ie (i.e. ie7, which i have checked). It's working fine in FireFox.
thanks in advance.

  • 4 Contributors
  • 6 Replies
  • 101 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Thread summary and practical fixes for the behavior reported by : percentage padding is valid CSS and is computed from the containing block's width (so top/bottom padding use the container width, not its height). That is why Firefox and standards-mode IE render the same values. If IE7 shows a different layout, the usual causes are a nonstandard DOCTYPE (quirks mode), an element rendered inline or without a clear containing-block width, or an IE box-model/compatibility-mode mismatch. This explains why and 's pixel-only advice "works" — pixels mask the underlying mismatch — and why 's nesting suggestion is on target.

Common, practical checks and fixes:

  • Ensure a standards DOCTYPE (for modern code, use <!DOCTYPE html>). Quirks mode can make IE include padding inside the declared width.
  • Confirm the parent has a defined width (percent padding uses that width). If the element is inline, try making it block-level.
  • If width and padding on the same element still give inconsistent results across browsers, separate them with two elements (one for sizing, one for padding). Example pattern:
<div class="box-outer">
  <div class="box-inner">content</div>
</div>

.box-outer { width: 600px; }
.box-inner  { padding: 5%; }

This keeps width and padding calculation distinct and matches behavior across engines.

Quick diagnostics: change padding:5% to a pixel equivalent to verify the amount (container-width * 0.05). Check IE's compatibility/document mode (older IEs can be forced into compatibility/quirks by server headers or missing DOCTYPE). Typical culprits are quirks mode, inline display, or an unknown/auto containing width.

References for the spec and behavior: MDN — padding and the CSS box model reference at the W3C CSS2 spec.

Recommended Answers

All 6 Replies

Member Avatar for sreein1986

no please give padding in pixels not percentage
it's not working check once

Member Avatar for irfan_a_sattar

Hi don't put % in css

give as pixel i will take in all browsers

regards
irfan

Member Avatar for sreein1986

Hi don't put % in css

give as pixel i will take in all browsers

regards
irfan

Already I told to him same answer

Member Avatar for irfan_a_sattar

Already I told to him same answer

Ok good! sreein.


regards
irfan

Member Avatar for sreein1986

if ur problem solved put mark as solved and add to my reputation

Member Avatar for MidiMagic

Percent does work in padding. I use it all the time.

The problem is the main incompatibility between IE and the other browsers:

Putting size styles (width, height, or the size of an image) and nonzero surrounding styles (margin, border, padding) in the same tag or defined style causes the trouble.

IE puts the surrounding styles INSIDE the defined sizes.

All other browsers follow the standard and put the surrounding styles OUTSIDE the size styles.

The cure is to nest two tag pairs, one with the defined sizes, and the other with the surrounding styles. Use a div pair for the extra tag pair. Now you can control the order of nesting.

This will fix the problem. It also fixes IE object positioning problems.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.