14 replies [Last post]
jethrodesign
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-10-10
Posts: 11
Points: 0

Hi, I'm trying to use image replacement on tags to add stylized headers to certain sections of my site. I've been using some of the CSS ZenGarden sites as examples (most use the FIR method).

The problem I'm getting (only in IE on a PC) is that there seems to be a minimum height that IE will display the h1 at. There is currently no text in the h1 tag. It is just for the image right now.

I've added 0px margins and borders globally, and also tried applying on the h1 style itself. I have a height specified for the h1 and it renders properly in all browsers on a Mac (Safari, FF, and IE), and FF and Netscape on a PC. IE on a PC will expand the height if I go really big, but stops condensing at a certain point (larger than the size I specify).

I'm stumped. A lot of the example sites I see use this method just fine. And I haven't even seen a mention of this issue, which seems like it would be pretty prominent.

Any ideas????

Thanks!

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 32 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Image Replacement on h1 - Improper Height in IE

I have my guesses, but before I make any assumptions...seeing your code or a link would be most helpful. Laughing out loud

- r

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Image Replacement on h1 - Improper Height in IE

it's the phont-seyes, isn't it Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

jethrodesign
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-10-10
Posts: 11
Points: 0

Image Replacement on h1 - Improper Height in IE

OK, this is in early development, but here's the code so far. It's the headers in the #rightcol causing the problems.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>TEST SITE</title>
<link href="nlhn_mainstyles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<div id="banner"></div>

<div id="insetcontainer">

<div id="nav"></div>

<div id="leftcol"><h1></h1><p>Body text for left column goes here.</div>

<div id="rightcol">

<div id="affiliate">
<h1></h1>
<h2></h2>
<p>Right column body text goes here.</p>
<a href=javascript:;></a>
</div>
</div>

<div id="footer"></div>
</div>
</div>
</body>
</html>

CSS

/* CSS Document */

* {margin: 0; padding :0;}

html, body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #F0F0F0;
background-color: #000000;
font-size: 14px;
line-height: 25px;
letter-spacing: .1em;
}
#wrapper {
background-color: #3C3C3C;
width: 784px;
margin-left: -402px;
position: absolute;
left: 50%;
height: 100%;
background-image: url(images/wrapper_background.gif);
background-repeat: repeat-y;
}
#banner {
background-image: url(images/flash_placeholder.gif);
overflow: hidden;
background-position: left top;
height: 155px;
width: 784px;
}
#insetcontainer {
width: 764px;
background-image: url(images/content_background.gif);
background-repeat: no-repeat;
position: relative;
border-left: 20px solid #000000;
background-position: right top;
}
#nav {
height: 23px;
background-color: #4C4C4C;
}
#leftcol {
float: left;
margin-top: 18px;
margin-left: 23px;
height: 300px;
width: 497px;
}
#leftcol h1 {
background-image: url(images/home_headline.gif);
background-repeat: no-repeat;
height: 55px;
}
#rightcol {
width: 212px;
float: right;
margin-top: 16px;
border-bottom: 1px dotted;
border-left: 1px dotted;
}
#affiliate h1 {
background-repeat: no-repeat;
width: 100%;
height: 18px;
background-image: url(images/home_affiliate.gif);
background-color: #3C3C3C;
background-position: 8px;
}
#affiliateLogin {
background-image: url(images/home_affiliate_login.gif);
position: absolute;
height: 35px;
width: 56px;
left: 702px;
top: 108px;
}
#affiliate h2 {
background-image: url(images/home_affiliate_head.gif);
background-repeat: no-repeat;
background-position: 8px;
margin-top: 14px;
height: 18px;
}
#affiliate p {
font-size: 13px;
line-height: 22px;
letter-spacing: 0em;
margin-top: 8px;
margin-left: 8px;
}
#footer {
background-image: url(images/footer.gif);
clear: both;
height: 42px;
}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Image Replacement on h1 - Improper Height in IE

I'm still not understanding the problem. What is IE doing? Why don't you have text in the hx tags? You could move the text off screen with: text-indent: -9999px;

jethrodesign
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-10-10
Posts: 11
Points: 0

Image Replacement on h1 - Improper Height in IE

Yes, I will be adding text eventually. Just trying to get the concept working.

What I see in Explorer "appears" as if it were adding extra padding on top and bottom (I'm guessing 4 or 5 pixels) of the h tags.

If I use just a regular <div> tag, it works properly. Something about the h1 & h2 tags specifically.

I remember having trouble long ago with using header tags in tables and the extra space it would put below them. So I just quit using header tags long ago. I was under the impression, though, that adding the '0px' margins in CSS overwrites the normal h1 space after.

Anyone???

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Image Replacement on h1 - Improper Height in IE

<cough>font-size</cough>

Verschwindende wrote:
  • CSS doesn't make pies

jethrodesign
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-10-10
Posts: 11
Points: 0

Image Replacement on h1 - Improper Height in IE

Umm, thanks for the cryptic response.

- Are you implying that I should add a font-size element to the h1?
- Or are you suggesting that I remove it from the 'body' style.

If the latter, I already tried that to no avail.

And I'm sorry for the <cough>smokey</cough> atmostphere in this thread.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Image Replacement on h1 - Improper Height in IE

IE, as you probably know, increases boxes to contain all content. It also increase boxes to contain the line-height (which is determined by font-size if not declared). So set the (cough?) font-size and line-height to something less than the 18px you're looking to achieve.

jethrodesign
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-10-10
Posts: 11
Points: 0

Image Replacement on h1 - Improper Height in IE

OK, tried the <cough>cough method</cough> using a font-size less than the 18 pixel height. Sure enough, it worked.

Thank you very much! I'm very surprised this isn't mentioned more when talking about image replacement (I was reading from the CSS Zen Garden book, but no mention).

UNFORTUNATELY, I was hoping this would also fix the issue with the left column not aligning properly (also only in IE on a PC). The left column is pushed over probably at least 10 or 15 pixels to the right in IE on PC.

Since the code is listed above, anyone want to provide the 'cough code' for this? Thanks again!!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Image Replacement on h1 - Improper Height in IE

I'm not sure which bit you think is out of place, but you've got a 20px left border on #insetcontainer which to me looks wrong in FF & IE or it could be the margin-left on #leftcol which is causing your problem.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jethrodesign
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-10-10
Posts: 11
Points: 0

Image Replacement on h1 - Improper Height in IE

Sorry. The #insetcontainer thing is a bit confusing without seeing the graphics.

Basically, the top banner (which will be Flash) has a logo that sticks out 20px to the left of the main layout (or at least will 'appear' to). That's why I had to add the #insetcontainer to shove everything 20px to the right to complete the effect. Again, when viewed with graphics it appears to be a 764px wide design with a logo that sticks out a bit to the left on top.

It's the content inside of the #leftcol that is over too far to the right in IE/PC only (NN7, FF on PC and IE, Safari, FF on Mac all display correctly). It should be inset 20px from the left edge of the #insetcontainer.

Hope this clears it up a bit. Thanks.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Image Replacement on h1 - Improper Height in IE

add display:inline to #leftcol

and the reason why:
http://www.positioniseverything.net/explorer/doubled-margin.html

jethrodesign
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2005-10-10
Posts: 11
Points: 0

Image Replacement on h1 - Improper Height in IE

OK, wolfcry 911. You get my vote for most helpful forum poster ever (and I use forums a lot)!

This is the first site I've tried designing using CSS instead of tables layouts. And we have an extremely tight deadline (2 weeks to design and program!).

I've been very close to reverting to table layouts just to beat the deadline. Little things like this are going to kill me! But it seems like this is the 'way of the future', so there's no time like now to force myself to learn. Just seems like there are a TON of workarounds you have to know about. I've got the books, but they're really thick and time is short.

Would you be available for off-line consulting if we needed? It may only be an hour or so. I was actually trying to find someone locally (Los Angeles) but didn't know where to start. This site needs to be 95% functional by next Tuesday and my next issie to tackle will be drop-down menus. I'm not looking forward to it!

Thanks again!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Image Replacement on h1 - Improper Height in IE

Laughing out loud Thanks jethrodesign. Even though it's not quite true Cool .
There are plenty of others on this forum with more experience and knowledge than myself - and they're all more than willing to help out as well. As far as reaching me off-line, send me a PM or an email (see my profile), but you would probably do better to post here. Heck, you'll probably find me here anyway.

Your wanting to revert to tables is understandable - you know tables. CSS is hard to learn in two weeks - it takes some time. Most of the hacks involved are for IE (which you've probably already come to realize). Continue to code with standards in mind and you'll satisfy most browsers, then hack for IE. You'll learn the IE bugs as you continue.