h1 Image Replacement Margins (IE7)

@msmith29063Mar 20.2008

I’m using the following method for replacing the h1’s with images. The problem is that in IE7 the margins above and below the header image seems to be ignored. It works fine in Firefox and Safari. I can’t figure this one out. Any ideas? Thank you so much for your help!

CSS:

[CODE].titleHome { background-image: url(“../images/home_title.gif”); background-repeat: no-repeat; text-indent: -9999px; margin-top: 16px; margin-bottom: 20px; width: 429px; height: 42px }[/CODE]

HTML:

[CODE]<h1 class=”titleHome”>Title Here</h1>[/CODE]

to post a comment

CSS

9 Comments(s) _↴

@PrimalMar 20.2008 — #It didn't seem to ignore the margins for me in IE7, but you could try padding instead of margins. It may not be the best way, but since it's image replacement, does it matter? Be sure to add a background-position with at least the horizontal position set to center. I hope that helps...

@msmith29063authorMar 20.2008 — #Thanks for the reply. Anyone else have any ideas why the margins above/below the image is not working?

@KDLAMar 20.2008 — #When you say "ignored," do you mean that IE7's margins are larger than those stated? If so, that's attributable to a default setting for line-height, which IE applies to any heading tag. Set the line-height to one.

KDLA

@msmith29063authorMar 20.2008 — #There's NO margin above or below. It works in FF/Safari. Not in IE. I tried setting the line-height for the h1 ELEMENT tag to 1 and that didn't do anything. Should I be setting the line-height in the h1 STYLE tag? Or does that still even need to be done? Thanks!

@KDLAMar 20.2008 — #Well, if it is a question of IE being too tight, setting the line-height won't help. As the previous poster mentioned, padding may be the correct way to handle this. Margins push surrounding content away; padding buffers the interior content with whitespace.

Personally, I usually just apply a line-height the height of my image to the heading, and don't apply padding or margins. If the image needs to be positioned, I use the background-position property to align it correctly.

(I also don't use the text-indent. Instead, I put the text in a span and set the display to none.)

@msmith29063authorMar 21.2008 — #Thanks for the reply, KDLA.

Anyone else have any ideas/recommendations? Thank you!

@msmith29063authorMar 23.2008 — #If anyone needs to see more HTML and CSS, here it is:

Here's the HTML:

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
   <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
   <title>Website Name</title>
   <link href="css/stylesheet.css" type="text/css" rel="stylesheet" media="all" />
  </head>
 
  <body>
   <div id="container">
   <div id="top"></div>
   <div id="main">
   <div id="header"></div>
   <div id="nav">
   ...
   </div>
   <div id="holder">
   <div id="homeLeft">
   <div id="homeLeftTop">
   [B]<h1 class="titleHome">Title Here</h1>[/B]
   <p>...</p>
   </div>
   <div id="homeLeftBtm">
   <div id="homeLeftBtmADCPA">
   <p>...</p>
   </div>
   <div id="homeLeftBtmServices">
   <p>...</p>
   </div>
   </div>
   </div>
   <div id="homeRight">
   ...
   </div>
   </div>
   </div>
   <div id="bottom"></div>
   <div id="copyright">...</div>
   </div>
  </body>
 
 </html>[/CODE]

And here's more CSS:

[CODE]body { background-image: url("../images/back_tile.gif"); background-repeat: repeat; margin: 0; padding: 0 }
 #container  { margin: 40px auto 20px; width: 812px }
 #top  { background-image: url("../images/top_fade.gif"); background-repeat: no-repeat; width: 812px; height: 6px; overflow: hidden }
 #main { background-image: url("../images/main_back.gif"); background-repeat: repeat-y; padding: 0 19px 32px; width: 774px; overflow: hidden }
 #header { background-image: url("../images/header_back.gif"); background-repeat: no-repeat; width: 774px; height: 183px }
 #nav     { margin-top: 8px; margin-bottom: 8px; margin-left: 16px; height: 16px }
 ...
 #holder  { position: relative; width: 774px; overflow: hidden }
 #homeLeft  { width: 515px; float: left }
 #homeLeftTop       { background-image: url("../images/home_left_back.gif"); background-repeat: no-repeat; padding: 20px 24px; width: 467px; height: auto !important; min-height: 180px }
 #homeLeftTop h1 { }
 #homeLeftTop p   { color: #777; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 24px; margin: 0; padding: 0 }
 #homeLeftBtm   { margin-top: 15px; width: 515px; height: 116px; overflow: hidden }
 #homeLeftBtmADCPA   { background-image: url("../images/home_adcpa_back.gif"); background-repeat: no-repeat; margin: 0; padding: 20px 24px; width: 239px; height: 116px; float: left }
 #adcpaLogo { margin-bottom: 10px; margin-left: 10px; float: right }
 #homeLeftBtmADCPA p   { color: #eee; font-size: 11px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 16px; margin: 0; padding: 0 }
 #homeLeftBtmServices   { background-image: url("../images/home_services_back.gif"); background-repeat: no-repeat; margin: 0; padding: 20px 24px; width: 168px; height: 116px; float: right }
 #homeLeftBtmServices p  { color: #eee; font-size: 11px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 16px; margin: 0; padding: 0 }
 #homeLeftBtmServices a  { color: #eee; text-decoration: none }
 #homeLeftBtmServices a:hover   { color: #ccc }
 #homeRight           { background-image: url("../images/home_right_back.gif"); background-repeat: no-repeat; padding-top: 20px; padding-right: 20px; padding-left: 20px; width: 205px; height: 331px; float: right }
 ...
 #dfsLogoHome       { position: absolute; right: 20px; bottom: 10px }
 #bottom  { background-image: url("../images/btm_fade.gif"); background-repeat: no-repeat; width: 812px; height: 6px; overflow: hidden }
 #copyright   { text-align: right; padding-right: 6px; padding-left: 6px; width: 800px }
 #copyright a  { color: #666; font-size: 10px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none }
 #copyright a:hover { text-decoration: underline }
 
 [B].titleHome   { background-image: url("../images/home_title.gif"); background-repeat: no-repeat; text-indent: -9999px; margin-top: 16px; margin-bottom: 20px; width: 429px; height: 42px }[/B][/CODE]

@WebJoelMar 25.2008 — # ...Be sure to add a background-position with at least the horizontal position set to center....[/quote] Does no harm, but the default postion 0% 0% and if only one position is stated (first value is the vertical one), "center" is assumed for the horizontal position.

so:

background-position:[B]top center[/B]; is the same thing as:

background-position:[B]top[/B]; and etc..

values are:

Default value: 0% 0%

top left

top center (or just [B]top;[/B])

top right

center left

center center (or just [B]center; [/B])

center right

bottom left

bottom center (or just [B]bottom;[/B] )

bottom right

@msmith29063authorMar 25.2008 — #Thank you. This is very helpful. I also found that floating the h1 style to the left works, also.

Also in #CSS _↴

Tables - Cell Alignment with CSS Using float to align 2 divs [RESOLVED] CSS Dropdown menu: two column list

Success!

Help @msmith29063 spread the word by sharing this article on Twitter...

Tweet This

h1 Image Replacement Margins (IE7)

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

h1 Image Replacement Margins (IE7)

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴