Uh.. 99% of the time FF is right and IE is wrong. You should code to the standards first then hack to get it working in IE. This approach will gain you Opera, Safari, KHTML, Mozilla and Netscape. IE's bugs are well documented but scattered throughout the internet.

The first IE bug fix I'd use is Dean Edward's IE7 collection of behaviours. Not a browser, this is a style sheet that you include.
http://dean.edwards.name/IE7



Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

I understand that IE is one of the worst browsers for CSS, etc. I'm not trying to fix IE right now, I'm trying to get my page to display correctly in Firefox and other browsers.

W3C says my page is 100% valid HTML 4.1 Transitional. Is there a CSS property that I messed up on?

http://fpro.snibworks.com/styles.css

Thanks,

Snib

<><

The problem is with these two lines:
.content {margin-left: 200px;border:1px solid black;background-color:#c0c0c0;padding:5px;}
.menu {float:left;margin-left:0px;}

Floating the content right won't cause the content and the menu to reside on the same line (if IE does this, its wrong in doing so). So strip out the float: right;. The float: left; on the menu causes the content to come up to the same line as the menu. Then its simply a matter of adding a left margin to the content. I put 200 pixels but this is actually going to be the width of the menu. Get ready.. floats cause all sorts of bugs to come up in IE.

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

BTW: The flash movie appears when I load the page. Do you have the Flash plugin installed for Mozilla?

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

Looking better, Rich. Unfortunatly, you are certainly right about float bugs in IE.... now Firefox looks good and IE has a giant un-called for margin instead of the caption (the bold part right above the content).

I'll work on it and tell you if this gets fixed.

Let me know if you have any more ideas, and many thanks for your time.

Snib

<><

The Flash movie does appear now.... it doesn't prompt for download anymore since I took out that part, so I just went straight to Macromedia to get it.

Maybe I should put a note at the bottom of the page that says "Flash required, click here to get it" or something.

Thanks,

Snib

<><

OK, I'm going to take a wild guess at your next question.. what's up with the space IE6 is inserting at the top of your table?? It's due directly to you using a width: 100% width on the table. I dunno why it does it. So to fix it.. remove the width:100% and add table-layout: fixed. You can also try a smaller percentage that also sometimes works.

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

I don't remember if the table-layout: fixed hack causes the table to appear with a 100% width in Moz. If not the hack for that is simple. Use a direct child selector to apply the 100% width for all other browsers.

div.content > table {
    width: 100%:
}

IE doesn't understand the direct child selector but every other browser does.


Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

Do you have content disappearing too?? This is called the peek-a-boo bug. haha! This is funny because I spent hours the other night sorting out these bugs for my own site.

These bugs only happen when something is floated. OK the peek-a-boo bug can be corralled by inserting a position: relative; z-index: z value; (on the content disappearing) this technique usually works, and will likely be neccessary on the images. The only other way to get around the peek-a-boo bug is to use a fixed width of some kind. I took care of this using the IE7 style sheet and defining minimum and maximum widths using the min-width / max-width properties.


Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

Hello again, Rich.

You are a genius. I did everything you said and it looks perfect in both browsers.

The one thing I didn't have to do was fix the peek-a-boo bug. It went away when I did the other stuff.

Thanks again, and hopefully this topic will not be resurrected again!

Snib

<><