WebKit Chrome v. Safari

Discussion in 'Web Design and Development' started by rhp2424, May 13, 2011.

  1. rhp2424 macrumors regular


    Jul 23, 2008
    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!


    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;
  2. elppa macrumors 68040


    Nov 26, 2003
    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?
  3. rhp2424 thread starter macrumors regular


    Jul 23, 2008
    [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

    <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 id="footbg"> </div>
    And here's the link: http://jlschiller.net/forum/
  4. angelwatt Moderator emeritus


    Aug 16, 2005
    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.
  5. rhp2424 thread starter macrumors regular


    Jul 23, 2008
    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.

Share This Page