Question

I have an issue on this page when I open it on iPad. Crimson colored top identification header goes to left and then on the right side you can see a blank space. All other major browsers including Safari shows the page as it should be except iPad. Here’s the screen shot from iPad view. Any ideas whats wrong with it?

Answer 1

The content in your #signature div is bigger than your #signature div, so the background isn’t stretching to fit the content (you can get the same reaction by shrinking the size of your window and scrolling to the left or right).

Fixes:

• Remove left: -5px; from #signature a.iu
• Add background: #7D110C to #signature
• Change right: 0 on #signature form to right: 5px.

That should straighten things up.

EDIT

Here’s what your updated styles should look like.

#identity #signature {
    height: 44px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 990px;
    background: #7D110C;
}

#identity #signature a.iu {
    background: url(pw_files/img/iu_crimson.gif) no-repeat 20px 0;
    display: block;
    height: 44px;
    position: relative;
    top: 0;
    width: 250px;
}

#identity form {
    height: 44px;
    position: absolute;
    right: 5px;
    top: 0;
}

I pulled these styles out of screen.css