Jump to content

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


esgarrouth19

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!
Link to comment
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]
Link to comment
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.
Link to comment
Share on other sites

  • 7 months later...
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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.