Solved

CSS/HTML Layout issue on Apple Mac.

Posted on 2011-02-28
8
242 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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!

 
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

Suggested Solutions

Title # Comments Views Activity
allow link tag to be submit like form 15 60
send html form with multipe immages as buttons 2 38
Best explanation of following code css 11 40
Responsive Image Distorting 2 29
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

752 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