Jump to content

Archived

This topic is now archived and is closed to further replies.

esgarrouth19

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

Recommended Posts

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!

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.