Jump to content


Photo

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


  • Please log in to reply
4 replies to this topic

#1 esgarrouth19

esgarrouth19
  • Members
  • PipPipPip
  • Advanced Member
  • 50 posts
  • LocationTraverse City, Michigan, United States

Posted 25 September 2006 - 11:33 PM

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!

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 26 September 2006 - 08:54 AM

Try this as the css for the side bar:
#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;
}


#3 esgarrouth19

esgarrouth19
  • Members
  • PipPipPip
  • Advanced Member
  • 50 posts
  • LocationTraverse City, Michigan, United States

Posted 26 September 2006 - 02:35 PM

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?

#4 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 26 September 2006 - 03:28 PM

I see you're using a list for those images. I wouldnt use a list. I'd do this:
<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>
If you want to center them vertically add equal padding to the top and bottom of #footer.

#5 esgarrouth19

esgarrouth19
  • Members
  • PipPipPip
  • Advanced Member
  • 50 posts
  • LocationTraverse City, Michigan, United States

Posted 28 April 2007 - 09:38 PM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users