We help IT Professionals succeed at work.

css div not aligning properly in firefox 7 mac osx

emmapap
emmapap asked
on
I have embedded a movie clip in a web page - the movie clip div goes over the top of the grid image background div.  It is aligning perfectly in most browsers except for safari 7 on mac where it is dropping down by roughly 10 pixels.  how can I get it to align perfectly?  page is http://www.neujuice.com/rm/sweeney-todd2.html 
the background css is

#rhmain2{      width:771px;
      height: 565px;
                     float:left;
      background-image: url(images/work-sweeney.png);
      background-repeat: no-repeat;
      padding: 0 0 0 14px;
      margin:0;}

the video clip div is
      #videox {
      padding:0; margin:0;
      position:relative;
      left:183px;
      float:left;
      top:131px;

      
}

I have attached a screengrab of how it drops down in safari 7 mac screen grab in firefox 7 mac osx screen grab in firefox 7 mac osx
Comment
Watch Question

Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014
Commented:
Looks two images from Firefox... ??

Author

Commented:
sorry I've duplicated the file by mistake
Did you use a clear styles in your CSS to start with?  e.g. did you put this at the top of your main css file?

* { margin: 0px; padding: 0px }

That clears out all preexisting paddings and margins in every browser.   While it could cause you to do some work if you do it now because you'll have to fix any margins and paddings you set to compensate for issues, it will likely fix your problem.

Also - you should ideally always program for Firefox first because Safari and IE have easy hacks you can use like conditional style sheets, whereas Firefox's are more complicated.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.