It's a very basic site, and it looks just the way I intended it in IE 7, but in FF, it does not render at all correctly. I cannot seem to make it do so either.

Before when I posted, I couldn;t understand the solutions people gave me very well, but I've studied a bit, so I should get it now.

Anyways, I'm just trying to get it to render correctly in Firefox. Everything is out of position.

Thanks!

This is the link to what it looks like: http://provi.bravehost.com/ You should view it in IE 7 first.

Edit: Ok, I have now found a way to center it. I simply added

body { text-align: -moz-center;} in addition to what I had. That fixed it.
However, the things which are inside the div still render incorrectly in FF

Edit 2: I have no fixed the paragraphs inside the main div. I only need to correct the header and it's border styleand position now.

Well, firstly, you should make a page work in FF first, then fix for the non-standards-compliant IE7 and IE6. Your page is "behaving" in IE, but rest assured that it won't in any other browser on the face of the planet. One of the reasons it's not working correctly in FF is that your code has several serious errors, chief of which is a repetition of the DOCTYPE declaration and CSS and JavaScript rules that are out of place in the document from where they should be. Fix your code, check it in FF, then if there's anything that needs fixed from IE's crappy rendering, use conditional comments to fix them.

tim

I'm using Bravenet, and Bravenet must have inserted that code, because I did not. They have inserts for ads and such because I'm using the free version right now. So that's why that is. Although, if they already have their own doctype, then I'm not sure if I should insert my own...

However, I don't think those have anything to do with it.

IE is rendering it "correctly" because it's reading the whole document, with its incorrect code, in "quirks" mode. FF is doing what it is supposed to do, and is reading the document from the second DOCTYPE statement on. It's ignoring your other code at the top of the page. Fix the code, you should fix your problem. Put that extraneous code back in the head where it should be and get rid of the extra html and head tags.

tim

Yes! Let's celebrate! I fixed it finally!

Now I just have to fix it in Opera...^^

Well, I've got everything working, however, I cannot center the div in the Opera browser. That's the only thing left to try to fix.

Not sure why you're struggling with Opera. If it worked properly in Firefox, it should also work properly in Opera.

After looking at the site using the link you posted before, it is NOT centered in Firefox either.. so the problem with Opera is now no surprise.

Centering is very simple - read the stickies !
All you have to do is add margin: 0 auto; to #content and it will center.

I'm sorry I got back to this so late. Yes, LadynRed, you were correct. (Honestly, I didn't read the sticky, and have learned my lesson...)

At first, I DID post that margin info, but guess what? Instead of applying it to the div code, I had put it in the BODY code. Doh! That little bit fixed everything! It is now centered in all the broswer, albeit with a few hacks.

The only thing left now is to make the border appear in the Safari broswer.

Actually, even though this is the first time I am actually dealing with it, I really don't like Safari at all.