CODEWITHSUNDEEP
cssipad
ShrimpWonder
ShrimpWonder

Reputation: 61

What's causing this thin line between two divs on ipad?

Viewable only on an actual iPad/iPhone (and not on any virtual versions) I'm getting a thin, almost imperceptible line between the two bottom divs on this website

Strangely, the line disappears once you zoom in, and using borders or negative margins just makes the problem worse.(Don't judge my code, I had to jump through a lot of hoops because of the CMS-based hosting that the client vehemently did not want to move away from).

EDIT: Here's a screenshot of the line as it looks on the iPad. You'll have click to zoom in to see it, as it's really thin.

https://i.sstatic.net/K1aUg.jpg

And the offending section:

<div id="bottom_gradient">
    &nbsp; <br />
    <br />
</div>

<div id="footer">
    <div id="footer_container">
        <div class="content_left_footer">
        <br />          
            <img src="images/slogan_icon.png" />
            </div>
            <div class="contact">
            <b>t.</b> 787.439.0924<br />
            <b>fax</b> 1.888.201.1222<br />
            <b>e-mail:</b> [email protected]<br />
            P.O. BOX 934 Dorado, P.R. 00646
            <br />
            <br />
            </div>
        </div>
        <div class="content_right_footer">
        <br />
        <br />
        <br />
            <div class="member">
            <br />
            MIEMBRO DE<br />
            <br />
            MEMBER OF
            <br />
            <br />
            </div>
        <div class="images">
        <div class="shrm"></div>
        <div class="icp"></div>
        <div class="astd"></div>
        </div>
        </div>
  </div>
</div></div>
<!-- the line appears above this div -->
<div class="column_center" style="color:white;text-align:center;">
   copyright 2012 Strategies
   <br />
   <br />
</div>

Upvotes: 4

Views: 2008

Answers (1)

Benjam
Benjam

Reputation: 5316

It looks like your <div id="white"> background might be peeking through after the <div id="footer">. Try moving the <div id="footer"> outside and after the <div id="white"> and see if that helps.

Or if you can't do that (or it doesn't work), try setting the height of the <div id="footer"> to more than is needed and set it's margin such that it will extend below the <div id="white">, thereby covering the little bit that is peeking through.

Upvotes: 2

Related Questions