strange padding/margin around images in Firefox

[Hans Nieser]

I have recently started using XHTML 1.0 Strict and table-less layouts
(except for displaying tabular data ofcourse). I'm quite pleased with
the results in terms of cross browser compatibility and my HTML looks a
hell of a lot cleaner this way.

However I've run into an issue where I get some kind of padding or
margin around images in Mozila Firefox and it seems impossible for me
to remove them. Example page is online here:

http://www.aphax.nl/files/htmlstuff/01.html
http://www.aphax.nl/files/htmlstuff/01/styles/default.css

The problem is the vertical space between the top header image
(header_top.png) and the bunch of images (header_bottom_*.png &
tabs_*.png) below it, that form the lower part of the header and the
tabbar. I've tried all sorts of things ranging from putting everything
in DIVs to explicitly setting margin and padding to 0 px on all elements
involved to no avail.

Even though it looks just fine in Internet Explorer, I'm going to assume
here that Firefox isn't to blame, but rather my incomplete understanding
of XHTML/CSS.

Can anyone tell me what is going on here?, and/or perhaps give me any
ideas on other ways to deal with this without having to revert to using
tables?

Thanks in advance,

Hans

 

[Jim Higson]

I have recently started using XHTML 1.0 Strict and table-less layouts
(except for displaying tabular data ofcourse). I'm quite pleased with
the results in terms of cross browser compatibility and my HTML looks a
hell of a lot cleaner this way.

However I've run into an issue where I get some kind of padding or
margin around images in Mozila Firefox and it seems impossible for me
to remove them. Example page is online here:

http://www.aphax.nl/files/htmlstuff/01.html
http://www.aphax.nl/files/htmlstuff/01/styles/default.css

The problem is the vertical space between the top header image
(header_top.png) and the bunch of images (header_bottom_*.png &
tabs_*.png) below it, that form the lower part of the header and the
tabbar. I've tried all sorts of things ranging from putting everything
in DIVs to explicitly setting margin and padding to 0 px on all elements
involved to no avail.

Even though it looks just fine in Internet Explorer, I'm going to assume
here that Firefox isn't to blame, but rather my incomplete understanding
of XHTML/CSS.

Can anyone tell me what is going on here?, and/or perhaps give me any
ideas on other ways to deal with this without having to revert to using
tables?

Thanks in advance,

Hans

Hmmm... maybe the <br /> imbetween your images looks to blaim? Thy just
letting the images wrap natuarally.

 

[Hans Nieser]

Hans Nieser wrote:

Hmmm... maybe the <br /> imbetween your images looks to blaim? Thy just
letting the images wrap natuarally.

Tried that, didn't fix it unfortunately. I'm pretty much out of ideas on
what to try (hell, I'm even considering using tables again).

 

[Hans Nieser]

I have recently started using XHTML 1.0 Strict and table-less layouts
(except for displaying tabular data ofcourse). I'm quite pleased with
the results in terms of cross browser compatibility and my HTML looks a
hell of a lot cleaner this way.

However I've run into an issue where I get some kind of padding or
margin around images in Mozila Firefox and it seems impossible for me to
remove them. Example page is online here:

http://www.aphax.nl/files/htmlstuff/01.html
http://www.aphax.nl/files/htmlstuff/01/styles/default.css

The problem is the vertical space between the top header image
(header_top.png) and the bunch of images (header_bottom_*.png &
tabs_*.png) below it, that form the lower part of the header and the
tabbar. I've tried all sorts of things ranging from putting everything
in DIVs to explicitly setting margin and padding to 0 px on all elements
involved to no avail.

Even though it looks just fine in Internet Explorer, I'm going to assume
here that Firefox isn't to blame, but rather my incomplete understanding
of XHTML/CSS.

Can anyone tell me what is going on here?, and/or perhaps give me any
ideas on other ways to deal with this without having to revert to using
tables?

Found a solution. I set "line-height: 0px" on the containing div element
and the padding/margin is gone.

 

[Hans Nieser]

Found a solution. I set "line-height: 0px" on the containing div element
and the padding/margin is gone.

Or even better, http://devedge.netscape.com/viewsource/2002/img-table/
(Not that I'm using tables, but I guess the same applies to DIVs).

Just in case someone googles this up.