I was hopping someone might be able to help me out. We are so frustrated and don't know where to turn. This is our first time making a website with CSS. We tried to launch my re-designed website - but have run into a few problems that are driving us crazy. It looks great on Firefox and Safari (which were the only browsers that we could preview on my mac in dreamweaver), but when I uploaded it, it look awful on IE 6 and 7.

Of course most people that come to my site use IE. I'm such an idiot for not creating on a PC. We uploaded part of the site on my sisters domain. She is the one who is working on my site with me. You can find it at http://www.angelawingenbach.com .

That way my original site can stay up while we are working on this one. The whole site is done with CSS I don't know if that is the problem. It seams to be the background that is the biggest problem. If you refresh you can see that some pictures are stuck behind the background along with a few other problems.

Like I say it looks really good on a mac and using firefox.

Ok, from what I can see, you're running afoul of at least 1 IE bug - the doubled-float margin bug.

Any time you float an element, then give it margin in the same direction as the float, IE will DOUBLE that margin.

So, where you have float: right with margin-right: 68px for your ad column, IE is making that margin 68x2 or 136px.

Same for the float:left with margin-left: 10px - IE is doubling that 10px to 20.

You are going to need a separate CSS file that will contain ONLY the 'fixes' needed to make IE 6 behave, and you call that 2nd CSS file using conditional comments.

Here is a write-up about this bug (1 of MANY) and how to cure it:
http://www.positioniseverything.net/...ed-margin.html

The solution is to add display:inline to the floated elements -but you must add them in a separate CSS file as I explained.

You also don't need to position everything as you have. You simply do not need position:relative everywhere - learn to use the normal document flow.

LadynRed,

thank you for your help. We did as you asked and made the changes but nothing seemed to happen. Is there anything else you can think of?

chuck

I would suggest getting the Web Developer Toolbar add-on for Firefox.
With it go to Outline -> Outline Block Level Elements.
It will show how your use of positioning and padding is affecting the look in IE. One thing I noticed is for #middle you use padding which you don't for #footer.

Before I even get started on whatever I can find that relates to your layout, I'm going to make one comment: the site is too wide. You should be designing for 800 x 600 resolution minimum, or at the very least 1024 x 768. The latter is still the prevailing resolution.

As far as the movie not display goes, change param="main" to param="movie". If that doesn't work, steal some of my code and use it for your own evil purposes:

http://www.walkonmypath.com/zenn-cars-blocked-in-canada

You'll see the Youtube vid. That's the Flash vid you'd want.

If you've uploaded your changes, I don't see the conditional comments LNR was referring to. You'll want to check out this page if you haven't yet:

http://www.cssplay.co.uk/menu/conditional.html

It should explain things clearly. Basically, you just need to add IE-specific comments so that you don't mess up your other browsers.

If that doesn't work, you're going to hate my next piece of advice, but it will ultimately serve you the best in the long run...restart from scratch. But this time around, start with a PC and open up both IE and Firefox (ideally, IE6 since it tends not to play as nicely with FF and others as IE7 does). If you're really feeling froggy, download Safari for Windows and open up a copy of that as well on the same machine.

When you've got the three browser windows open, take a section and code it. Check it in all three browsers. Correct as necessary (or ask for help on the section in here if you can't get it). Move on to the next section. Repeat until you've got all the sections coded.

If you can do that, you'll generally take care of your MAC users and most of your secondary browsers (e.g. Opera) as well. You may run into the odd issue here and there, but for the most part you'll nail 'em. You'll also find it much easier to take your code a section at a time, check it in all browsers, then move onto the next section than you will to deal with the issues that you're dealing with now.

And for the love of all that is good in the world, don't you dare go back to tables. We'll have to beat ya if you do.

Thank you Adam and Joder

The flash is working now, you would think that we would have noticed the param=main to param=movie but after looking a code all day the eyes start to go wonky.

The idea of starting over Adam is not what i wanted to hear!!! I am afraid it may come down to that. We have spent so many hours already creating photographs, recipes over 300, cooking classes and text. Just the thought of starting over is a real crushing feeling. Mind you, all those things won't have to be recreated but still. The part I hate the most is the web designing part lol

Oh well, I'm tired and need to go to bed. Tomorrow is another day.

Thanks for the help guys!

chuck