I am running into a problem with the position of my background image in a 3 column layout. I have tested this on FF3, IE7, Chrome, Safari (on XP) and Opera something. Works everywhere but IE6.
The home page can be seen here:
The Flawed Page
The CSS file is here
I think the CSS of interest is this part:
Code:
/* Code to create 3-column liquid layout */
/* The wrapper divs */
.column-container {position:relative; display:block; background:#FFF; border-left:110px solid #FFF; border-right:200px solid #FFF;}
.inner {display:block; margin-left:-110px; margin-right:-200px; padding:5px;}
/* The 3 columns */
/* The left column */
.menu { background-color:#FFF; background-image:url(../images/chrome-cat_01.jpg); background-repeat:no-repeat; float:left; position:relative; width:110px; height:500px; left:0px;}
/* The right column */
.right {float:right; position:relative; width:190px; right:0px; text-align:right;}
/* The center column */
.center { background-color:#FFF; background-image:url(../images/chrome-cat_02.jpg); background-repeat:no-repeat; margin-left:110px; margin-right:200px; position:relative; display:block; height:1%; padding-top:25px;}
.clear {clear:both;}
/* ::: Section ends */
So I split the background image into 2 pieces and used each slice as the background of it's respective DIV. In IE6 I am seeing a gap between the two halves of the image. Also, if you resize the window in IE6, the list bullets get cut off -- but I think these might be related issues.
In my attempts to fix this I colored the classes differently and it looks like the space between the images is coming from the .column-container class, but adding padding:0px all over the place never fixed the problem..
As the site looks now, the 3-column layout is unnecessary, but I do plan to use this template on other sites, so I would rather see it fixed than just be told to scrap it and us a 2-column one.
Thanks for any help with this. |
