Just to point out.... If you

greg — Wed, 24 Sep 2008 15:22:14 +0000

Just to point out....

If you center a DIV like you want, as per Darlings post, you must specify a width for the div.
Without a specific width, a DIV will fill the available horizontal space it has, and therefore cannot center as it will be the full width of the area it is in.
Also, if you float a div, left/right, it cannot have auto left/right margins.
I know it would seem like a pointless mixture of settings, but sometimes you want to center a div and then float something next to it.

I often wondered if there was a way around this, or if it's just another one of those badly designed CSS structural things.

To centre a fixed width

Darling — Wed, 24 Sep 2008 14:40:56 +0000

To centre a fixed width layout you'll need to nest all of your other divs inside one large container

like this

<body>
  <div id="container">
    Put your content here
  </div>
</body>

and then in the css you'll need something along these lines

#container{
  margin: 0 auto;
  width: xxxpx;
}

obviously in place of xxx you put the width of your layout.
I think there also may be some problems with this in earlier versions of IE.

Okay, I'm starting to

twebb — Tue, 23 Sep 2008 16:11:35 +0000

Okay, I'm starting to understand CSS a little better and can definitely see why this is the way everyone has gone. Lots more flexibility on the layout end, and a lot easier to fix if something isn't showing right. This is exciting stuff. However, I'm pretty new to this and am still having a few issues with this site...any suggestions on the following...?

Here is an example link:
http://www.indivia.biz/client/fusion/2008_09_22/gettingstarted.htm

1. How do I center the whole page? Is there a simple way to do this? I have done a little searching on this and tried a couple of things but so far nothing is working. It seems like this is maybe a little harder to do with a CSS layout...?

2. I pasted in the code for the drop down menus on the navbar from the previous version of the site. For some reason, the borders around the individual cell items on the menus now look different in IE vs. Firefox. The way I want them to display is the way they currently look in Firefox (thinner borders).

3. The right side of the box is out of whack in Firefox. In IE, it shows "correctly"...as a straight line. But in Firefox you can see that it is one pixel off. I can't figure out what's causing this.

Thanks for any help!!

Hi guys, thanks a lot for

twebb — Mon, 22 Sep 2008 11:01:56 +0000

Hi guys, thanks a lot for the help! As I said, I have been just creating pages in Fireworks and exporting them to Dreamweaver, though I know that this can introduce a lot of problems. I am pretty good at figuring out what different pieces of code do, but in this case I was stumped. I know all those spacers and things that Fireworks puts in there are just crazy.

I guess it's finally time to get deeper into CSS! It's something I should have done long ago. JeevesBond, thank you for that link on CSS layout, I will definitely study up on that. I also just discovered that Fireworks will actually export to a CSS layout as well as tables, which I never realized. Though I'm not sure whether I should trust it now.

Anyway, I think I know what I need to do, thanks again for the tips!

Hi Tim, welcome to the

JeevesBond — Sat, 20 Sep 2008 05:18:33 +0000

Hi Tim, welcome to the forums.

I had a quick try at fixing this but the code of that page is a complete mess! The root of the problem is that tables should not be used for layout. That was the way to do things in the 90's, but the world has moved on.

The other problem is the code has been generated by a piece of software. That's fine, until there's a problem. Unless you understand the code of a page you've created, it's impossible to debug it.

Megan has written an article on the subject of using XHTML/CSS for layout, instead of tables. There are some good links on getting started with switching in the References section.

Sorry if this sounds a bit harsh, I did try to look at this. However, debugging an over-complicated auto-generated layout is not easy. You'll save time in the long run by just tearing it all down and starting again.

It seems the image

greg — Sat, 20 Sep 2008 05:07:57 +0000

It seems the image "images/index_r2_c9.jpg" is moved down, or is "underneath" a table cell or row, but that is something to do with your table cells or rows.
I cannot see where it goes wrong, but one solution you might try is to put a border of "2" in the <table> and it might reveal which cell/row is causing the issue.

A side note, you seem to use the image spacer/gif a lot in many cells. Perhaps a simpler alternative with CSS would be better?
It seems you only use it to space things out, and margins/padding does that much more efficiently as the browser doesn't have to draw an image many times.
The very least would be to just use a specific class on the cells you want to space, rather than use an image to space them. Define a table row with a specific class for the spacing on the top of the page for example

tr.top_space{
margin: 1px 0px 0px 0px;
}

Also, the way you do it now you have lots of cells to space the top. At the least perhaps use colspan="9" instead of the 9 individual cells you draw currently.
Using tables doesn't "really" matter, and is all aguable these days with tables versus CSS, but you should get into the habit of writing tidy and efficient code even if you use tables.

Although, for the design you have, a CSS layout would be very simple to do. A few DIVs here and there.

If you use the browser to increase text size, it also creates the same problem in firefox with tta gap above the image in internet explorer. Due to that cell being spanned over 4 rows. CSS would also fix this issue.