Forum Moderators: not2easy
I working on a site and I did have the doctype as XHTML 1.0 Transitional, but switched it to XHTML 1.1 and everything shows the same, except there are 2 images that have obnoxious padding around them. I have no idea where it is coming from.
One is a logo image that has about 5px padding above and below (it breaks the column it is in and looks bad) and the other is a page split image I use that is 1px high and stretched across the page... it has like 10px above and 5px below... equally ruins the layout...
I can't get rid of the padding either..
I've gone as far as putting IMG { padding: 0; margin: 0 } in my stylesheet and that did nothing.
I tried putting the page split images inside a div and setting it's height to 1px. That moved all the other contents up to where they should be, but the image inside did not move at all! It just floated overtop of the content.
This is nuts.
should I just stick with Transitional? (everything is fine in Strict or 1.1 but the few images that are getting padding and apparently float attributes from god knows where).
[devedge.netscape.com...]
Tables or not, I think this page probably applies in this instance
Yes thank you... it will be good to note that the problem described on the page seems to apply to all cell type elements (DIVs, etc) and not just table cells that re-assemble "sliced & diced" images.
I solved the mystery by making a new image class:
IMG.blockImage { display: block; padding: 0; margin: 0; }
and adding it to each offending image:
<img src="/images/logo.gif" ... [other img tags] ... class="blockImage" />
(ok padding & margin are *probably* not needed, but if I have learned anything from making this site, it is always set the padding & margin on every element that can have it, even if null, or otherwise some browser is likely to apply its own default padding to the element.)
Thank you thank you thank you.... this was truly driving me nuts.
