SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with padding?

    take a look at this:
    http://www.blairdee.info/vcard/index.html#

    if you look at the colored boxes at the bottom ov the navigation on the left side you will see that when you roll over one of them a black border appears. the problem is that there appears to be a few pixels of padding below each image and the bottom border - i cant seem to figure out why. can someone please help?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's just the space left under images, you can get rid of it by setting vertical-align:bottom; or one of hte other fixes shown here
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It's just the space left under images, you can get rid of it by setting vertical-align:bottom; or one of hte other fixes shown here
    Ryan, i noticed you haven't got a fix for opera. Ever tried to setting the line-height to 0 on the parent element?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  4. #4
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bdee1 View Post
    take a look at this:
    http://www.blairdee.info/vcard/index.html#

    if you look at the colored boxes at the bottom ov the navigation on the left side you will see that when you roll over one of them a black border appears. the problem is that there appears to be a few pixels of padding below each image and the bottom border - i cant seem to figure out why. can someone please help?
    You can get rid of the problem as well by putting the border on the -
    The selector was empty when I took a look at your page. You can make the border any color that you prefer.
    Code CSS:
    #nav li #colors img {
    border:1px solid #ffffff; }
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Ryan, i noticed you haven't got a fix for opera. Ever tried to setting the line-height to 0 on the parent element?
    If you are referring to the font-size:0; trick (which I did a horrible example up there) no I haven't even dabbled in it. I think the float/display/vertical-align are more then enough options. I never felt a need to delve further.

    I just came across the font-size trick a while back and thought to include it just to be thourough.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    If you are referring to the font-size:0; trick (which I did a horrible example up there) no I haven't even dabbled in it. I think the float/display/vertical-align are more then enough options. I never felt a need to delve further.

    I just came across the font-size trick a while back and thought to include it just to be thourough.
    I came upon the line-heigth trick that should work but never tested it. Supposedly it works for Opera.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes it does work . However this way isn't really suitable because there will most likely be text...but there are some cases where there isn't.

    I personaly will stick with the other 3 cases because it only involves 1 property and not 2
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It all depends on the situation: setting the display property to block for instance may cause problems of it own as each block element wants a line all to itself.
    Floating on the other hand:the text aligns to the top of the float element. If this is what you want, you’re all set. If not, the inline vertical-align is needed. Second, you will likely want the floated image to be contained by its parent. In this case, you'll need to set the parent to {overflow: hidden;}.

    So, enough choices to pick, depending the situation :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes I know . THat's why I never felt the need to dabble with an Opera fix for the font-size chocie.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure i follow you: the font-size is a way to make it work but doesn't work for Opera. The line height is a way to make it work and works also for Opera. That was the point i was trying to get across :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I understand. But my point is, there are so many different fixes to choose from, why try and find a workaround for the font-size trick in Opera? 2 properties using that way, 1 property using 1 of the other 3 ways.

    Didn't seem worth it .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well i really must be slow today.... i still don't get it: font-size works across browsers minus opera. Line-height works across browsers included opera (although i haven't tested). So i'm not understanding the 2 properties instead of 1. Unlees line-height indeed is just for Opera (gonna test it later tonight).
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    ThaT's my point.

    vertical-align:bottom . 1 property and BOOM. All browsers kill the space.

    font-size:0;..not the best because what if we have text? Also Opera doesn't work with it. So we need to find another fix..line-height:0;! 2 properties instead of one.

    I don't see the need for 2 properties wehn either vertical-align/float/display can kill the space, and at least 1 can fufill your requrements of what you need
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •