My H2 Uses CSS To Replace It With An Image-But Image Is Cropped

HTML & CSS
1

LINK-
http://jeffersoncountyvacation.com/outdoor-activities/marinas/

I am using an H2 for the page title. The words are using CSS to replace it with an image that reads “MARINAS”. It looks accurate in Safari but in Internet Explorer it crops off the bottom few pixels. Attached is a screen grab to visually explain what is going on. Can anyone help me figure this one out?

Todd

2

May be a good idea to set a height on the h2 (e.g. 35px)

3

Okay, I set the height to 35px for that one class which worked but now I cannot get the #page_title_top with the class .sports_facilities to work correctly. It is also getting cropped or clipped on the bottom portion. Just a few pixels are trimmed off.

I added the same property of height and set it to 35px which works for the top h2 but not for the bottom one. What gives? Can anyone figure this one out?

Todd

4

Note: The latest addition of height to the CSS seems to work in IE8 but not in IE7. Sheeesh. Wondering why…

5

You are concatenating your rules, which doesn’t work in <IE8.

E.g.

h2#page_title_top.sports_facilities

The first title is working because you also have

.marina {
    height: 35px;
}

You’ll need something like this for IE7 and under:

h2.sports_facilities {
    height: 35px;
}
6

Okay, so I think I have it working in IE7 and IE8 but I wouldn’t mind someone else still taking a look. It appears that maybe the problem was with using CSS shorthand.

I had originally set the class .marina to use:

.marina { background: url(/i/gfx_title_marinas.png) no-repeat; }

which was being cropped or trimmed in IE7 & IE8.

So I added a height:

 .marina { background: url(/i/gfx_title_marinas.png) no-repeat; height: 35px; }

and it started working in IE8 but not IE7.

So I was reading up on “haslayout” thinking that it might be the cause and it mentioned that some of the consequences of an element not having “layout” can include differences in the positioning of background images.

So that made me look at adding a horizontal and vertical position to the background shorthand - even though they are both zero.

.marina { background: url(/i/gfx_title_marinas.png) no-repeat 0 0; height: 35px; }

Now it works in IE7 and IE8… I think. And the reason I am saying that is because I am using a screen capture service (Adobe BrowserLab) to view the rendered results as opposed to having an actual IE environment.

7

EDIT: I think it also need line-height: 35px set…

8

Did you see my comments posted just before yours?

9

I did. I have added the input that you provided and most pages are starting to work… with a few exceptions.

Try this link-
http://jeffersoncountyvacation.com/dining-shopping/shopping/

I have an H2 with a class of “shopping” and the css shows that class (.shopping) with a height of 35px and a line-height of 35px and I have also added your suggestion of a class (h2.shopping) with a height of 35px and a line-height of 35px but it still does not work in IE8. Works in IE7.

Any ideas why?

10

Hi, did you manage to fix it? The <h2> isn’t cutting off the words and the alignment/everything is A-Ok :).

Viewing in IE7/8/FF

11

Yep, seems to be fine now.

Having to give a class to each instance is pretty inefficient, though. If all of your h2s are images like this, you could just set one rule for all h2s.

EDIT: I mean one height rule, as you obviously need a separate rule for each h2 if you have a different image on each one.

12

A height on the <h2> should not have been needed at all. So Todd, if you read this please break the site so I can take a look at it :). Normally something simple causes simple text to be cut off. Most of the time line-height is too small :).

13

Ryan,

I still don’t think I have this figured it out. Take a look at the h2 used in the site and see if any of them are clipped or trimmed off at the bottom of those graphics…

14

Try clearing your cache. IE8/FF don’t clip it (you say IE8’s the problem)