#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2004
    Posts
    35
    Rep Power
    15

    safari vs. IE rendering problem - ARRGGHHHH


    hi all,

    having a problem with browser compatibility here... 3 lousy pixels makes the difference between one of my divs being knocked to another row in safari, vs. a perfect lineup in IE.

    have a look: http://www.offsitedbs.com

    the column at the bottom entitled "security" is a big div that gets knocked to another row in safari if i try to have it line up perfectly in IE (pc)... BUT, if i knock the width back a few pixels to line it up in safari, it's not flush in IE.

    code for the divs:

    <div class='bottomDiv'>
    <div class='bottomTitle'><img src="IMAGES/arrow.gif">Remote Services</div>
    <p class='bottomDesc'>Offsite Database Administration and Offsite Server Management.</p>
    <p class='bottomText'>At Offsite DBA Services we focus ... any potential problem.</p>
    </div>
    <div class="bottomDiv">
    <div class='bottomTitle'><img src="IMAGES/arrow.gif">Onsite Services</div>
    <p class='bottomDesc'>OffSite offers a free comprehensive report on the state of your database at no extra cost to your company.</p>
    <p class='bottomText'>We take ... its optimal level.<br></p>
    </div>
    <div class="bottomDiv">
    <div class='bottomTitle'><img src="IMAGES/arrow.gif">Security</div>
    <p class='bottomDesc'>Offsite DBA Services uses the latest SSL technologies to manage your database through secure connections and proven technologies.</p>
    <p class='bottomText'>Network technologies ... from snoops.<br></p>
    </div>

    and the css for the 'bottomdiv's:

    .bottomDiv {
    background-color: #F0F0F0;
    height: 262px;
    width: 193px;
    float: left;
    border-left: solid 1px #FFF;
    border-bottom: solid 1px #FFF;
    background-image:url(../IMAGES/bottomBG.gif);
    background-repeat:repeat-x;
    background-position:bottom;
    border-top: solid 1px #FFF;
    padding: 0px;
    vertical-align: top;
    }

    any & all help is very appreciated!

    thanks,

    nunzio
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Wow! That's acting the reverse of expectations, considering IE's three pixel jog bug. Without spending a lot more time than I have available right now, I don't see why this is happenning. As a work-around, reduce the width of .bottomDiv and float those divs right. A few pixels difference in the space between your scroller and these blocks would not be noticeable without direct comparison, but would heal your breakage.

    cheers,

    gary
    Last edited by kk5st; August 18th, 2004 at 12:53 PM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2004
    Posts
    35
    Rep Power
    15
    well gary, i don't know why i didn't think of that but it fixed the problem beautifully. many thanks!

    --DN

IMN logo majestic logo threadwatch logo seochat tools logo