Web page issues on PC and Mac

Get Started
1

Hi guys, I’m having some real difficulties with a web page. I’ve created a page (that can be seen here.).

I’ve built it on Windows and tested it in Firefox 5.0, Google Chrome, and IE7 and it seems to display fine. However, when I move over to my Mac the entire design gets screwed up (on Firefox and Safari for Mac). I believe it could be something to do with the hacks that I have put into place to get around certain IE/Flash related problems.

If you could offer any help or advice I’d really appreciate it! :eye:

2

Hi JonnoW. Welcome to SitePoint. :slight_smile:

I’m on a Mac, and not seeing anything obviously out of place. What do you see that’s wrong?

3

Hi Ralph, thank you!

I checked again on my Mac and Safari appears to be fine for the most part. Firefox is completely screwed up though:


Firefox v3 on load.


Firefox on navigation item roll over.

Opera appears fine on load:

But rolling over causes the padding on the list item (which should be there to begin with) to ruin the layout:

Looking at the problems that I’m having the first thing to fix is the padding on list items issue. Can anyone tell me why this is occurring?

Secondly, the issue with Firefox. If you look closely at the first screen shot, you will notice on the right above the ‘Why Get Active’ button that there is some comment code appearing ’ –> '. I am assuming that this is from the IE hacks put into place to get the Flash working correctly, but why should this appear only on Firefox?

Many thanks

Jonno

4

I just updated to FF5 today, and it’s fine there, so it must be more forgiving than its predecessor. The –> may be the clue to the problem.

Try cleaning this comment up:

<!-- Flash buttons [COLOR="Red"]--	--	--[/COLOR]	-->

Get rid of those bits in red and see if that helps anything. The comment might be screwing up the page.

5

That’s great! The layout is now correct!

Just need to sort out that padding issue now! Do you know why the padding may not be displaying properly?

Thanks again. :slight_smile:

6

So are you saying that the menu links blow out on hover? I’m also not seeing that, and can’t see why that would happen. Is that in FF too?

7

That’s right yes, FF and Opera on Mac.

8

I see Opera isn’t picking up this code:

#menuNav ul a:link {
	background:#005785;
	display:block;
	padding:5px 0 5px 5px;
}

Perhaps get rid of the :link bit (which I wouldn’t use anyway):

#menuNav ul a {
	background:#005785;
	display:block;
	padding:5px 0 5px 5px;
}
9

That’s done it! Thanks so much for the help. Is a:link an old way of writing it or something? I suppose it’s completely unnecessary as an a is a link! haha

Thanks again

Jonno

10

Great!

a:link is still current, but to be honest, I’ve never seen the point of it. there was a recent thread where people discussed whether or not they use it. The response seemed to be half and half—those who strongly advocated it and those who didn’t. It’s little examples like this that remind me to avoid it!

11

That’s great, thanks very much for the help and advise!