Site not centered in Firefox, but fine in IE7 - what a twist!

Usually, my site never works in IE7, and that seems to be the case for most designers, but for the first time my site is not working in Firefox.

I am VERY new to web design, so please don't bash my site, it's at its VERY first stages of construction.

At first my site pulled up like that in dreamweaver, and in IE7 when previewing the page, but I set the margins in CSS (which I still suck at) to 0 auto; which is what I read to do on another site, it fixed the problem in IE, but not for Firefox, it still is up against the left side.

How do I fix this?

My site is - www.bluntsbongsandbeyond.com - I was going to use it to sell tobacco pipes online since I know a good wholesaler, but I am using another domain that is more "legal" for the shop, and I figured I might as well still try to use this one, and set up a small affiliate site to try to earn some income, anything helps when your in college right?!

 

This works like a charm, everytime:
http://www.simplebits.com/notebook/2004/09/08/centering.html

 

That is actually the exact article I used, I did everything it said, and it's not wokring in firefox..

Here is the first part of my css code, is this nor correct?


body {
background-image:url('http://xs225.xs.to/xs225/08096/page_bg739.gif');
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px 0px;
padding: 0px;
}
.clear{clear:both;}
* {
margin: 0px;
padding: 0px;
}
#container {
margin: 0 auto;
text-align: center;
width: 717x;
}
a{
font-size:12px;
}
p{
margin: 15px 0px;
}

 

theres your problem...
(should be width: 717px ; )

when you get stumped by something like this, the first thing you should try is running it through the validator, it will usually show you where you made your silly little mistake.

oh, and I think that it is funny how IE will display the broken style the way you want it too, but not the completely valid stuff.

 

I always look over the little things!

Thanks man, Ill fix it now!

 

You're not mixing business with pleasure, are you? LOL

 

You've still got others of those:

#left {
	float:left;
	width565:px; <-- also a problem

Code (markup):

Also, while you're on the right track with margins, look at this:

body {
background-image:url('http://xs225.xs.to/xs225/08096/page_bg739.gif');
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px 0px; <--- setting it to zero
padding: 0px;<---- setting it to zero
}
.clear{clear:both;}
* {
margin: 0px;<----setting everything to zero
padding: 0px;<----setting everything to zero
}
#container {
margin: 0 auto;
text-align: center;
width: 717x;
}

Code (markup):

What you do is stick the universal reset first, and remove margin: 0 and padding: 0 from everything else because it's no longer needed.

Also, listen to WillHayes--- send your stuff through the validator, get the page (html and css) valid, and then every time you any big changes, run it through again. I've learned a lot by seeing validation errors on my own pages. You still have errors and what you see with your site is "browser error correction" which is never what should have happened--- what SHOULD have happened was that browsers would act like code parsers-- when they see an error, stop loading the page and return an error. Instead, they go on, silently rendering the page as much as possible and guessing when they're not sure what's good.

Another "problem" you'll run into is checking your site in Dreamweaver. It's like its own browser-- doesn't behave like any other browser (every browser acts differently). It's pretty much a waste of time to check how your site looks in something that will never display your site ever. You have FF and IE at the least open, and make a change, look in those browsers, make another change, look in those browsers again... use REAL browsers for your "design view".

To see your boxes and whatnot, use FireFox's Aardvark extension. It's only a very general tool but I use it for checking float containers sometimes, and for looking at other people's pages for quick overviews. It's nice. The Web Developer Toolbar for Firefox can also outline and name all your boxes and is more accurate that DW's "design view".

 

Good job on this one guys.

 

congratulations, you wrote code for IE7 which is a non-standard browser, and SURPRISE, it didn't work in a browser that supports open standards. Big deal.

 

IE7 is standard among most regular computer users.

Who the fuck do you think you are?

 

Eh, it could be worse-- writing for IE6 : )

IE7 is certainly MORE standards compliant than IE6, but who isn't? But IE7 has a huge disadvantage if it's the browser you're looking at primarily while coding-- it still has Haslayout and while often you'll never notice it, stuff like lists and fake image maps and navigation bars will really, really hurt you.
You (all of us) should be coding with IE6 and 7 open, as well as FireFox, Opera, and Safari if you have either a Mac or Windows (why no Linux version? OSX is just a child-proofed copy of UNIX). I find myself not following this creed myself--- I build my "big boxes" or general layout with this crappy old FF1.5 and then start checking in Opera cause it's on my machine and fake IE64Linux, and then start seriously dicking with the smaller details with all browsers open... when I think I'm done, it's off to JAWS and LYNX, checking with Mozilla 2 with images-off/CSS-on, CSS-off/images-on, playing with Aardvark for the hell of it...

(for those wondering about FF1.5... while it's not as "compliant" as FF2, I find sites that "work in all browsers" and look a little off in FF1.5... so it must by its own faultiness be catching stuff FF2 doesn't, cause my sites look as good in 1.5 as 2)

then I find some little old lady and ask her to do some task on the site : )

You're not the only one! The validator catches our spelling mistakes.

 

well it looks fine in ff to me.

Nice site btw, good design and topic