Solved

CSS/HTML Layout issue on Apple Mac.

Posted on 2011-02-28
8
240 Views
Last Modified: 2012-05-11
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
Comment
Question by:SM17CH
  • 4
  • 4
8 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35003150
"/assets/templates/default/site.css" doesn't appear to exist although I don't get a 404 error.
0
 
LVL 2

Author Comment

by:SM17CH
ID: 35003210
That doesnt exist, Im not sure why it is referenced there.

Ill remove it now however I dont think it is the cause.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35003262
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 2

Author Comment

by:SM17CH
ID: 35003268
I think Safari but Im not sure. I will need to get confirmation.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35003295
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
 
LVL 2

Author Comment

by:SM17CH
ID: 35003327
Ill download and check it out.
0
 
LVL 2

Author Comment

by:SM17CH
ID: 35113704
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
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 35114310
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question