CSS IE one pixel image offset hack
For some time, I've been trying to center the Designer Jones website. The road was long and fraught with peril … <grin>
Designer Jones was designed to look like a magazine. Its construction means it's not the sort of design that is easily centered — because the "top" of the design is a one-piece header image (the gray downcurve next to "Main Menu" is the bottom edge of the image) and I wanted the text in the two right columns to start at the top of the "page". To effect this, I used CSS-P (absolutely positioned divs, or "layers" to you Dreamweaver folk) to hold that text in place on top of the image. The positioning nailed it there, beautifully unmoving, seemingly unbreakable. It also meant that DesignerJones was stuck to the left side of the screen in larger monitors. Besides, even if I ultimately decided that left-side was what I wanted, I wanted to have a choice about the matter.
I recoded and tested in Opera 8, Mozilla, Firefox and IE 5.5 and 6. After numerous trials, most of which made it work in most browers but not all, I finally hit upon a solution.
Note that I cut the top image into two; the gray logo on the left and the two "pages" image to serve as background on the right. The code:
body {background-image:#fff url(whatever.gif) center repeat-y;)
<div id="maincontainer" fixed width, margin:auto>
<div id="contentcontainer" floats left>
<div id="thelogo"><img src=LOGO HERE></div>
<div id="thecontent"> </div>
</div><div id="sidebarcontainer" floats right
RIGHT-SIDE IMAGE AS BACKGROUND HERE>
<div id="leftnav" floats left> </div>
<div id="rightnav" floats left> </div>
</div>
</div>
The IE one-pixel image shift
The problem was that, in IE 6, the header image was shifted to the left by one pixel, making the design look … well, stupid. If you're going to have lines, vertical or otherwise, they should align.
I tried, of course, the various IE hacks for feeding one margin to IE and another to the rest of the browsers. That worked for IE6 but I encountered what, to me, was always going to be the nightmare scenario: a hack that works in one version of IE but not another. While my solution worked gloriously in IE6, it misaligned in the same way in IE5.5.
Then, finally, a clue: that IE may be centering based on screen width less scrollbar. That is, perhaps the problem was not that the two top images were shifting, but that the background image in the body tag wasn't quite centered?
A quick hack, and all was well:
body {margin:0; padding:0; font-family:etc;
background: #fff url('bk.jpg') center repeat-y;
margin-left:1px} <= for IEhtml>body {margin:0} <= for other browsers
I'm sorry that I've since cleared my history and cache; I'd like to credit the person who posted the clue. In any case: may good befall you.
11 Comments to "CSS IE one pixel image offset hack"
Have your say ...
If this is your first comment, it will be held for moderation (but comments are appreciated). Otherwise, just be courteous, don't drop links unless highly pertinent — and no substituting keywords for your name. Posters must be 16 or older. We use Akismet, so if you don't see your non-spam comment posted, contact me.
Graham Birks says:
Comment posted on 01/24/06 @ 3:32 pm
Lady, you just saved me lots of hair pulling out. I take my hat off to you.
DianeV says:
Comment posted on 01/25/06 @ 2:19 am
You are most welcome. We all help each other out here on the Web; without that, things would go a lot slower. <grin>
I ended up doing DesignerJones a different way entirely: by putting the "book background" (the part that extends downward on the page) into an outer div that encloses everything:
The problem with that, though, was that some browsers would not display the div's background image. (How lame is that?) (Etc.) All that was left of the visuals was the two header pieces at the top … no further background under the page content, navigation, etc.
I was finally able to determine that the problem only occurred when the outer div contained floats. By tinkering with it, I found that it was easily solved by adding something *after* the two floats (but before closing the outer div):
And -presto- the page background appeared. I'm no Eric Meyer, but this works. At least, for now.
Diane Vigil says:
Comment posted on 07/15/06 @ 11:19 pm
More information at Position is Everything.
Diane Vigil says:
Comment posted on 02/7/07 @ 7:32 pm
One last comment: it's also helpful to ensure that your layout width is an even number; 780px is good, while 781px will give you problems.
Kathy Moore says:
Comment posted on 09/9/07 @ 1:34 pm
My eyes are glazing over :) . I tried your first solution, but what happened then was my background shifted completely to the left margin for some reason. I'd love to try your second solution, but it went over my head. I'd be eternally grateful for a bit more detail on how to utilize that solution.
Thank you for any help you can give!
Diane Vigil says:
Comment posted on 09/9/07 @ 1:37 pm
Okay; not sure what the problem might be without a link to your site. :)
One tip: make sure your background width is an even number (not, for instance, 781px).
Kathy Moore says:
Comment posted on 10/1/07 @ 6:28 pm
Well, I sort of got creative with the one I was working on before but now I am back and here is the URL:
http://www.scrapkitchen.com/shop
The header table, in IE, is one pixel off to the left and I just don't understand the div thing well enough to fix it. The stylesheet is already pretty complicated and I know just enough to change what I have to, but I just can't figure this one out. Any help is appreciated. Oh, and the background width is 900px in all places.
Thanks!
Diane Vigil says:
Comment posted on 10/2/07 @ 12:45 am
I haven't looked closely at it, but:
- set a fixed width for the table, and add margin:auto
That alone may fix it. However, if you're adding margins around the table, then IE does … interesting things.
Kathy Moore says:
Comment posted on 10/2/07 @ 3:52 am
Okay, the table is an ImageReady sliced table. In the place where the width is set, it doesn't seem to like margin (I'm using Dreamweaver and it suggests things that belong and margin is not one of them so I am assuming that means it's not a valid attribute in that particular place). I did find the style in the stylesheet and added margin:auto, but that didn't help. I also set it to a fixed width, but nothing there, either. I even added a around the image table only with what you suggested and that didn't do it, either. I swear I'm taking a class soon on CSS, but right now, this is so frustrating! Why can't they all just show it the same way?!?!?
Let me know if you want to see any files, I'll happily send them to you.
Thanks!
Kathy Moore says:
Comment posted on 10/3/07 @ 7:21 pm
Okay, I finally found an answer and since it is specific to the stylesheet and script I was working with, I won't leave it here. I just wanted to let you know so you didn't spend any more time trying to figure it out for me.
Thanks!!
Diane Vigil says:
Comment posted on 10/3/07 @ 7:25 pm
I know what you mean about browsers; unfortunately, that's just the way it is right now. At least they're closer in display than they used to be.
Glad you found a way to sort it out. :)