Wednesday, January 31, 2007

[Typepad] [Firefox] Bits of my blog not responding

I'm currently going through a redesign of my blog and have found that when I look at my site in Firefox the top third of the blog, including the top two google ads, the top few links in the post and everything above the odeo & itunes buttons are dead.

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:

Anonymous said...

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

Matt said...

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

silverbrow said...

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

Anonymous said...

"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

Silverbrow said...

Great thanks