And where would your blog be?
Hello kmessinger,
Thanks for the reply.
The blog can be found here:
http://www.concealthis.com/
If you load it using IE, you’ll see my logo on the header section. Load with any version of Firefox, and it will not only fail to load the image, but the two “subpages” do not display right.
I can’t figure this out and it is driving me crazy.
Any help is appreciated!
Thanks in advance…
–mike
Try to validate your code here. http://validator.w3.org/
I think this may just be html problems.
kmessinger,
thanks again for the super fast response!
I have validated the code and it spit out a total of 39 errors. However, none are related to the logo or layout. In fact, mostly all are related to the “favicon” icon which I know I have placed in the right place and is working. The rest are practically all related to the meta tags. Other than modifying the main index page for meta tags, all tags are done through WordPress. So yes, both of these are not only unrelated, but don’t make much sense to me.
Any other suggestions? I would really like to get the logo and the sub-pages to display properly in Firefox. I run another site and let me tell you, it was hard to get the site to display properly with this browser.
Any other suggestions is greatly appreciated. I’d be willing to pay for some help to tweak for Firefox at this point since I simply don’t have the time from running both sites! 🙂
–mike
If you start with validated code, it makes finding problems easier. They may not make sense but correct is correct. You can also validate your css.
Is this the image that does not show in FF?
http://www.concealthis.com/wp-content/themes/freedom-blue-widgetized/images/top.png
kmessinger,
No, that’s not that logo. Where are you getting that from?
Here’s the code on the stylesheet that contains the path to the actual logo…
/***************** Header Logo ************************************************/
#header #logo {
height: 70px;
width: 980px;
margin: 0 auto 0 auto;
}
/* Uncomment text-ident and background for an logo image instead of the text */
}
#header #logo h1 a {
background: url(images/conceal-logo7.gif) no-repeat 10px 100%;
display: block;
height: 100%; width: 100%;
text-decoration: none;
color: #fff;
}
#header #logo h1 a:hover {
color: #ddd;
}
I would say your issue might be to do with line 107 of your style sheet.
It currently reads:
}
#header #logo h1 a {
background: url(images/conceal-logo7.gif) no-repeat 10px 100%;
display: block;
height: 100%; width: 100%;
text-decoration: none;
color: #fff;
}
That first } should be removed – let us know if it works.
Other than that there are a whole host of validator errors which will cause funny things to occur. Your favicon is a problem because the link element is sitting outside your <head></head>.
I assume the missing image is this:
http://www.concealthis.com/wp-content/themes/freedom-blue-widgetized/images/conceal-logo7.gif
Not only that you ARE calling /top.png as well. Look more carefully in your style sheet – you’re calling 2 diff images for your header in addition to the errors. There is a reason kmessinger pointed you to the validator.
Thank you all for the replies.
However, removing the “}” did not do it either.
Take a look at the comment right above it…
/* Uncomment text-ident and background for an logo image instead of the text */
#header #logo h1 a {
background: url(images/conceal-logo7.gif) no-repeat 10px 100%;
display: block;
height: 100%; width: 100%;
text-decoration: none;
color: #fff;
}
#header #logo h1 a:hover {
color: #ddd;
}
LenK,
Yes, it is calling “top.png” but that is the background and not the logo. Looking at the comment above, I did exactly as it stated and removed the comment marks from the code above to activate the logo. Still displays only in IE!
Any other suggestions? Thank you all…
Ok. I’ve had a pain in me arse with this one and I don’t know why – but my usual live style sheet edits are getting all messed up (possibly due to @import instead of link rel).
I can’t test this to be sure so I’m going off the top of my head on this one.
Let’s try a different method to get that background image in there.
Given that your HTML for the header is:
<div id="logo" onclick="location.href='http://www.concealthis.com';">
<h1><a title="ConcealThis.com - Your Concealed Carry Resource & Forums: Home" href="http://www.concealthis.com/"></a></h1>
</div> <!-- [logo] -->
Remove your current #header #logo rule and try:
#logo {position: relative;}
#logo h1, #logo h1 a {
top: 0;
left: 0;
width:980;px
height:70px;
border: none;}
#logo h1 {
position: relative;
overflow:hidden;
margin: 0;
}
#logo h1 a {
display:block;
position:absolute;
z-index:10;
background: url(images/conceal-logo7.gif) no-repeat left center;
text-decoration: none;
}
Hope this works, it always works for me?!
alexleonard,
Tried that. That actually removes the logo from IE as well!
Any other ideas? It has to be in this section of code. I’m going crazy here.
I really like this “theme” and would like to fix these two minor Firefox issues.
Thanks!
–mike
Ok. It’s way to late for me to be trying to work this out, so why not just drop the CSS background image method here and manually insert an image in your header.php file
<div id="logo">
<a title="ConcealThis.com - Your Concealed Carry Resource & Forums: Home" href="http://www.concealthis.com/"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/conceal-logo7.gif" title="ConcealThis.com - Your Concealed Carry Resource & Forums: Home" alt="ConcealThis.com - Your Concealed Carry Resource & Forums: Home" width="x" height="x" /></a>
</div> <!-- [logo] -->
Your style sheet should read:
#header #logo h1 a img {border: none;}
#header #logo h1 a {text-decoration: none;}
If that doesn’t work I have a few other ideas, but I’m away to bed now so it’d have to wait til tomorrow.
alexleonard,
Still no go! 🙁
That didn’t work at all. I’ve tried a few other things myself, all of which failed.
Any other suggestions?
Thanks,
Since the logo can be forced in like this,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen">
<!-- @import url( http://www.concealthis.com/wp-content/themes/freedom-blue-widgetized/style.css ); -->
</style>
</head>
<body id="home" class="log">
<div id="header">
<div id="logo" onclick="location.href='http://www.concealthis.com';">
<h1><a href="http://www.concealthis.com"><img src="http://www.concealthis.com/wp-content/themes/freedom-blue-widgetized/images/conceal-logo7.gif" width="344" height="70" border="0" /></a></h1>
</div></div> <!-- [logo] -->
</body>
</html>
that should confirm the error is in the style sheet. This also should show the image could go in the header.php file.
Thanks kmessinger – when he said that placing the image directly into the html didn’t work I wasn’t sure what to say – glad you confirmed this.
