Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS/HTML Layout issue on Apple Mac.

Posted on 2011-02-28
8
Medium Priority
?
244 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 84

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 84

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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 2

Author Comment

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

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 84

Accepted Solution

by:
Dave Baldwin earned 2000 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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone 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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

671 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