In Opera/IE, 3px bottom-padding is added to images

[esgarrouth19]

Opera/9.02
MSIE/6.0
Windows XP SP2
Windows Me

Those are the browsers and operatings systems that I have found this error in.  I have looked over my css/xhtml many times and do not think it is an error in my code. Could you guys take a look at my website and see if you have the same error, and if you do, if you know a way to fix it. I have tried padding-bottom:0px on many different objects, still doesnt work. There is no error in Firefox (1.5.0.7).

http://www.frohsenwebdesign.com/

The error can be seen below the XHTML 1.0 and CSS buttons in the footer of the page. In Opera, it is much easier to see because it simply overlaps the border with #eee below each of the three images. In IE, due to the CSS float bug, it just adds an additional pixel below the images, expanding the border 1px too far. Thanks!

[wildteen88]

Try this as the css for the side bar:
[code]#page #body #sidebar{
color:#000;
background:#eee;
padding: 0 15px 15px 15px;
margin:0px;
list-style-type:none;
border-bottom:1px solid #aaa;
border-top:0px solid #aaa;
border-right:1px solid #aaa;
border-left:0px solid #aaa;
-moz-border-radius: 12px;
}
#page #body #sidebar li{
color:#000;
background:#eee;
padding-top:15px;
}[/code]

[esgarrouth19]

Thanks, that helps with the portfolio section along the right side of the page, but I am still have troubles with the XHTML/CSS buttons in the footer.  Does anyone know how to fix this?

[wildteen88]

I see you're using a list for those images. I wouldnt use a list. I'd do this:
[code]<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="Valid CSS!" rel="nofollow"><img src="http://images.frohsenwebdesign.com/buttons/css.gif" alt="Valid CSS!" width="80" height="15" border="0" /></a>
<a href="http://validator.w3.org/check?uri=referer" target="_blank" title="Valid XHTML 1.0!" rel="nofollow"><img src="http://images.frohsenwebdesign.com/buttons/xhtml.gif" alt="Valid XHTML 1.0!" width="80" height="15" border="0" /></a>
<a href="http://www.getthunderbird.com/" title="Get Thunderbird!"><img src="/images/buttons/thunderbird.gif" alt="Get Thunderbird!" width="80" height="15" border="0" /></a>[/code]
If you want to center them vertically add equal padding to the top and bottom of #footer.

[esgarrouth19]

Well, I figured out the solution long ago, but completely forgot about this topic sitting around. The answer is that the images are Inline. It adds a baseline due to letters like g, j, p, q, and y because they go below the text. To fix it, all you need to do is set the display to Block :-) I hope this helps someone in the future.