WordPress.org

1. mangoman
   Member
   Posted 3 years ago #

   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="http://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: http://www.thedailyjoe.net

   Thanks in advance for help & suggestions!
   John

2. haochi
   Member
   Posted 3 years ago #

   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;*/

3. mangoman
   Member
   Posted 3 years ago #

   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

4. haochi
   Member
   Posted 3 years ago #

   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.

5. mangoman
   Member
   Posted 3 years ago #

   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

Topic Closed

This topic has been closed to new replies.