Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 246
  • Last Modified:

CSS/HTML Layout issue on Apple Mac.

Hi,

Can anyone see and help me resolve a layout issue? It apparently only happens on Apple Mac. I cant see the issue myself.

http://bit.ly/hpDMcS

Apparently the navigation and page content pushes upwards covering part of the header image.

Thanks for any assistance.
0
SM17CH
Asked:
SM17CH
  • 4
  • 4
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
"/assets/templates/default/site.css" doesn't appear to exist although I don't get a 404 error.
0
 
SM17CHAuthor Commented:
That doesnt exist, Im not sure why it is referenced there.

Ill remove it now however I dont think it is the cause.
0
 
Dave BaldwinFixer of ProblemsCommented:
What browser on the Mac?   The only time I've seen a difference between Safari and Firefox on the Mac and PC was when someone insisted on using a font that only available on their Mac.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
SM17CHAuthor Commented:
I think Safari but Im not sure. I will need to get confirmation.
0
 
Dave BaldwinFixer of ProblemsCommented:
It's Safari.  Download Safari for the PC and you can see it.  I'm not sure why but you're doing some things I wouldn't do like putting the 'h1' around the link in the header section.
0
 
SM17CHAuthor Commented:
Ill download and check it out.
0
 
SM17CHAuthor Commented:
Ive downloaded safari and can see the issue. Ive tried adjusting a few things but I still dont know why its happening.

Can anyone shed some light on this for me?

Thanks for any suggestions.
0
 
Dave BaldwinFixer of ProblemsCommented:
It doesn't like all the '-' dimensions and positions and isn't calculating them and containing them properly.  You have objects that would be contained inside a div except that you have given them a '-' margin or position.  Other combinations of '-' dimensions will cause problems in other browsers.  I have to recommend that you do not use '-' margins and positions except as a last resort.  I don't see anything about your layout that requires them.

Firebug in Firefox and the Web Inspector on the Developer menu in Safari will show where the elements are located on the screen.  In Safari, you can see that '#main' that supposedly contains '#left' and '#right' is in the correct place but '#left' and '#right' have "margin-top: -40px;" which puts them outside '#main'.

niftyplay.js is returning 404 not found.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now