However, if I look at the same thing in Internet Explorer or Safari I have no such problem.
Could anyone tell me what the problem might be please. I am testing this all out before launching on my main site so you can find the problem I'm referring to here at Silverbrow on Food - New Logo. I think it must have something to do with my CSS or HTML but for the life of me can't figure it out.
Many thanks in advance.
Anthony from Silverbrow on Food
5 comments:
Anthony,
I looked at your site in Internet Explorer, Firefox (1.5.0.9), and Opera. I haven't a clue why the links are dead in Firefox. I did notice some other weirdness though. In I.E, and Opera, the links worked fine. And in the top left corner of your banner image (which is gorgeous, by the way) are the underlined grey words New Logo, in a fairly large font. Those words don't show up when the site's loaded in Firefox.
I copied the source in each browser, and saved it as silverbrow_ie.html, silverbrow_opera.html, etc... The code in Opera and IE was 503 lines. The code in Firefox was 521 lines. I did notice that the source as copied from firefox had some difference in the spacing between the lines, and it may be that it adds enough spaces throughout that that accounts for the difference. But still, if it's arbitrarily adding a line between two others, it's hard to say what else it might be adding that's interfering with your links.
Sorry I can't be of more help. It's been a LONG time since I did any HTML, CSS work. Just thought I 'd mention what I saw. Maybe it'll help you track down the issue.
Charles
It looks like the problem is with the banner header CSS entities, as referenced here:
#banner-header
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 15px 15px;
}
#banner-header a
{
display: block;
left: 0;
top: 0;
height: 270px;
text-indent: -1000em;
}
#banner-description
{
overflow: hidden;
width: 0;
height: 0;
margin: 0;
padding: 15px 15px;
text-indent: -1000em;
}
Basically the #banner-header element is "absolute" positioned in the top left corner, with height and width 100%, and it's overlapping all the content underneath it, which is stopping you from being able to click it. I'd modify or remove that element from your style sheet and it will stop the problem.
Cheers,
Matt
Matt, I love you, seriously you have saved my life. Typepad are usually pretty good at answering these questions, they didn't have a clue. Thank you so much.
One quick query, I took your advice to mean that I should delete the position: absolute;
width: 100%;
height: 100%;
attributes, which I did. Did I need to delete all three? I don't seem to be having any problems having deleted all three, but wanted to check what you meant.
Charles, thanks for the kind words about the logo, that's down to Julian Knight at www.colourwork.com. The man's a genius.
As for your comment about the title, I can't see that. Can you explain how I can replicate it, or whether you're still seeing it.
thanks v much again
Anthony
"As for your comment about the title, I can't see that. Can you explain how I can replicate it, or whether you're still seeing it."
Anthony,
Nope, -- not seeing it now in any of the three browsers I have.
Charles
Great thanks
Post a Comment