4 replies [Last post]
cinemaduro
cinemaduro's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2006-12-27
Posts: 13
Points: 0

Ok, I've never seen this before, and I've been trying to get rid of it for a few hours now. The temp page for the site is here:

Home page: [link no longer exists]
CSS: [link no longer exists]
The graphic buttons on the whole site, most noteably in the side menu apparently like to move around when they are clicked on in Firefox.

I have tried setting as many margin and padding styles as I know how, but to no avail. I can set the a:focus to none, but that just gets rid of the dotted line, and not the movement.

I wouldn't mind this as much if the buttons just moved when they were active, but then restored to their regular position when released, but they don't. They stay in the unintended position.

The funny thing is, this happens in IE7 also, but only with the "Houses" button in the side menu, no other graphics move around. I thought I had a pretty OK knowledge of CSS, but I've got no idea what's happening here. I've searched the internet and the forums, but I've had no luck finding a solution.

Anybody seen this before or know what's going on? Thanks in advance.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 20 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

We ask over and over and

We ask over and over and over, but no one seems to listen. Please validate your html!

Without valid html there is no CSS standard for you to apply. Results are mostly luck.

With six posts you should already know about this, yet you ask for help on a site with lots of html errors. Sorry if this sounds grouchy, but it's really very frustrating to see this over and over again.

Anyway your graphic links are a bad idea, and give no indication to the casual browser that they are actually links. That's a big usability no-no.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Add

Add a:active {outline: none;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cinemaduro
cinemaduro's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2006-12-27
Posts: 13
Points: 0

Still troubleshooting

Ed Seedhouse wrote:

With six posts you should already know about this, yet you ask for help on a site with lots of html errors.

Thank you for your response.

I already validated the CSS, which had no errors. And the HTML errors consisted of three missing alt tags, and some absmiddle alignments on the home page, these are not causing the problem I'm having. I haven't validated the whole site yet, because I'm not finished with it. I am also working with somone who is not experienced, and I don't have the time to check each page when she finishes them. I will, however, check the whole site before it goes live.

I also have html versions of all of my graphics links (and alt text + name text), so usability shouldn't be impaired, as far as I understand.

To: kk5st

Thanks for the suggestion, that works well for getting rid of the dotted outline, but I don't mind that so much. The main trouble I'm having is that the actual graphics move around when clicked using FF. The outline shouldn't effect padding or margins or anything, so I'm not sure what is causing them to wiggle.

I even went in and voided all the unspecified space by useing the little * {margin: 0; padding: 0;} bit in my CSS to try and wipe out the movement, but it didn't fix this particular problem either.

Other suggestions will be graciously accepted.

cinemaduro
cinemaduro's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2006-12-27
Posts: 13
Points: 0

I solved this. Basically, I

I solved this. Basically, I was accidentaly specifying a global anchor property when I thought I was connecting the property to an id tag.

I had:

#nav a:link, a:visited {
padding: 2px;
}

instead of
#nav a:link, #nav a:visited {
padding: 2px; {
}

I didn't catch it until I printed the 6 page style sheet out and got a fresh look, and then it jumpped right off the page. I can't believe I spent so long on that one....a real head slapper. Interesting how FF and IE treat that a bit differently.

Got the whole thing validated too, it's going up tonight. Thanks for the extra sets of eyes.