Site doesn't Work properly in IE6

[Brent]

Hello,

I'm working on this site http://www.party-crew.info/html

and if you look at the home page (the one after clicking the lightbox and the welcome screen), you will see that IE6 is making a mess of it.

Can someone have a look at my code, IE7 and FF are working great...

The sites uses:
Lightbox 2.0 at the welcome screen
PNG Fix only at welcome screen and home.php yet, I'll do the rest when the code is IE6 compatible.
Active Content Fix

The menu has become a table, because of the spacing between the menu items when opened in IE6/7. FF was displaying the site normally, but IE put a space of 1px between the buttons, therefor I've used a table instead.

thanks already!
(can someone look at my grammar as well? :P I'm dutch ;))

[BYK]

Have you tried using Dean Edwards' IE8.js which can be found at http://code.google.com/p/ie7-js/

[Brent]

damn, the solution was very easy!

Some of the menu items were 237px wide.. and other were 238px.. that 1px made the difference. Setting the menu table to 237px, and also the width of the menu-images solved the problem.

But there is 1 problem left, the logo and the music player aren't positioned well, the player must be aligned more to the right, and the logo more to the left..
Nevermind, it was an IE6 bug:


"When a margin is applied to a floated box on the same side as the direction the box is floated AND the floated box is the first one inside its containing box, the margin is doubled. (In other words, a left-floated box with margin-left set to move it away from its containing box will be twice as far away from the left edge of the containing box as intended.)"

Thanks for helping!

[BYK]

You may overcome the margin bug by the file I mentioned ;)

[Brent]

Thank you, but when I added that file, IE5.5 added some weird space just above the 3 flyers..

Though IE5.5 isn't a browser 2 worry about... my site is now working properly :)

[boogyman]

damn, the solution was very easy!

Some of the menu items were 237px wide.. and other were 238px.. that 1px made the difference. Setting the menu table to 237px, and also the width of the menu-images solved the problem.
I am going to assume you are using table cells, and I will ask why aren't you using an unordered list with a display inline style?



Thank you, but when I added that file, IE5.5 added some weird space just above the 3 flyers..

Though IE5.5 isn't a browser 2 worry about... my site is now working properly :)
why wouldn't it be? There are many users that still run IE5.5 as their main browser. It is usually good general coding practice to offer support for at least 2 versions previous of the currently released platform version.

[Brent]

I've looked at the statics of my site...

and these are the results:

pos. browsers visiters percentage
1 MS Explorer 7.x 22.305 43.09%
2 MS Explorer 6.x 21.092 40.75%
3 Firefox 2.x 7.026 13.57%
4 Firefox 1.x 876 1.69%
5 Safari 523.x 183 0.35%
6 Onbekend 70 0.14%
7 Opera 9.x 45 0.09%
8 MS Explorer 5.x 34 0.07%

so IE5.5 isn't that much used..


I used tables, because that was the only solution, before the table I used:



<div id="menu">
<a href="index.html" target="_parent" onmouseover="MM_swapImage('Image4','','images/menu_afbeeldingen/rollover/menu_rollover_03.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/menu_afbeeldingen/normaal/menu_normaal_03.jpg" name="Image4" width="237" height="34" border="0" id="Image4" /></a>
<a href=...> .. more buttons ...</a>
<a href=...> .. more buttons ...</a>
<a href=...> .. more buttons ...</a>
</div>


but IE7, 6 and 5.5 wouldn't work with that ... they putted some space between the buttons, therefor I used the tables. If I should adjust it now...it's quite a large and boring job because i've to do 20+ pages..

[boogyman]

<div id="menu">
<a href="index.html" target="_parent" onmouseover="MM_swapImage('Image4','','images/menu_afbeeldingen/rollover/menu_rollover_03.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/menu_afbeeldingen/normaal/menu_normaal_03.jpg" name="Image4" width="237" height="34" border="0" id="Image4" /></a>
<a href=...> .. more buttons ...</a>
<a href=...> .. more buttons ...</a>
<a href=...> .. more buttons ...</a>
</div>


what about a list?



<ul id="menu">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>

then using a display css style to get them horizontally



ul#menu li {
list-style: none;
display: inline;
}

[Brent]

It's a good idea, I have to admit, but I think it isn't worth it to adjust 20+ pages one by one...

The 'Table' does his job ..

"getting them horizontaly" , why? My menu is verticaly right?