Click to See Complete Forum and Search --> : header misaligned in IE
dirletra
07-07-2008, 07:42 PM
2 things, on this page my background image (white) is repeating, but there is a space between the repeated images, how can i make it so there is no space between the two. i could make the image way taller than necessary but fireworks has a 6k pixel limit in height i think. second, in IE the header is way to the right!! why is this? it is fine in firefox and safari. please help thanks! http://anabolicarsenal.com/belean.html
Centauri
07-07-2008, 11:04 PM
This line in the conditional comment css for IE .thrColFixHdr #mainContent { zoom: 1; }is causing the drop in content position, as IE will not allow margins of non-floated elements to slide behind floated elements if the non-floated element has "HasLayout" set (which the zoom does) - remove this.
The background image may be a bit tricky due to the subtle internal gradient, which doesn't lend itself to tiling, and the edge transparency doesn't allow for overlapping. If the image is made much higher it would work, but will increase the file size and load times. I would be more inclined to forgo the internal gradient and split the graphic into 3 parts - a top section which may be around 15px high, a middle slice 10px high, and the bottom section just high enough for the shadow and corners. The middle slice can then be a tiled background to the container, which will then repeat as necessary. The top section can be a background to the header, and if the header is pulled upwards with a negative top margin whilst the body gets a top padding, the two images can be aligned without overlap. If the footer is placed outside the container, the bottom section can be a background on the footer. Another internal container div could hold the internal gradient separately if you wish.
dirletra
07-08-2008, 11:53 AM
yeah getting rid of the .thrColFixHdr #mainContent { zoom: 1; } did the trick, thanks centauri.