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! :confused: 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! :slight_smile: 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! :smiley:

Hi raylay, Welcome to the CSS forum :slight_smile:

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. :wink:

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

Hi raylay. Welcome to SitePoint. :slight_smile:

I would do something like this:

#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.)

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:



#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

:slight_smile:

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!

Hi Welcome to Sitepoint :slight_smile:

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 :slight_smile:

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.

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! :slight_smile: