Saturday I spent the entire day (okay 80% of the day) trying to find out why Internet Explorer (IE) was breaking my layout. You can see it in the picture below; circled in red.
It worked fine in FireFox (XP, Vista, and Mac) and Safari (XP, Vista, and Mac); but once I tried Internet Explorer (XP and Vista) it broke the layout. I was going down the crazy train and it wasn’t stopping for nothing! Did I mention this page was a copy (with some slight modifications) of the Home page – which works fine. That is what was crazy; they both should have broke the layout.
I finally had to make a copy of my HTML page I had the break on and slowly pick it to death. I looked at both pages and tried to find what was different so I could delete the different parts, one by one, and upload the page and check to see if the problem was still there or if the last deleted part was the culprit. What fun we are having now!
Thanks goodness, I have Parallels so I can quickly check in Windows XP Home or Vista Ultimate to see if the problem was gone or still there. So right now on my Mac I have three OS’s: Mac 10.5 Leopard, Vista Ultimate, and XP Home. I can also boot up in Vista and get all the cool UI effects which are slightly diminished in Parallels but don’t hinder my web content checking abilities.
After about five deletions and uploads I found out that IE apparently doesn’t like Image Maps or the way Image Maps are created using Dreamweaver CS3. Once I deleted the image maps on the title the break across the top was gone. Now the tricky part. I can’t delete the Image Maps on all the little squares (the only other area using Image Maps) because that is the navigation for the larger detail on the right of them. Basically, click on a little thumbnail and get a larger image to the right.
I suppose there is an easy way to do this all in Flash to ovoid the Image Map and IE problem but I don’t know Flash very well.
To fix the small square Image Map; I just made the image of the squares twenty pixels smaller on the right and bottom so there was more room in the table for the image and apparently IE’s need for space.
What a headache! I feel like I didn’t get anything accomplished Saturday! Two web pages are completed – whoo hoo! Only seven more to go! Yippie! 🙄