How do I change this CSS to look the same on a Mac as a PC?

I've got the following css that works fine on IE, FireFox and Chrome:

<div style='padding: 30px; border: 0px solid #000000; width: 800px;'>

<div style='float:left; width:400px; height:75px;'>
  <img border='0' src='./images/logo.gif'>
</div>

<div style='display:block; float:right; width:400px; height:75px; text-align:right; padding-top: 35px;'>
  <font size='2'><u><b>STUDENT CLUB ACTIVITIES</b></u></font>
</div>

<div style='display:block; text-align:center; width:800px; height:50px; font-size:17px; font-weight:bold;'>
   RELEASE AND WAIVER OF LIABILITY, ASSUMPTION OF RISK AND INDEMNITY AGREEMENT
</div>

</div>

but with Safari on the PC and Mac has the logo and bottom text laying on top of the rest of the pages text.

How do I fix this?
Donnie WalkerAsked:
Who is Participating?
 
SSupremeConnect With a Mentor Commented:
It looks the same in all browsers, not just safari. if you want to correct it add float: left; to the rest child elements.
0
 
Dave BaldwinFixer of ProblemsCommented:
That's not enough info.  The code you posted looks the same in all browsers including Safari.  Can you give us a link or the complete page code?
0
 
Donnie WalkerAuthor Commented:
Below that all I have is this:

<div>
blah blah blah a bunch of text
</div>
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Dave BaldwinFixer of ProblemsCommented:
This is what it look like in all browsers for me.  I just put an image I had in there.  The divs are overlapping.
XbrowserCSS.jpg
0
 
SSupremeCommented:
DaveBaldwin is right, I have the same view.
0
 
Donnie WalkerAuthor Commented:
I made some small changes but it still looks bad with Safari:

<div style='padding: 30px; border: 0px solid #000000; width: 800px;'>

   <div style='float:left; width:390px; height:75px;'><img border='0' src='./images/logo.gif'></div>
   
    <div style='float:right; width:390px; height:75px; text-align:right; padding-top: 35px;'><font size='2'><u><b>STUDENT CLUB ACTIVITIES</b></u></font></div>
      
       <div style='display:block; text-align:center; width:780px; height:50px; font-size:17px; font-weight:bold;'>RELEASE AND WAIVER OF LIABILITY, ASSUMPTION OF RISK AND INDEMNITY AGREEMENT</div>
      
         <div style='font-size:14px;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in velit vel risus semper ultrices et eu lectus. Curabitur luctus sollicitudin mauris, varius aliquam est ullamcorper et. Sed semper libero lorem. Vivamus sapien nisl, mollis in dictum at, lobortis at diam. Donec luctus pretium diam non adipiscing. Nullam a nunc est. Aenean felis libero, scelerisque non iaculis at, placerat id enim. In augue diam, pellentesque id cursus in, elementum nec libero. Sed quis sapien urna. Nunc nec metus eget diam iaculis interdum. Fusce sem sem, tincidunt et gravida a, faucibus non purus. Morbi pellentesque, erat id malesuada hendrerit, dolor risus dapibus lorem, eu convallis magna nisl et neque.</div>         
         </div>

Also I've attached a screentshot from Safari.
safari.png
0
 
Donnie WalkerAuthor Commented:
It doesn't look the same in all browsers.

In IE, Firefox and Chrome the text does not overlap.
0
 
Donnie WalkerAuthor Commented:
float. left; worked.

thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.