Strict XHTML and div question

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Hi Guys,

This has been driving me nuts - be grateful for any advice! Very simply
- I've set my page's DOCType to XHTML Strict.

When I wrap a div around an image or a bit of text, I'm getting 2-3
pixels of extra padding in Firefox between the DIV and the element. In
IE there is no padding whatsoever - the div sits tightly up against the
edge of the image.

I've tried line-height's, margins, padding etc - nothing works except
removing the Strict DOCTYPE. Firefox adds this extra padding and I
can't get rid of it. Code below - anyone got any ideas?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    " ">

    a            {font-family:Arial, Helvetica,

<div style="border:1px solid red;"><a href="#">blah</a></div>


Re: Strict XHTML and div question

Quoted text here. Click to load it

did you try:

div {
  padding: 0;
  margin: 0;

div img {
  padding: 0;
  margin: 0;

actually, whenever I start a new syle sheet, I always put

body {
  margin: 0;
  padding: 0;

at the top - this resets everything, getting rid of browser


Re: Strict XHTML and div question

Quoted text here. Click to load it

The image itself needs zero "border"
 to rid that padding.  Must say "0".

Re: Strict XHTML and div question wrote:

Quoted text here. Click to load it

I can't really explain this behaviour, but I guess Firefox is right and IE
is missing the pixels. At least Konqueror has the same behaviour as FF.

I think this is caused by some extra space from line-height, which it
equally distributed at the top and bottom of the box. Checkout the CSS spec
for the exact rules how text is supposed to be rendered.

In Konqueror setting 'display: block' on the link removes the space (and
expands the clickable area, which is usually a good thing for menus and

Benjamin Niemann
Email: pink at odahoda dot de
WWW: /

Re: Strict XHTML and div question wrote:
Quoted text here. Click to load it

I haven't checked your sample since it wasn't online :-(
But your description sounds related to what the following article from is about:


Re: Strict XHTML and div question

set the image to "display: block;"

Re: Strict XHTML and div question

Hi guys, many thanks for the feedback. Display:block gets rid of the
annoying extra pixels - but it inserts a line break after the image -
which messes up some elements in my page (I have text on the same line
as some of my images).

I found the image problem could be resolved by putting a height on the
containing div? This didn't affect text though - the extras pixels of
padding proved really stubborn. I found a post on here a year ago that
had the same problem - they suggested putting a small line-height on
the *containing* div. I put a line-height of 10px and the extra pixels
disappeared! Seems a bit of an ugly workaround - but it'll do for now

thanks again


Re: Strict XHTML and div question wrote:
Quoted text here. Click to load it
Jason -
Thanks, first, for posting your problem, and even more so for posting
the answer you found.
This afternoon, I started working with the code sample you included, and
it started driving *me* nuts. After thinking about the solution,
however, it doesn't really seem a work-around, but the only right way to
solve the line-height issue in these *three* problems presented in your
original post.
You asked us to to include in your <div> element:
1.) an image - an inline element with implicit dimensions
2.) a "bit of text" - an inline element without implicit dimensions, for
which each browser constructs its own anonymous container; and
3.) (in your sample) an anchor - another inline element, with some
yet different characteristics.

The default value for the line-height property is 'normal', whatever
that means to each browser you might use for each of these contained
But, since an explicit value for line-height is inherited, you're able
apply the same value for all contained elements, and clean up the act
for all browsers, with one line-height specification in the parent element.
I think it's actually quite elegant.
- Jacques

Site Timeline