nate22
22nd September 08, 04:02 PM
Problem: There is a vertical line in the dead center of my layout which is supposed to stay centered. On Safari and IE 6 and Firefox 3, I had to come up with 3 different ways to change each browser's 1-pixel shift, each of which had it's own particular problem/reason for shifting. Firefox 2 was the only one that behaved as it should with no shift.
I basically used this for the CSS:
div#backgroundtile {
position:absolute;
margin:0 auto;
padding:0;
width:100%;
height:100%;
background-image: url("images/cms/white-tile.gif");
background-repeat: repeat-y;
background-position: 50% 0;
}
Because applying a background image to a 100% div works better on more browsers than applying it directly to the body element.
I've also got some javascript that fixes Safari, and a differently-sized background image that fixes Firefox 3 and IE 6 (I made the background image 1 pixel wider).
Absolutely ridiculous that all of this is necessary for such a simple layout, but oh well... I did it all determined to stay current and use CSS rather than tables.
The NEW problem with IE 5.5 is that the divs above the background image shift for some unknown reason about 10 pixels to the left, as you can see in the image below...
http://i473.photobucket.com/albums/rr98/22graphics/msie-55.jpg
The amount of shift is the same whether the browser is scaled larger or very small like less than 640 pixels wide, so this indicates it is not a background-image positioning issue as with the other browsers, but that some of the DIV positioning has shifted in IE5.5 for some reason.
Any idea how to fix this IE 5.5 problem? And, while I'm here, is this a layout that most of you would have just done with a simple table? A table would have been much easier and taken me about a week vs. 6 months of tweaking for every browser under the sun.
I basically used this for the CSS:
div#backgroundtile {
position:absolute;
margin:0 auto;
padding:0;
width:100%;
height:100%;
background-image: url("images/cms/white-tile.gif");
background-repeat: repeat-y;
background-position: 50% 0;
}
Because applying a background image to a 100% div works better on more browsers than applying it directly to the body element.
I've also got some javascript that fixes Safari, and a differently-sized background image that fixes Firefox 3 and IE 6 (I made the background image 1 pixel wider).
Absolutely ridiculous that all of this is necessary for such a simple layout, but oh well... I did it all determined to stay current and use CSS rather than tables.
The NEW problem with IE 5.5 is that the divs above the background image shift for some unknown reason about 10 pixels to the left, as you can see in the image below...
http://i473.photobucket.com/albums/rr98/22graphics/msie-55.jpg
The amount of shift is the same whether the browser is scaled larger or very small like less than 640 pixels wide, so this indicates it is not a background-image positioning issue as with the other browsers, but that some of the DIV positioning has shifted in IE5.5 for some reason.
Any idea how to fix this IE 5.5 problem? And, while I'm here, is this a layout that most of you would have just done with a simple table? A table would have been much easier and taken me about a week vs. 6 months of tweaking for every browser under the sun.