CSS cutting off on Safri but ok on the rest

WO2015
WO2015 used Ask the Experts™
on
Hello,

I have a website I am working on which can be seen on my test server. There are two pages that are not looking correct on Safari but its ok in Chrome, Mozilla, and I.E.  I have messed with many things on the #content section with the hight and overflow but nothing seems to work. Can someone please help me figure out how to let the "Our Services" page and the "Read More" under "Evangelos" page show the full page and not cut off on all browsers.  I have attached my CSS and index file.
Here is the test server site: http://doeringdesign.com/evangelos/#!/page_Evangelos
style.css
index.html
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Try this:
#content ul> li > div.pad  {
height: 75%;
overflow: auto;
}

Open in new window

Author

Commented:
Thank you, that is a little closed. The issue now is on IE and Safari it moves the content around on some of the pages, the data on the right is not longer on the right, it goes under the data on the left.
Commented:
You could try changing the width to this in style.css:
.col1 {
    height: 100%;
    width: 370px;
}

Open in new window


Or you could target specific pages only like this:
#content ul> li#page_Services > div.pad  {
height: 75%;
overflow: auto;
}

Open in new window

Author

Commented:
That worked! Thank you!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial