Problems in IE... as usual

First, fix up your html validation errors - there are 63 of them!

Second, thanks for providing a link to the site, since that makes debugging it ever so much easier. No need to post code if you post a link, since with a link we can easily see it all.

BUT - you no basis complain about how IE or any other browser shows your code until you feed them valid html. That's even more important than valid CSS, which at least you've taken care of. But CSS rules assume valid html! If the assumption isn't true CSS can't be expected to work very well.

You shouldn't be using tables for layout like that, either. We definitely frown on that and it has no place in modern design practices.

So fix the html errors and then if the problems persist (and they may), come on back. Oh, and lose the tables and replace them with appropriate semantic elements, too.

Thanks for the quick reply.. After viewing my site in the HTML validation I am actually confused on how to fix most of the problems... Any easy way to determine what they are saying is wrong?

Thanks,

Bill

Well, you could always get the "Html validator" extension for Firefox and run it through that to make your code valid. Then compare the two and see the differences. I prefer to figure out the errors myself because then I learn more.

All your "IMG" tags should have "alt" attributes that describe the image so that someone who can't see it will know what it is, for a start.

Unless this is an old page you are fixing up, I'd change the Doctype to a STRICT one, which will likely create even more errors, but I usually find them easier ones to figure out, and if you start at the top you often find that fixing one fixes others as well so it's less work than you might suppose.

But you have to learn not to use tables the way you do, as well. The goal is to write
POSH code.

Well I actually used HTML tidy to fix everything in one shot... heres my result: http://www.justalkaboutit.com/test.php Though the tops are gone, the same problem occurs in IE... So this is not going to solve the problem.. :mad:

Any other suggestions? =)

Looks OK in IE6 to me, so perhaps you could explain more clearly what the problem is. All you said in your first message was that there were "major problems", but I don't see anything I would call "major".

Oh, and you are still using tables for layout. :bigoops:

I didnt have a look in ie6 lately but IE7 has my popular topics, quick facts and affilites shifted off of the page to the right. And what do you mean by having the layout in tables... :?

I run Windows 2000 here at home, so I can't have IE7. A lot of other folks still use IE6, in fact it is still, alas, the most popular browser out there. You are using tables for your form and for some of your content, but it is not tabular content so you shouldn't be using them. There are plenty of articles on the web and in this forum about the proper and improper use of tables.

IE 6 doesn't know how to add, so your page is breaking because IE 6 adds something like width+margin+padding to get the width of a box. I'm probably not 100% right on that, but it's something dumb. Generally you can shave down the width of your box using a conditional style for IE to the point where your boxes take the correct width.

I'll have a look at the other errors now.

If you need information on conditional styles:
http://csscreator.com/node/28011

See my post in that thread.

More solutions:

IE 6 has a white/gray image under your copyright notice because you haven't told your footer background not to repeat. If you add a declaration for background-repeat: no-repeat; you'll see that white go away. You could also use the condensed property of background: url(image url) no-repeat; to do this.

Not sure where your ul#main_nav gets its styles as I don't see it in your CSS, but I don't really even see a need to change it. Sure, it is centered and looks differently than Firefox, but I often have differences between IE and Firefox when necessary.

Not too sure on this one, but you might have better luck with your footer columns if you positioned them with margins and not padding.

Ok thanks, added the no-repeat to the footer. Not sure if this fixed the problem. But does anyone see why the popular topics, quick facts, and affiliates all shift to the right in IE and Safari?

The only place that forms are used it the google search and the google ads.

The only place that forms are used is the google search and the google ads.

They don't "shift to the right" they get pushed down because of widths getting added to padding. I addressed this in my previous post - in the very beginning.

Actually, they do technically shift to the right, they shift too much - but that's just a semantical debate, ultimately they get pushed down.

If you mess with the width and padding in a stylesheet that affects Firefox, you're going to screw yourself up further. Be sure to use conditional styles as I suggested and linked to.

Ok I read http://csscreator.com/node/28011 <-that post on seperate CSS for different browsers. But what CSS should I change for IE then firefox?

As I said previously, IE will calculate the width by adding the padding to the width you defined for the box. So, shave down the widths of the left and right columns in your IE-specific style sheet. You shouldn't see any change in the actual appearance, but they will be side by side once you've cut enough off.

Well, having playing with it I wonder if margin-right:100px is the way to go? It works fine is there any problems with this?

Found it! The answer was not to shave to the width, but to add to it! It works now fine with one CSS in IE7 but after looking at these http://browsershots.org/http://www.justalkaboutit.com/ it now bumps them all the way down at the bottom of the page & the footer is off a bit..in IE5-6

I am 90% certain that the problem lies in the width/padding when being interpreted by IE<7. Please try reducing the widths.

When I tried reducing the widths it actually made the right "box's" move further out to the right. I will be sure to try again when I get home. Going to work will be back around 10pm ET.
Thanks alot for your help.

~Bill

It should make the right move further right, eventually it will go far enough right that it will pop up to the right of the left column. I'm leaving work shortly, but I'll have another look at your CSS when I get home to make sure this is the expected outcome.

Well that's what the standards require!!

But you are 100% wrong! IE6 when you give it a proper standards mode triggering doctype declaration renders widths and heights correctly to the standard.

When you have no doctype or a non standards triggering one it fails to do that for padding.

Well you shouldn't be using tables within forms unless the form content is actually tabular in nature. Yours isn't. I don't know about the google adds, but the google search stuff can be easily recoded so as not to use a table.

Ok, will be changing that shortly. Any advice on fixing my site in IE Ed?

Well as I said I don't have IE7 so it's pretty hard to diagnose what I can't see.

Its in anything below IE7, IE7 behaves fine, the screenshots can be seen here: http://csscreator.com/comment/reply/27997#comment-form ( Screenshot Request Group 3)

Well that's what the standards require!!

But you are 100% wrong! IE6 when you give it a proper standards mode triggering doctype declaration renders widths and heights correctly to the standard.

When you have no doctype or a non standards triggering one it fails to do that for padding.

I always have a good doctype, and I always see problems with IE 6 messing up my two column layouts.

Jags - the site appears to be down. If you get it back up, I'll have another look for you.

*Am transferring hosting will be done soon

The sites backup! :thumbsup:

IE6 has many bugs still, and especially with floats and positioning. This does not change the fact that in strict mode it does at least get the box model right.

The box model requires that margins, borders, and padding are all supposed to make the overall box larger. A lot of people don't understand that and think it is wrong, but that's what the CSS standards call for. I didn't understand it myself for quite a long time and wrongly assumed that padding should reduce the text area without changing the box size.

A good doctype may not be enough to trigger standards mode. Some perfectly good doctypes leave IE6 in quirks mode. Also, anything at all before the doctype declaration, even a comment or a blank line, leaves IE6 in quirks mode no matter how correct your doctype is.

But even putting it into standards mode certainly does not fix all of IE6's errors - far from it. It does fix a great big error, but by no means all of it's errors.

So, you're saying that one of two things is happening if IE 6 renders my columns differently than IE 7 and Firefox?
1) I'm in quirks mode
2) My box width+padding+border+margin is too wide
?

I will try to look at your site later today jags.

I apologize for not being of more help, I realize I must sound like a broken record here. The below screenshot outlines the elements that are your two columns. I still believe that if you reduce widths and paddings in an IE 6-only style sheet, you'll see the two columns be side by side.

http://www.teamserenity.com/jags.png

Tried it again, moved to 100px, less than that, more than that, same result... Even the main nav at the top is centered for some reason.. And the footer is thrown off aswell.

Did you shrink the boxes within it as well? If not, then they're still forcing the columns to expand.