Problem viewing page on a Mac

paulajackson · 07-19-2005, 01:26 PM

I've designed a webpage in CSS which looks fine on a PC, but someone looking on a Mac has said it doesnt display properly, nor do the links work. I've tried testing it on another Mac and its the same problem.

http://www.jacksonline.plus.com/pjtest2/songs.htm

Could someone please advise how I can make it compatible for the Mac, or if its not possible to?

Thanks

Paul

gogogadgetearl · 07-19-2005, 02:43 PM

first of all, stop using front page, it'll be the death of you. ;-)

secondly, it's not just mac versus pc, it's actually just internet explorer. i'm using firefox, and i'm seeing what i would assume to be the same thing that your mac friend is seeing. internet explorer is quirky at times (especially if you don't declare a DOCTYPE). i highly recommend getting firefox - if only for development purposes.

ok, now on to your problem.

--the menu: your 'button' class uses a % height. you don't want the height to resize with the height of the page, so use a static height, like 18px.

--the main content area: you have #main set to "Z-INDEX: -1;" this pushes the entire main content area behind the body tag. delete the z-index for #main, and it should look fine.

paulajackson · 07-19-2005, 02:51 PM

Hi

Thanks for the response.

I've viewed the page on a mac now and not all of the banner is showing (a bit from the left is cut off) and the menu is at the top of the page instead of under the banner.
Also the list of highlighted song titles on the page are meant to be links and they don't seem to work.

I'll do the two things you suggested. Would that solve the above problem?

I'll also consider the other things you mentioned. Thanks for that.
Much appreciated

Paul

gogogadgetearl · 07-19-2005, 03:42 PM

yes, the 2 things i suggested will fix some (not all) of the display problems for most of the browsers out there.

as for the problems that you just mentioned, it seems that you're using a LOT of absolute positioning. you have #contents set to "left: 0%;", but you don't set the top/bottom. in some browsers, that will force the element to display at the browser's default top/bottom absolute position. in this case, it's the vey top.

let me just say that absolute positioning is tricky business. it takes the element out of the flow of the document. this means that the element no longer interacts with the other elements around it. for example, if you have a block of text with an image just underneath it, and then you use absoute positioning to place the image in the upper right corner of the text, then the text won't wrap around the image: the image will overlap the text.

however, if you don't want to go back and re-code your styles (i don't blame you), then this should at least fix the menu: add "top:30%;" to #contents. that should bring it down from the top some (you might have to tweak the % to acheive the right position).

as far as the banner is concerned, i'm not exactly sure what's causing it to clip/move, but the first thing i would start tweaking is the absolute positioning.

the highlighted song title links use javascript to open a new window. the first place i would start troubleshooting that is in your mac friend's browser (i'm assuming safari). check to make sure it's not trying to block the window as a popup, and also check to make sure that they have javascript enabled.

hope this helps!!

paulajackson · 07-19-2005, 04:04 PM

Thankyou for that.

Now I've seen it on a mac I now understand that the reason my friend couldn't see part of the banner was because of the menu moving up over it. So thats okay.
I've kept changing the css code at various points so I've obviously overlooked putting in things like top and left at certain points.

I guess the only way I can do those pop ups is through javascript is it? Or is there another way of opening a new window without the browser menu, address etc at the top?

I'll look further into that.

Thanks once again gogo.

Paul