SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    button background image cutting off in IE (& in FF on 1 computer, but not another?!?)

    Hi everyone, this is my first post - I've always found answers in other's posts but not this time! So thank you all for your help! I have two issues here:
    First Issue - My background image is being cutoff in IE (and on my husband's computer's FF but not my computer - strange secondary issue) Here's an image of all three: http://chrisgallop.com/testsite/bg-cutoff.jpg

    From what I can tell the height of the a tag is cutting off the bottom of the image. I've tried adding/changing the line-height, height, width, display-inline on all the different tags to no avail. I'm learning CSS and just not sure what else to try, please help! Sorry in advance for the messy code - I'm trying to learn to be cleaner and less redundant! :-) Here's the site: Chris Gallop | 3D Artist Portfolio

    CSS:

    #contactRss { width: 960px; height:20px; font-size:11px; font-weight:normal; color: #646464; margin: 0 auto; padding-top:10px; }
    a.header-rss { background:url(../images/rss1.gif) no-repeat right; background-position:53px 0px; }
    a.header-rss span { margin-right: 20px; }
    a:hover.header-rss { background-position:53px -21px; }

    and IE Conditional CSS:
    a.header-rss span { margin-right: 0px; padding-right: 20px; }
    a.header-rss { background-position:51px 0px; } *Bg cuts off on right in IE*
    a:hover.header-rss { background-position:51px -21px; } *Bg cuts off on right in IE*

    HTML:

    <div id="contactRss">
    <div class="left"><a href="chris(at)chrisgallop.com" class="email">chris(at)chrisgallop.com</a> | (858) 212 - 1332</div>
    <div class="right"><a href="http://feeds.feedburner.com/chrisgallop/wlbK" target="_new" class="header-rss"><span>RSS Feed</span></a></div>
    </div>

    I also noticed that on my husband's FF the image is cutoff on the right, unlike mine - just as it does in IE, hence the bg position update. And I'd love to learn how the same browser can render differently if anyone knows! Thanks again!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi raylay, Welcome to the CSS forum

    If you will set a float on that <a> with the RSS BG image it will generate a block box around it, or you could set it to display:block;
    Either way, then it will be capable of taking dimensions and you can ensure that the BG image will show by setting an adequate height.

    From there you can set a line-height equal to the <a> height to center the text vertically. You could do away with that span as it is really not needed, I nulled out the span's right margin and made it right padding on the <a>. Then position your BG image all the way to the right.

    Give this a try and see if it fixes all your browsers. It was clipped in FF for me as shown in your SS but these changes fixed it.

    Code:
    #contactRss a.header-rss span {
        /*margin-right:20px; moved to "a" right padding*/
    }
    #contactRss a.header-rss {
        float:right;
        height:17px;
        line-height:17px;
        padding-right:20px;
        background:url("../images/rss1.gif") no-repeat 100% 0;
    }
    #contactRss a.header-rss:hover {
        background-position:100% -21px;
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi raylay. Welcome to SitePoint.

    I would do something like this:

    Code:
    #contactRss a.header-rss {
        background: url("../images/rss1.gif") no-repeat scroll right 0 transparent;
        display: block;
        line-height: 16px;
        padding-right: 20px;
    }
    #contactRss a.header-rss:hover {
        background-position: right -21px;
    }
    Then just get rid of the <span>.

    This way, you also shouldn't need a separate style for IE, so make sure to get rid of that, or at least update it.

    EDIT: Whoopsies! Should have refreshed the page first. Ray had already answered the question. (Takes me ages to get IE up and running on this Mac.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Welcome to SitePoint.

    The first thing that comes to mind is your transitional DOCTYPE. Use this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    and it will make IE use the same box-model ( width/height/padding) as all other browsers. ( this may mean some of your OTHER IE specific code may not be necessary either, so if it seems like the site breaks totally in IE after the DT change.. don't panic)

    I am looking through your code ( the actuall site, not the snippett provided) It is possible you husband computer is using a different font/ base font-size, etc than yours.

    The reason why this is important is that you seem to have made your caluclation based on font size and pixels:

    #contactRss { width: 960px; height:20px; font-size:11px; font-weight:normal; color: #646464; margin: 0 auto; padding-top:10px; }
    which is kinda risky, as you can see. Other issues can be brought up about this practice.. but lets focus on the issue at hand.

    you also don't need that span. on the RSS side


    Altering your CSS and your mark-up thusly out to solve your issue:
    Code:
    #contactRss { width: 460px;  font-size:11px;   line-height:15px; font-weight:normal; color: #646464; margin: 0 auto; padding-top:10px;  }
    a.header-rss { background:url(rss1.gif) no-repeat right; background-position: right 0; padding-right:20px; float:left; height:21px; }
    a:hover.header-rss { background-position:right -21px; }
    <div id="contactRss">
    <div class="left"><a href="chris(at)chrisgallop.com" class="email">chris(at)chrisgallop.com</a> | (858) 212 - 1332</div>
    <div class="right"><a href="http://feeds.feedburner.com/chrisgallop/wlbK" target="_new" class="header-rss">RSS Feed</a></div>
    </div>
    Hope that helps


  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Thank you everyone for the quick expert advice! I was always too "scared" to post a "stupid" question, but I have learned so much already from your answers. I am very encouraged, Thank you!

    I'll make the changes and remove the <span>.

    I also would have never known about the DOCTYPE change and will try this out as well. Thanks Dresden!

    As far as the riskiness of basing calculations on font size and pixels...I don't quite understand that but would this be related to using ems instead? I have read that it is better to use ems but I'm not sure how that works if you want to ensure element placement. (Does that even make sense?!) For instance, if you wanted to keep a font size small like at 11px rather than 70% ems and then someone's default size is 20px (or something huge) - wouldn't that start moving elements around because of the larger size? Maybe this is the wrong place to ask, but if you have time to point me in the right direction then thanks again!!


    Thanks everyone!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Welcome to Sitepoint

    if you wanted to keep a font size small like at 11px rather than 70% ems and then someone's default size is 20px (or something huge) - wouldn't that start moving elements around because of the larger size
    The first rule of web design is don't mess with the users preferences. If they have set their text to a large size then that's what they want and they won't like you coming along and forcing then to read small text. This is why ems are a good choice because they base the layout on what the user has as their default.

    It does of course make things a little awkward if you have to line things up exactly but again that is something that you should have in mind before you draw a picture and try to code it. Don't make fixed height unbreakable elements but design with the thought that this may be bigger in some browsers or smaller in others and try to cater for all. Sometimes we all break the rules to get the job done but in general always try to cater for as many people as possible. If you have to use pixels to get things to match up then just make sure generally that you aren't setting very small text sizes and at least give your users a chance of reading.

    The web isn't print and different rules apply. We all want nice designs but we also want usable content foremost. Always expect the unexpected and code accordingly

    Wow! Thank you everyone for the quick expert advice! I was always too "scared" to post a "stupid" question, but I have learned so much already from your answers. I am very encouraged, Thank you!
    Sometimes our criticisms can seem harsh especially to newbies but they are meant to be helpful and put you on the right track from the start. There's never a nice way to tell someone they are doing it wrong.

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul 0 that totally makes sense and I appreciate the feedback. And I totally agree - constructive criticism makes us better artists and developers. Your feedback is so very appreciated! :-)


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
  •