WebKit Chrome v. Safari

[rhp2424]

I need some help understanding WebKit. It is my understanding that because Chrome and Safari are both based on WebKit, they are supposed to render a basic page (css, html) the same. I have read Java not rendering the same based on different java engines, etc, and that is fine. Basic html and css should render the same otherwise though, correct? A page should not look different on one compared to another?

I ask because on Chrome my footer appears as it should and in Safari I get a little extra scroll bar on an XP and extra padding on the right when I check it out on Snow Leopard.

Am I missing something simple here? Any and all help would be greatly appreciated!

Thanks!!

Chrome (Windows XP and Snow Leopard - the way it should be)

Safari (Windows XP - the way it shouldn't be)

CSS for footer

#foot {
display : block;
}
#foot {
background-color : #1a446c;
color : #8395d6;
text-align : center;
vertical-align : middle;
width : 850px;
height : 35px;
border-top : 3px solid #13134c;
border-bottom : 10px solid white;
padding-top : 8px;
bottom : 0;
font-size : 11px;
line-height : 0.5px;
}
html > body #foot {
position : fixed;
bottom : 10px;
overflow : auto;
z-index : 10;
}
#footbg {
position : fixed;
width : 100%;
height : 35px;
background : #ccc;
bottom : 0;
overflow : auto;
}
.clear {
clear : both;
}

 

[elppa]

Five things:

[1] What versions of browsers are you running? The latest in all cases (5 and 11)? That is important so someone can help.

[2] What does “Safari” on Snow Leopard look like - the same or different to XP?

[2] "Webkit" is updated, regularly. So there are of course differences. Just as Gecko will render things differently depending on the version.

[4] Can you give us the markup as well?

 

[rhp2424]

[1] browser versions: Latest in all cases on all systems
[2] “Safari” on SL: No scroll bars, but there is a about 10px of padding just on the right. I can attach an image in about 5 hours

[4]

<div id="foot"><a class="foot" href="index.php">Welcome</a> | 
      <a class="foot" href="healthbenefits.php">Health Benefits</a> | 
      <a class="foot" href="conditionstreated.php">Conditions Treated</a> | 
      <a class="foot" href="chinese_medicine.php">Chinese Medicine</a> | 
      <a class="foot" href="biography.php">Biography</a> | 
      <a class="foot" href="rates.php">Rates</a> | 
      <a class="foot" href="contact.php">Contact</a> |  
      <a class="foot" href="faq.php">FAQs</a> | 
      <a class="foot" href="forms.php">Patient Forms</a> | 
      <a class="foot" href="news.php">News</a> | 
      <a class="foot" href="login.php">Log in</a>
      <h5>© 2008-2011 Health Clinic</h5></div>
</div>

<div id="footbg"> </div>

And here's the link: http://jlschiller.net/forum/

 

[angelwatt]

[2] “Safari” on SL: No scroll bars, but there is a about 10px of padding just on the right.

This seems to be related to the overflow property on selector "html > body #foot." This is likely related to your scrolling problem too. You don't need to assign a specific height for your footer. You can achieve the the same result by just reducing the margin/padding around the H5 tag in your footer.

 

[rhp2424]

This is great! Thank you for the help, angelwatt! I figured it was something along these lines and the footer height being the issue makes sense.

I'm sure I'll have more questions later about iOS display issues I already know exist, but I'll keep looking and come back and start a new post when I am ready for that.