HTML Forum

**iamlevicious** · 02:00 AM

I am currently trying to create a portfolio website and have run into
some problems with the layout. It seems that Firefox won't center my tables or divs, but IE will. I've read online that this can happen sometimes, but it is due to IE actually reading the code incorrectly.

I am using Dreamweaver MX 2004. For the tables, I simply use align=center, and with the divs, I tried a couple types of code. At first, I did margin-right=auto and margin-left=auto, and then later a much more literal way, using left=50%, margin-left=-455 (half of the width of the desired div).

If you want to see what I mean, you can see it at http://newmedia.purchase.edu/~cburns. Any suggestions?

**TributeK** · 01-13-2008, 02:02 AM

can we see the code? I might be able to help you out better if I can mess with it a little.

**iamlevicious** · 01-13-2008, 02:04 AM

Here is the code the div that I want to use to center all of the content.

#center {
text-align: left;
width: 910px;
margin-right: auto;
margin-left: -455px;
background-color: #CCC;
padding: 0px;
left: 50%;
top: auto;
right: auto;
bottom: auto;
vertical-align: middle;
background-image: url(http://newmedia.purchase.edu/%7Ecbur...res/back.png);
height: auto;
position: absolute;

}

**Mattmaul1992** · 02:08 AM

Your table is only 800 pixels wide.. changing it to 100% would fix the entire problem but my first guess why it works in IE and not firefox is that IE does stuff it doesn't say it's going to do and aligns images/tables with the text-align declaration in CSS and FF doesn't. Don't mix CSS styling with HTML styling.. HORRIBLE idea. Your code will smell the stench of browser incompatibility (like it already is and you have less than 15 lines of code lol) which will result in loss of users, search engines getting confused and skipping your site all together, etc. I'd learn more about what you're doing before you try to sell it.. No offense.
Also tribute all you have to do to see the code is view the source lol :S.

**JeremyMiller** · 01-13-2008, 02:06 AM

1) DO NOT USE TABLES FOR LAYOUT!!!!!!

2) The direct answer to your question is to add this to the <head> section:

HTML Code:

<style>
body {
  text-align:center;
}
</style>

3) Use TD to enclosed data in your tables -- don't just put stuff inside of TR tags.

4) This does the same thing as your site and NO TABLES:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Chris Burns' Advanced Standing Web Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
  text-align:center;
  background-image:url('http://newmedia.purchase.edu/~cburns/background.jpg');
}
#page_content {
  text-align:left;
  width:800px;
  margin-left:auto;
  margin-right:auto;
  border:1px #000000 solid;
}
</style>
</head>

<body>
  <div id="page_content">
    <img  align="center" src="http://newmedia.purchase.edu/~cburns/banner.jpg">
  </div>
</body>
</html>

**Mattmaul1992** · 01-13-2008, 02:08 AM

One thing I forgot to mention. If you're using tables NEVER let Dreamweaver format them for you or your site will be ****.. Trust me I've never seen a page Dreamweaver made work better than even the noobiest of developers.

**JeremyMiller** · 01-13-2008, 02:11 AM

Quote:

Originally Posted by Mattmaul1992

One thing I forgot to mention. If you're using tables NEVER let Dreamweaver format them for you or your site will be ****.. Trust me I've never seen a page Dreamweaver made work better than even the noobiest of developers.

Bit of a side note, but I'd like to see Dreamweaver and it's evil cousin -- what is that Microsoft product? -- deleted. A nice del *.* /s. They both lead people to thinking that they can create a website when they should instead learn how websites work behind the scenese.

**Mattmaul1992** · 01-13-2008, 02:13 AM

Quote:

Originally Posted by JeremyMiller

Bit of a side note, but I'd like to see Dreamweaver and it's evil cousin -- what is that Microsoft product? -- deleted. A nice del *.* /s. They both lead people to thinking that they can create a website when they should instead learn how websites work behind the scenese.

You need to stop reading my mind lol.

**iamlevicious** · 01-13-2008, 02:19 AM

OK, well I appreciate all the tips here guys. I am just starting out in
web design, so all the tips help. I've ditched the tables and am going to
use an all CSS layout now. I think part of my problem can be attributed to
the fact that I forgot to properly link my style sheet, so it wasn't reading it at
all.

Thanks

**JeremyMiller** · 01-13-2008, 02:27 AM

Quote:

Originally Posted by iamlevicious

I've ditched the tables and am going to
use an all CSS layout now.

That's great news!

**przechwyt** · 01-14-2008, 09:01 AM

Type only those two:

display:block;
margin:0 auto;

**LadynRed** · 01-14-2008, 02:38 PM

A <div> IS a block-level element, the display:block isn't necessary.

**tkx** · 01-14-2008, 06:25 PM

Its because FF sucks and IE is so much better.

**LadynRed** · 01-14-2008, 08:09 PM

Quote:

Its because FF sucks and IE is so much better.

Clearly, you are out of your mind ! IE is a NIGHTMARE !

**Dubious Drewski** · 10:22 PM

Hmm, I'm having the same problem in FF. But I already have "text-align:center;" in my body tag section. Again, it all centers fine in IE, but not in FF. What else could be going on?

EDIT: This is what I've got. I have searched and searched and I cannot see why it wouldn't center.

Quote:

body {
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: #BFCBD9;
text-align: center;
}

I CAN get it to center if I put a <center> tag around my body code manually, but I shouldn't have to resort to that! Sheesh!

**chrishirst** · 01-25-2008, 03:16 AM

because only IE6 and below falls for the text-align:center trick on the body, proper browsers use the correct method of;

HTML Code:

margin:0 auto;

along with a fixed width on the element to be centred

( post #11 in this thread if your search missed it)

**Dubious Drewski** · 01-25-2008, 03:55 AM

FF is a proper browser and IE6 and below aren't, but FF can't center my page, and IE6 does? I don't get it. I WANT to have my page centered.

I tried adding "margin:0 auto;" to my body tag code, but it did nothing. I'm not sure what that was supposed to do anyway, heh.

So how do I center my page in FF then? I would really like to know.

**TripleMoons** · 04:21 AM

Try using this:

Code:

.wrapper {
    width:800px;
    margin:0px auto 0px auto;
}

and wrap it around your web site inside the body tags.

I also noticed you have some incorrect CSS in your center id:

Code:

align:center
text-align;

Which could be causing you problems of some sort.

Use W3C's HTML & CSS validator...It can help prevent cross browser problems (and make sure you're doing things right).

**chrishirst** · 01-25-2008, 04:57 AM

Quote:

Originally Posted by Dubious Drewski

FF is a proper browser and IE6 and below aren't, but FF can't center my page, and IE6 does? I don't get it. I WANT to have my page centered.

Then you have to use correct markup and CSS

Quote:

Originally Posted by Dubious Drewski

I tried adding "margin:0 auto;" to my body tag code, but it did nothing. I'm not sure what that was supposed to do anyway, heh.

So how do I center my page in FF then? I would really like to know.

You don't add it to the body element

see the bolded part of;

Quote:

Originally Posted by chrishirst

because only IE6 and below falls for the text-align:center trick on the body, proper browsers use the correct method of;

HTML Code:

margin:0 auto;

along with a fixed width on the element to be centred

**Dubious Drewski** · 01-25-2008, 12:27 PM

Ahh, haha. I had to apply it to the "container" of my content. Or the "wrapper" as you guys call it. I see now. Oh yes. Finally! So, why doesn't Dreamweaver do this for me, I wonder? It does everything else perfectly.

I doubt I'm going to remember "margin:0 auto;" without having to refer back to this thread.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!