Ok, let me start off saying that I have slowly been getting my head around CSS as I stumble through the development of this site. I seem to have hit a bit of a wall though...

Now my problem. I am a MAC user, have been for a very long time. I built my new site using dreamweaver and tested in Safari and Firefox. Everything looks fine and seems to work well in both of these browsers. I head reports from window users that there were these "green gaps" and a few other problems.

Using a couple of screen shot sites I saw what they were on about. But after lots of google searching and trying different code, I still can't get everything looking right in Explorer 7 and 8... If I manage to get 7 and 8 working and I feel up to it I *may* tackle 6 but it is not a priority at the moment.

I removed the gaps under many of the images and div boxes. I did this by removing any spaces I had in the code. The downside is, while this fixed some of my sites problems it made the code quite hard to read... Another problem was caused by the div boxes with padding and width specified, so I created an explorer style sheet with new widths to get around these box model problems. The third change I made was the text align/margin: 0 auto work around.

These three changes fixed the home, gallery and contact pages BUT the enter page and the links page look horrible! The links page has some crazy centering going and the enter page is loading all over the page still... The other problem is the shops category text is cut off a little.




*NOTE*THE TEXT IS NOW PROPERLY ALIGNED LEFT ON THE LNKS PAGE




The live site


Any help would be greatly apreciated!! Thanks in advance!!!

For the switch problem - put the proper dimensions ON the images in the HTML, it's sloppy to leave them out and well, IE can't do math very well when you let IT calculate.

In addition to that, IE6 does NOT understand min-height, it takes it as height, so you 'll need conditional comments and a separate css file, containing ONLY the 'fixes" and feed IE a set height, in this case 43px.

On the links page, I'm afraid you are running afoul of IE's notorious bugs pertaining to absolute positioning. Your main #wrapper, which you want centered, should be set to position:relative so that absolutes inside it will be positioned relative to the wrapper rather than the body.

On the Shop page, you need to put some padding on the links inside #navCatTabsWrapper because the height isn't enough and it's cutting things off.

Thanks for the suggestions. I really do appreciate you taking the time to have a look at my code.

Originally Posted by LadynRed

For the switch problem - put the proper dimensions ON the images in the HTML, it's sloppy to leave them out and well, IE can't do math very well when you let IT calculate.

I set the images dimensions but it didn't help. One of the problems seems to be happening in the switch div... For some reason it is not aligning the two images inside it to the left and forcing the second onto a new line? I tried to float the images left, text-align left and align left. No change. I thought IE might be adding up the widths wrong for some reason, resulting in the two images equaling more than 800px. I set one of the images widths to a crazily narrow width but they still loaded on different lines...

Originally Posted by LadynRed

In addition to that, IE6 does NOT understand min-height, it takes it as height, so you 'll need conditional comments and a separate css file, containing ONLY the 'fixes" and feed IE a set height, in this case 43px.

I removed the minimum height completely. I did have a 1px wide x 141px high pusher div to force IE to set a min height but removed that as I have the div on the right with the required minimum 141px height. Didn't notice a change.

Originally Posted by LadynRed

On the links page, I'm afraid you are running afoul of IE's notorious bugs pertaining to absolute positioning. Your main #wrapper, which you want centered, should be set to position:relative so that absolutes inside it will be positioned relative to the wrapper rather than the body.

I added the positioning to the wrapper but it didn't change a thing. Changing the z-index class to relative from absolute centers them but screws up the layers, so they all just load down the page resulting in a huge ugly space before the footer.

Originally Posted by LadynRed

On the Shop page, you need to put some padding on the links inside #navCatTabsWrapper because the height isn't enough and it's cutting things off.

Haven't had a chance to try this yet but I think this may be a IE box padding issue? So if I just add a height for IE it should work.

IE7's box model was fixed, and IE6's box model was fixed with a patch almost 2 years ago, so there shouldn't be any problems with that any more.

I really think you've got a big problem with IE's positioning bugs, since you have so much that's positioned. I'd have to pull the code and really pick it apart to figure out how to fix it.

I didn't mention it yesterday, but it's a very cool looking site !

Originally Posted by LadynRed

IE7's box model was fixed, and IE6's box model was fixed with a patch almost 2 years ago, so there shouldn't be any problems with that any more.

I really think you've got a big problem with IE's positioning bugs, since you have so much that's positioned. I'd have to pull the code and really pick it apart to figure out how to fix it.

I didn't mention it yesterday, but it's a very cool looking site !

Thanks for the kid words, I'm glad you like the look of my site

While researching IE bugs I had a hard time working out what information was current and relevant. I didn't read anything about the patch you speak of and actually fixed quite a few DIV boxes with padding by setting a different width for IE which included padding.

The more I go through the code, the more confused I am to what the problem is.

Well, the patch was pushed out via Windows Update, so it may not be mentioned specifically as a 'patch'.

I wouldn't even develop for IE...It's a terrible waste of time and energy as MS keeps releasing updates that don't work. They keep pushing their customers to wait till next update saying that old errors will be 'fixed' on the next update, and they never are so generally speaking, don't do any updates for IE,and to fix this with your customers, put a screen shot link of your site in different browsers for your ie users so they will switch to a 'working' browser. I don't know why people won't do that, it will make life so much easier...And for your 'slow minded' IE users, you will just lose them, and that shouldn't bother you too much as it will clearly show what your site will look like through the screen shots (in different web browsers) link on your site somewhere.

I wouldn't even develop for IE.

Well, that would be unwise, considering upwards of 70% of web users are using IE!!

*UPDATE*

The enter page is fixed!

I went through the code for the last half of the page and pretty much rewrote it all. I found three areas of code that seemed to be the problem. One of them I have no idea what was wrong with it but changed it to something else and got it working.

I also had another solid look at the links and the shop pages but sadly no luck yet...

The links page is still suffering some kind of bug associated with z-indexing and position relative/absolute.

The shop problem (which I thought would be an east fix) is a rather confusing one. I went through all of the div boxes relating to the header including \#navCatTabsWrapper and changed their heights one at a time to some crazily high values but nothing seemed to help with the text cropping in IE7. I think I may have to run it by the people over at the zencart forum...

As much as I hate IE and hope the world will switch over to a modern browser soon, I really can't ditch IE as it makes up for over 65% of my traffic. Eeek!

As much as I hate IE and hope the world will switch over to a modern browser soon, I really can't ditch IE as it makes up for over 65% of my traffic. Eeek!

I feel your pain. My company is stuck on IE6 throughout because of 'legacy' software that uses that stupid thing.

I have went through the links code over and over again, tried many different things, stripped it down to the basics but still have the exact same z-index centering issue...





Here I have a test page set-up with minimum code. There isn't ANY centering on this one. On firefox, safari and IE it aligns left.





Now we add the text-align centering hack for IE and it is off center to the right. The same position as the original screenshot from the start of this thread.
second test page




So a wrapper is added and set to relative. Still the same problem though.
third test page




What I am even more confused about is footer portion of the page centers fine. I have two wrappers. One for the main content (wrapper) and the other for the footer (wrapper2). Now the only major difference I can see between them both is that wrapper2 is positioned 800px down the page (top: 800px) so it loads under the content wrapper. I tried adding top: 80px for the content wrapper just to see if it was playing a role in this problem but it didn't seem to help. The fourth test page is the footer (wrapper2) on it's own. the code is exactly the same but 800px has been changed to 80px. As you can see it centers perfectly...


The more I try to analyze the code the more confused I get.

Any ideas?

**UPDATE!!!!**

YAY!!! It's fixed, well at least I think it is anyway...

After pulling apart the main wrapper many times trying to find what was screwing with it centering. I started concentrating more on the wrapper2 (the footer), pulling it apart till I found exactly which line of code was helping it center correctly...

Anyway, in the end the fix was to add another div INSIDE the wrapper and put it AFTER (the order is key here) all of the divs with z-indexing. This new div was set to position relative, and just like that, everything was centered perfectly. YAY!!

I'm thinking not to bother with the IE6 problem my site has, at least for now anyway... On the link's light switch "easter egg" page I use a transparent png overlay to darken the page/room. As many people know, this is a IE6 no no! I looked into the javascript hacks for this but seems it doesn't work so well with z-indexing and links. They can become unclickable... Not something I can risk as I can't really test if it is working properly with just screenshot sites! The page technically works currently, it just looks quite ugly. There is the png8 work around with fireworks but this just basically erases the transparent elements of png with IE6 and earlier, which would make my whole png invisible as it completely transparent...

Thanks again!

Glad you finally figured it out

As for IE6, you might just put a note in there that the site doesn't work properly with IE6 and 'you should upgrade!!'