problems with cross-browser layout css

[grayceworks]

My site works lovely in Mozilla and Firefox.

http://www.villadec.com

However, get it in various versions of IE, and it looks odd.

In IE 6, on the main page, which holds the category listings, and on sub-category pages, such as the "Lamp Shades" or the "Hand Painted Porcelain" pages, the list of categories goes below the box that is supposed to hold it.

see:
http://www.villadec.com/images/IE6screenshot.gif


also

In IE 5, on the main page, the categories instead of being three in a row, the third one drops down to the next row.

see:
http://www.villadec.com/images/IE5screenshot.gif

Also in IE 5, on the product listings pages for each category, the listings box extends out past the right edge of the layout, rather than staying the same width it was on the main page.
see:
http://www.villadec.com/images/ie6-2screenshot.gif

I have gone through my css and am pulling my hair out trying to figure out where it's messing up, but I can't find what's making the difference between IE and Mozilla.

HELP???


any other input is appreciated as well...

[kobra]

Search this site for IE bugs

IE5??? You an a MAC?? The % using IE5 is so low today I do not know if I would concern myself with it JMO

[grayceworks]

No. I just have an older puter that I do testing on as well. I have three diff computers using different combinations of OS's and browsers, and I like to make it work in all of em.

I usually do puter work, rather than site design, and you'd be surprised at the number of people out there that still have older puters using WIN ME or 98 (and Macs) , which don't support some of the newer browser versions. So that's why I try and make it work from IE5 and forward, because that will cover just about everyone.

Also still doesn't explain the IE 6 problem...

[kobra]

See this Browser usage %
down to about 3% again JMO

Did you search here for the IE Bug???

[grayceworks]

When I search for IE bug, it says that IE is too small a word to search for, so it leaves out that term, and only searches for bug... So I'm busy wading through the other info trying to find things about IE bug.

I thought I had that part fixed anyhow, as I had read info on the IE bug in css elsewhere, and the template I started from (simple zen) had several items that were labeled to fix the IE bug...

I did find a few things that were in some of my pages that said <br class="clearboth" /> which I changed to div class=.. etc instead. This helped in a few issues, like the categories and subcategories showing below the bottom border, however, there are still breaks in the border using IE. The breaks disappear if you highlight the whole section, but reappear when everything is deselected again. This is in IE 6

You can see what I'm talking about in the links I posted above to the screenshots.




in IE 5 (yes, I'm nitpicky) the category icons still break down to the next row. I'm going to ignore this for the time being, as I don't have time to mess with it. but if anyone knows why this happens, I'd love to know.

[kobra]

try ie peek a boo bug

[grayceworks]

Hi. I found a post that fixed the issue in IE 5 regarding the peekaboo bug and the images outside the borders, but still have the broken borders in IE 6.

Will keep looking, but if you could take a look at the site again please and tell me if there's anything that stands out as possible problems?

Thanks!

http://villadec.com

[kobra]

Not sure but you might try replacing this

.centerColumn {
       padding: 1.8em;
       border: 5px solid #633;
       margin:1em;
	}

with this

#indexCategories {
        z-index: 500
        padding: 1.8em;
        border: 5px solid #633; 
        margin:1em;
	}

Also the quotes are not necessary but seem to be functioning here

#mainWrapper {
        text-align: left;
        width: 795px;
        vertical-align: top;
        background: #fdfde9 url("../images/backgroundfull.gif");
        border:5px solid #333;
 	margin:1.5em;
        }

I do not see a specific reason for the IE glitch but am theorizing that it may be your background image??? and why using z-index might repair as this should bring this to the top

As a test you might comment out the backgroung image and see if this alters the issue or if it still remains

BTW: Nice job on the template....very clean and classy!!

[grayceworks]

Oh, I didn't know the quotes were optional... The way I first learned it, they had to be there? That's cool, it saves a few keystrokes in the future... lol

I don't think the breaks in the border are at the places where the background edges tile though?

It's almost like there's something at the end of each row of category images that is clearing both sides of the box, but I can't figure out what would be doing it. and it now shows up fine in IE 5, which is the one I was really having trouble with (just cuz I'm a perfectionist that way) but not in IE6. *sighs*

I'll try the code and see what happens... Thanks!

And thanks for the compliments on the site! I had a few people tell me I couldn't lay out an e-commerce site with the type layout I had in mind cuz it would be too complicated, especially since the site was originally osCommerce. But me, being me, took that as a challenge... lol

Don't tell me it can't be done, cuz I will try and find a way to do it... lol