Site Pushed Down too far on Safari

Why do you have

#container {
    margin-top: -25px;

Maybe it’s not picking that up?

Hi Thank you for responding. That is supposed to push the content up, because we want everything “above the fold.” I tried deleting that and it still isn’t working.

But why are you having to push it up? What is pushing it down?

Try removing vertical-align: baseline; from your body tag in the css.

nothing. they just wanted it as close to the top as possible and that’s the only way I knew to do it. I removed vertical-align: baseline; and it’s still showing the same way in Safari. Its totally fine in Firefox. Do you think it could be the new update?

I don’t think it’s because of the update but you definitely don’t need that in the CSS attributes for the body. Sites normally load from the top down. You really shouldn’t need to apply class="clearfix" to the very first div in your template.

#container also has padding: 20px 10px 0; so 20px top padding (style.css line 609).

I just looked at it on my iPod Touch which is the only thing I have that has Safari on it and it’s WAY down.

There’s a spacer image being loaded between the logo and the Twitter/Facebook buttons:

https://www.jasonrichardsononline.com/test/wp-content/uploads/2011/12/space.png

It has a declared height of 827px, which would explain the content being pushed down the page. I don’t know why it’s not showing in FF, but you could just kill it and either put an appropriate margin-right declaration on the logo link or float the social media buttons to the right and avoid this problem all together.

Yes, thank you guys so much that seems to have been the issue. Don’t know why it didn’t read on FF.

In Firefox the height of that image shows as 100% according to the source code and in Firebug.

One last question. How do I apply the float to the social media icons? I would like those to float to the far right of the container.

Looks fine on the iPod Touch now.

You could encapsulate those 3 links into a div and within that div have a div set to float:left with the logo in it and another div with the social media links in it set to float:right. Right now those links are just sort of “hanging out” between the container div and the header div.

Yes, it worked perfectly! Thank you guys for your help! I appreciate it! Good day.