Replacing Title with Image (logo)

  • I’ve tried several unsuccessful techniques over the last 7 days to replace the Title in the header with an image/logo …but it still doesn’t display properly in IE and I’m now completely stumped.

    Here’s the CSS code:

    #logo
{
	img:url(images/dj_logo2.png);
	height:55px;
	width:100%;
	float:left;
	padding-top:30px;
	padding-left:210px;
	padding-bottom:15px;
//	text-indent: -9999px;
}

#logo img
{
	float:left; padding-bottom: 0.4em;
}

    And here is the header.php code:

    <div id="logo">
<a href="<?php bloginfo('url'); ?>">
  <img src="https://thedailyjoe.net/dj_logo2.png" alt="The Daily Joe: Marketing insights from Joe Kutchera" />
</a>
    <div class="description">
      <?php bloginfo('description'); ?>
    </div>
  </div>

    Can anyone identify what I can do to fix it to show properly??
    Site: https://www.thedailyjoe.net

    Thanks in advance for help & suggestions!
    John

Viewing 4 replies - 1 through 4 (of 4 total)

  • What do you mean “doesn’t display properly”?
    I can see the logo in IE perfectly.

    BTW are you trying to comment out // text-indent: -9999px;
    ? This is how to do it correctly.
    /*text-indent: -9999px;*/

    Thread Starter mangoman

    (@mangoman)

    Thanks, haochi.

    I’ve uncommented that line correctly now…

    However, the page width remains problematic – it’s too wide (it extends beyond the margin of the template) and I haven’t figured that out.

    The logo seems to be poistioned OK, yet the description still doesn’t appear in IE, and in Safari it doesn’t begin at the left margin (where it should be!).

    Regards,
    John

    You can:
    1) change #logo‘s width to 500px or something like that, or
    2) apply padding-left:210px; or margin-left:210px; to the image inside #logo rather than #logo itself.

    Doing one of those two should fix the problem, #1 is preferred.

    Thread Starter mangoman

    (@mangoman)

    Your tip didn’t “fix” the problem, so I went back to the original stylesheet – and started over. ??

    I discovered that the #img was the culprit:
    background:url(images/shadow.gif) no-repeat right bottom;

    Once I started there, I was able to adjust the padding, etc. – and now it looks OK.

    Thanks for your help!!
    John

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Replacing Title with Image (logo)’ is closed to new replies.