Explorer woes... I am having trouble fixing a few problems!!

[KevinLarryPeterman]

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

Thanks in advance!!

[abajan]

That’s a very cool website you’ve got there, KevinLarryPeterman! At certain points it almost felt like I was playing Myst. Very imaginative and creative indeed. My neice, an accomplished artist as well (as a matter of fact, she teaches the subject) would love to have a look at the site. I’ll send her a link sometime.

Now to the matter at hand: Our beloved Internet Explorer. Oh good God... I feel your pain, man. over the past couple of weeks I have been struggling to get a site of mine to display consistently across all of the better known browsers and with a bit of luck and some valuable help from some members here at V7N, I think I've done it. The thing is, my site (just a photo gallery) has a much simpler design than yours and I'm really not that good at this kinda stuff.

A good starting point might be to troubleshoot with Firebug (video tutorial). Then again, in this case that might not be of any help because your troubles are with IE, not Firefox. Hmm... See if any other videos at that site are of any help.

Have you tried a stricter doctype like XHTML 1.0 Strict perhaps?

Sorry I coudn’t be of more help.

[KevinLarryPeterman]

*UPDATE*

The enter page seems to be fixed!!

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

I had a look at the links page and the shop but no luck yet...

The links page seems to be suffering some kind of bug associated with z-indexing and position relative/absolute. I have the wrapper set to relative and the layers absolute. When I change the layers to relative they center but the z-indexing breaks and loads all of the layers one after the other down the page...

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 and changed their heights one at a time 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...


abajan

Glad you like the design of my homepage! Thanks for the kind words. Please do send your niece a link. Might be a good idea if you do to let her know about the IE issues... I hope she browses with Firefox or Safari.

Regarding firebug, I have used Firefox and Safari's developer tools many times. As you point out though, these are of little use when the positioning problems I am having are with IE. I don't actually have access to a windows machine either and have just been relying on screenshot sites. I have had a bit of a play with the doctypes but nothing seems to have helped.


Tomassi

Glad you appreciate all of the time I spent in Photoshop and Fireworks working on the images. Thanks!!

I am familiar with the centering protocol for IE. All of my pages are centering fine apart from the links page. This seems to be due to the z-indexing.

I have been setting padding and border to 0px on everything (I had problems with image links and FF2 having a border added) and using margin when needed. Thanks for the suggestion though.

[abajan]

Originally Posted by KevinLarryPeterman

...The links page seems to be suffering some kind of bug associated with z-indexing and position relative/absolute. I have the wrapper set to relative and the layers absolute. When I change the layers to relative they center but the z-indexing breaks and loads all of the layers one after the other down the page...

Just this morning, I viewed a video on the z-index property and its associated pitfalls, if not used correctly. Incidentally, that video’s author also uses a Mac and has a few solutions to emulate IE on Windows which might be helpful.

I’ll warn my niece about using IE to view your site but I’m pretty sure she already uses FF. (LOL, I’ll never forget a couple years ago, when I thought I had a website looking all fine and dandy, only to be horrified when viewing it on my goddaughter’s PC. She had IE5.5 back then!)

[KevinLarryPeterman]

Originally Posted by abajan

Just this morning, I viewed a video on the z-index property and its associated pitfalls, if not used correctly. Incidentally, that video’s author also uses a Mac and has a few solutions to emulate IE on Windows which might be helpful.

Thanks for the video link. What a coincidence. I'll definitely have a good look at it. Sadly I am running a mac with a powerpc processor, not intel and while the other links says I can use ies4osx, the ies4osx download link states that an intel processor is required... I guess it must be a new version.

Originally Posted by Tomassi

Let's continue troubleshooting then

What does the div #Off do exacty?

Well, it's actually a bit of strange page. It's a links page with a small "easter egg". The light switch is clickable, turning the lights off. What I have done is put the off mask (a transparent png) and the "off" contents under the lights on (wallon) layer. Then all I have to do is copy any links I have to the lights off layer (contentoff) save, then change the lights on class from "wallon" to "walloff" (putting it behind everything) and save with the lights off file name. Make sense?

Two main reasons why I decided to build it this way. First, it was easier for me to manage the links and any coding changes I made while building and updating as both pages are the same code but with a different layer order. Second, I could cache the png before anyone clicks the switch, lowering the load time for the off page.

I realize there are other ways I could have done this but I felt it was easier for me this way (that is before the IE trouble), load times would be better over a new dark set of images and I didn't want to mess with any javascript.

[Tomassi]

Very cool graphics you have there.
A couple of things about centering pages for all browsers.

body{
text-align:center; /* center the site, for windows & IE */
background-color:#FFFFFF;
padding:0px;
margin:0px;
}

#wrapper {
width:800px;
margin:auto;
}

This should solve some of your problems. As for the spaces left and right and under and over. Make sure you put padding and margin to 0px everywhere. Try to use more classes inspead of id's.

Hope this helps

[Tomassi]

Let's continue troubleshooting then

What does the div #Off do exacty?

[Tomassi]

Not sure that's the problem though.

Ehmm, the content in IE shifts 400px to the right..

My advice would be to remove a couple of divs and see if that causes the shift.
Just the extra divs that you find in de links page and start with #switchjpg

Ps1:Z-indexing is something I try to avoid like the plague.

Ps2: A website like this is probably better off in Flash but your definatly doing a good job without it!

[KevinLarryPeterman]

*UPDATE*

I had another crack at the shop problem and it is all fixed! It was caused by a smaller line-height than the font size... Can get a bit confusing keeping it all in check when you are modifying someone else's code and everything is so spread out. I think it is strange that it displayed fine in FF, Safari and IE8.

Originally Posted by Tomassi

Not sure that's the problem though.

Ehmm, the content in IE shifts 400px to the right..

My advice would be to remove a couple of divs and see if that causes the shift.
Just the extra divs that you find in de links page and start with #switchjpg

Ps1:Z-indexing is something I try to avoid like the plague.

Ps2: A website like this is probably better off in Flash but your definatly doing a good job without it!

So it is exactly 400px? Now that I look closer it does seem that way. If it is exactly 400px that is half of the 800px wrapper... I thought it was breaking free of the wrapper and centering relative to the body/browser window width somehow. It's more like it is centered using the right edge of the wrapper as the middle point though...

I have never worked with z-indexing before. Heck, I have never really worked with CSS properly before building this site! From my limited research I couldn't see a problem using this method it as it should still sit within the wrapper. In practice it is a whole different story.

Flash is kind of a whole new world for me. I had done a bit of HTML a while back so I felt more comfortable giving CSS a go for my new site. Aren't flash sites rather SEO unfriendly?

Thanks for the trouble shooting advice. I'll pulling the page apart div by div tomorrow after work. I really need to get some sleep now.

[KevinLarryPeterman]

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?

[Tomassi]

They all miss the starting body tag!

I'm also trying to post some code but keep endig up on an error page

[KevinLarryPeterman]

Originally Posted by Tomassi

They all miss the starting body tag!

I'm also trying to post some code but keep endig up on an error page

Whoops! I guess that was accidentally deleted while trouble shooting for IE!! Have now rectified the body tag absence but the centering issue still remains...

The error page you are referring to is on this forum? Or are you talking about my sites email?

[Tomassi]

That was on this forum, no idea why.

Uhm, oh right you have id and class identifiers in one div.
Maybe try to sepearte that, example:

Crap, I'm still getting that error, i'll try and pm it to ya

[KevinLarryPeterman]

Originally Posted by Tomassi

That was on this forum, no idea why.

Uhm, oh right you have id and class identifiers in one div.
Maybe try to sepearte that, example:

Crap, I'm still getting that error, i'll try and pm it to ya

I gave it a shot. Though I'm not sure if the breakup is implemented exactly how you wanted to suggest as the you are having trouble showing me the code.

Class and id separate test.

Still the same problem.

Have I missed something else really basic? My head is starting to hurt thinking about this! Aaargh.

Thanks for the suggestions! Really appreciate you trying to help!!!

[Cabloo]

I hate explorer as well, I believe it's not even up to web standards in CSS.

ALWAYS check the validators - 3 errors in the W3C XHTML markup validator

Not sure if that'll fix it, but it's always a good idea.

[KevinLarryPeterman]

Originally Posted by Cabloo

I hate explorer as well, I believe it's not even up to web standards in CSS.

ALWAYS check the validators - 3 errors in the W3C XHTML markup validator

Not sure if that'll fix it, but it's always a good idea.

The page with the three errors is actually viewing fine in the browsers tested. Thanks for the heads up though I'll get on to cleaning up any errors on the other pages once this links page is taken care of, which validates fine.

[abajan]

Originally Posted by Cabloo

I hate explorer as well, I believe it's not even up to web standards in CSS...

Here’s a little something to console all IE6 haters.
BTW, KevinLarryPeterman, I haven’t sent my niece the link to your site as yet. I figured it would be better to wait until you get these various layout problems fixed.

[Cabloo]

The problem with that one is that a div cannot go in a span tag..

And good luck. Hope it works out for you

[KevinLarryPeterman]

**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!!

Originally Posted by Cabloo

The problem with that one is that a div cannot go in a span tag.

Just one of the many things I tried out of frustration... You must have been looking at the code while I was editing.

Originally Posted by abajan

Here’s a little something to console all IE6 haters.
BTW, KevinLarryPeterman, I haven’t sent my niece the link to your site as yet. I figured it would be better to wait until you get these various layout problems fixed.

Wise move not passing the link onto your niece yet. I think it's working now... I'm definitely one of those "IE6 haters"! I have decided not to even 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. 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! The page technically works currently, it just looks quite ugly. There is a 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.


A HUGE THANKS GUYS!!! THANKS FOR ALL OF THE SUGGESTIONS!!!!!

[Tomassi]

Good news