http://nikiatkins.com/GT6

I've made a simple site for a car I'm restoring. I used a free template I downloaded, and Frontpage to edit it. Being that FireFox is my default browser I was shocked to discover what it really looked liked. When I visited it in IE, it looked just as it did in Frontpage, perfect.

I dont know what I need to do. I could spend days getting it to look good on Firefox, but Im worried that doing so will ruin its appearance on IE.

What should I do to fix it?

I'm interested in what you discover. I use Firefox as my default, staying away from IE and am perfectly content.

I'm guessing you mean IE6?

I just upgraded to IE8 and it looks the same as in Firefox 3.5.5 (my default).

Frontpage is only capable of making sites that work in IE. Period. That's because of the garbage code it spits out.

The convention is to make the page look right in the standards-compliant browsers, such as Firefox, then fix for the ones that aren't (ie IE7 and below).

tim

Originally Posted by MrBrettMunro

I'm guessing you mean IE6?

I just upgraded to IE8 and it looks the same as in Firefox 3.5.5 (my default).

Yes, it is IE6. Since I dont really use it, I didnt realize it was out of date. Apparently it also looks like crap in Safari too. I guess, I'll upgrade my IE, and see if fixing it for IE8, will get it to work for everything else.

Originally Posted by serandfae

Frontpage is only capable of making sites that work in IE. Period. That's because of the garbage code it spits out.

The convention is to make the page look right in the standards-compliant browsers, such as Firefox, then fix for the ones that aren't (ie IE7 and below).

tim

Only Ive done that before. I can get sites to look beautiful in Firefox, only to discover how crappy they look in IE. Usually they look better on updated IEs, but that means that they still look like crap to everyone else who hasnt upgraded.

Plus, this was a template that worked in Safari AND FireFox before I downloaded, so I assumed adding text and changing a color wouldnt hurt it.

I could probably do the whole site with tables, but we cant be using basic HTML anymore in sites... ...its 2010 now! I shouldnt even be considering such archaic behavior.

Unfortunately, it was likely your editing the site in FP that crapped up the code for the GOOD browsers. Just don't use it, it's truly a MESS.

Fix your nav list - there is absolutely NO NEED for (invalid) <p>'s with <span>s inside a <li> Put your nav items in AS LIST items and style the <li> as you want it to be.

Clear your floats inside #content by using the overflow method (see our stickies on properly clearing floats); remove the heights on the columns, there's no real need for them if the floats are properly cleared.

If you want to center that car image, use this method instead of that center <p> as you now have it:

CSS:

.imgBlock{display: block; margin: xx auto;}

- adjust top and bottom margin as needed the auto will center the image.

HTML

<img class="imgBlock" src="xxxxxx.jpg" alt="triumph to restore" />

Your XHTML doctype REQUIRES that ALL tags be closed, hence the / at the end of the IMG tag. The same must be applied to the line breaks you have <br /> - which, btw, are not needed. Use margins and padding to space things the way you want them.

So, make it look right in FF, then use conditional comments to link to an IE stylesheet with just the fixes necessary to take care of how IE mangles it. That's pretty much the standard. Just sayin', no WYSIWYG editor will output cross-browser compliant code, and FP is the worst of them for not.

Keep in mind that any time you edit a template you're editing the content, ergo the dimensions unless the dimensions of the containing element are specified. Especially for images, you should specify the dimensions of the container.

I take it you mean we shouldn't be using HTML for styling, from context, and you're right, if so.

tim

Thanks everyone. I got it to work. And a big thank you to LadynRed for specifically pointing out what needed to be fixed.