PDA

View Full Version : Mac and PC showing differences to menu


stag
10-24-2008, 11:54 PM
Hi

Hope someone can help or knows of a solution.

Designing a page but i am having an issue with line spacing. Using FF on mac and PC produces different results. I have a logo with a menu slightly below which is perfect on my mac, but on PC, the menu is touching/cascading with logo.

I can show some screen shot exmples, but if anyone knows of any obvious solution that would make me rather happy :)

Cheers

Rob_Che
10-25-2008, 12:06 AM
I think if you post a live page we will be able to solve it :)
We're good like that !

stag
10-25-2008, 12:17 AM
Aye aye, here ya go...

http://www.musicexplained.co.uk/BA7G/About.cfm

Cary
10-26-2008, 08:25 AM
Using FF on mac and PC produces different results...on PC, the menu is touching/cascading with logo.

This is actually how it's appearing in all the browsers I checked the page in. Firefox for the Mac seems to be the odd ball here. Default margins and padding vary from browser to browser, and in this case, you haven't set the bottom padding/margin for "#header h1" or the top padding/margin for "#header ul".

Play with those.

stag
10-26-2008, 01:01 PM
Ok thx, will have a play around with this.

Also on this page on PC, IE and FF render the distance from the side differently. FF is the correct distance so wondering if you (or anyone else), have any advice to sort this out too?

Cary
10-26-2008, 08:11 PM
Never mind the suggestion I made before, as you had already zeroed all of the margins and padding for elements on the page.

Remove the blank lines and extra space in front of your Doctype. This puts IE into quirks mode.

Add overflow:hidden to #about so it contains its floated child elements. This will fix the position of the background image in Firefox, Opera and Safari.

I tried a line-height of 1em on #header li and a top margin of .7em on #header ul. This looks more like what you were getting in FF for the Mac, but FF for the Mac is still adding extra space, and I'm not sure how to fix that.


Also on this page on PC, IE and FF render the distance from the side differently. FF is the correct distance so wondering if you (or anyone else), have any advice to sort this out too?

Sorry, I really couldn't see a difference in rendering in that regard.

stag
10-27-2008, 12:53 AM
Really? The PC IE was over extending the gap at the top compared to the distance achieved in FF...