Problems centering the website.

[perhogseth]

Hi there,

I have problems centering the website, but if I try (I probably do it the wrong way) the website won`t fit in the 800x600 pixels screens.

It show up differently in Mozilla Firefox than in IE7.

What i do is to try to stretch the sides until it fit with the nearest "string"
to the right. You can see this most clearly using Firefox and specially just above a centered banner about Topsonline. A blue banner.

I try to "stretch" the inner sides to the wight, but then the website gets
too big to fit into 800 x 600 pixels.

I have just learned about NVU so I probably do something wrong.
I just don`t know what. Perhaps I change the tables in a wrong way?

I would be very grateful if someone could tell me what I do wrong and hopefully tell me what to do to fix the problem.

I`ll be looking forward to hearing from you again! :-)

Best regards,

Per Hogseth

[troyzone]

Hi Per,

As you have noticed, web pages often display differently in multiple browsers due to differences in the way that each browser interprets and renders the source code. Ideally, they should all display web sites exactly the same, however in reality that is seldom the case. In the case of your web page, the middle column looks more off-center in Internet Explorer 6 than it does in Firefox, at least it does on my computer.

The basic structure of your site is a large three cell table with many elements inside of each cell. One cell of the main table contains the left column, one cell contains the right column, and one cell contains the middle column.

The problem is, the width of the three cells have to add up to the main table's width of 780 pixels, however your left and right columns each have a width of 140 pixels and your middle column has a width of 400 pixels, which totals 680 pixels. This leaves an extra 100 pixels of space that has to be distributed someplace inside the main table, and Internet Explorer is putting it in between the middle and right columns.

The way to fix this is to ensure that your main table's three cells have the same width as the outside of the table so that there is no wasted space in between the columns that throws your centering off.

I would not recommend dragging the sides of your table cells around in NVU as this causes NVU to specify pixel values for the cell sizes. It is difficult to get your pixel sizes all exactly right to make everything line up properly in one browser as it is, but making your site display properly in multiple browsers using this method can be nearly impossible when browsers sometimes have a difference of a few pixels between them in how they display various elements of your page.

Instead, I would recommend setting at least one of your cell widths to a percentage value rather than a pixel value, as this will allow the browser to automatically resize the cell to fit the space available. This can be done either via the table cell's properties page in your editor or via the source code.

In this case, your left and right colums are about 140 pixels each, which is fine. You would then want your remaining space to be allocated to your middle column.

To accomplish this, I would suggest setting the table cell making up the middle column to a width of 100%, rather than a pixel value. This should make the browser resize it automatically to use up all of the remaining space in the main table after 140px is set aside for each of the two side columns.

Look for the following code in your page's source code that denotes the table cell containing the middle column:


<td style="vertical-align: top; text-align: left; width: 400px;">


Change the part indicated above in red to width: 100% instead of width: 400px as follows:


<td style="vertical-align: top; text-align: left; width: 100%;">


You could also change the text-align: left part to text-align: center instead if you like, however it appears that you have each element in the middle column centered individually so it may not be necessary to do so at this point.

The large, blue "Webmasters Top Recommendations" text that is above your top three ads in a row table is still off to the left in Internet Explorer even after implementing the above fix. This is because it is inside its own interior table cell that also has a width of 140px specified on it that should be changed to 100% as well. Locate the following code:


<td style="width: 140px;" colspan="3">


Change the 140px to 100% and this issue should be fixed as well.

Hopefully the above info will help you correct the centering issues with the middle column of your web page.

Troy

[perhogseth]

Dear Troy,

I just did the recommended changes in the source code and
the result is just fabulous.

Thank you so much. You`re very kind!

I just wonder if I write something in the middle row or change some text, in the future, can I do this without being afraid of getting the trouble of yesterday?

But I guess this has been set for the future!

Thanks again. You`re marvelous. What should I`ve done without people like your self!

Have a great day!

Best regards,

Per ;D

[troyzone]

You are welcome Per.

You will always be making edits to your site to add or remove offers and so forth...you should be able to do this without problems as long as you are just making minor edits that don't affect the overall structure of your site.

However, any time you edit your site there is the potential for problems, so make sure that you always have a good backup of your web page saved before you start making changes. If you have a backup saved then at least you can go back to it if things go awry, which is not uncommon.

Basically, all I did was make sure that any table cells, DIVs, or other areas of the site that needed to fill a certain area without requiring pixel-perfect precision had a percentage value specified for the width rather than a pixel value. This allows the browser to resize the section as needed to fit the available space.

When you drag things in editors such as NVU, they tend to set pixel values to the width you dragged it to, which is not always the best solution. Sometime it is better to edit the properties for the page element and set the size as a percentage instead. You can see in my previous post that is essentially what I did in this case.

Troy