Browser issue with my new site has got me (novice) stumped!

Hi all,

My first post, but this looks like a great resource of knowledgeable people. I’ve just finished (or I thought I had) designing my new site for my own business. I’m a musician and I sell CDs and downloads from my site. I used a template I brought and modified it in dreamweaver. I’ve built sites before, kind of understand css and html enough to get around it all. But I am definately a novice.

The new site is online, and is located at http://www.musicforballetclasses.com

Well I kept checking the site in chrome and everything looked and worked exactly like I wanted it to. However, I uploaded the site the the server this evening and when I view it in firefox or IE9 it does all sorts of wierd things. Firstly, clicking on things can cause them to jump and move. An example of this would be on the index or online shop pages where you click the rollover image of a cd and it moves, or you click the add to cart buttons and they get bigger or shift position.
Also, there are issues such as the social media buttons on the top nav bar and the bottom nav panel not displaying at all in IE9 or Firefox.
I’ve never had issues like this before, and I’m at my wits end. I just don’t know what is causing this to happen. I tried posting this on the site review thread, but it would not let me, I assume because I’ve just registered.
Is anyone out there able to help me or shed some light on this? I need the site to work properly and look professional, and at the moment its doing neither!

many thanks,
Charlie Mathews

It seems related to the rule for *:focus on line 36 of style.css

*:focus {
    outline:none;
    float: left;
    width: 150px;
    height: 32px;
    clear: left;
}

Focus is usually used to provide indication of a selected element, commonly anchors so that those who are tabbing through links rather than clicking them can see the link they are currently focused upon. The outline property, which is the usual focus default for anchors, has been set to none, but due to the asterisk in the selector the declarations - including float, width, height and clear - are being applied to any element that has focus.

It appears that browsers cope with this in different ways. IE8/9 are the least tolerant, with elements out of place on page load and jumping all over the place when clicked.

Remove the asterisk.

Remove all declarations other than outline:none;

Do some research into :focus to find suitable alternatives to outline:none that you can apply selectively to anchor elements. It’s best to provide some visible indication of links for those who navigate via keyboard or assistive technology.

Great, thanks for the detailed explanation. I’ll try this tonight, hopefully it will work. Many thanks for your help!

Hi again Victorinox,

Well I did what you suggested and it completely solved all the issues in IE9, and it solved the problem with elements moving about when clicked in Firefox. The only problem I have remaining now, (I know contact form doesn’t work yet, I’ve not set it up), is that in Firefox only, there should be a youtube button at the top next to the facebook button, and at the bottom of the page, there should be youtube and facebook buttons and links under the social media heading. This all displays correctly with IE9 and Chrome, any idea why Firefox has an issue with this?
Many thanks for your help already :slight_smile:
Charlie

What’s your domain name? The link you gave above is not working for me.

The site was down for a time, but is back now.

The YouTube button is visible in Firefox here.

Yep, see it now. :slight_smile:

Likewise, the button shows for me too. Perhaps refresh your browser / clear the cache etc.

Thats so strange. I see them in Chrome and IE, but even after clearing the cache, refreshing the page and restarting the browser, firefox only shows 1 facebook button at the top, but not the youtube button to the right of it, or the two buttons and text links at the bottom of the page. Think re-installing firefox would solve it? I guess its good you guys can see it, but I won’t feel happy everyone can if I can’t!

If you have any Firefox content blocking add-ons installed, see if disabling them does anything. Otherwise, I can only suggest you use Firebug to check what CSS is being applied in the browser.

Which version of Firefox and OS are you using?

Ahh I have ad blocker installed on ff. I’ll disable later and see if it fixes it. Thanks for the tips!

Ok, I checked and its definitely ad-blocker that’s causing the problem with those buttons in Firefox. As a web designer, is there a way I can make my buttons ad-blocker friendly? The Facebook one at the top works, I wonder why the Youtube one, or both at the bottom are blocked by ad-blocker. Anyone able to shed light on this? Help so far here has been invaluable by the way - thanks so much!
Charlie

Try altering the affected elements one at a time to identify where the blocking is being triggered: The href in the anchor, the name of the image file and the img’s alt text.

This can be done on the fly in Firebug rather than editing the file.

Unfortunately, we’re all at the mercy of distributed filter lists and there’s there’s no way of predicting what will be added to them, so it’s worth making regular site checks using a range of blocking plugins/add-ons.

Nothing in your code screams “AD!”, so perhaps one of the filter lists to which you are subscribed has targeted elements relating to YouTube. The preferences/settings of the adblocker may give some indication.

Ok, thanks Victorinox, that makes sense. I’ll have to do a bit of digging, but I never realised how problematic ad blocking plugins could be for everyone. Now I’ve done a bit more research, I’m not sure they are entirely a good thing. Thanks for the help, I’m pretty much sorted now everyone :slight_smile: