Forum Moderators: open
I am not - as will become apparent - a great expert at webdesign just yet.
I am trying to get the layout set up for a new site I'm building:
<snip>
There's just a 'Site Under Construction' page there at the moment, but as I say, I'm trying to get the basic layout for the pages right before I go much further.
The index page above looks fine (matter of opinion - but it looks the way I want it to!) in IE, but there are problems with Mozilla, Netscape and Opera.
There are two problems:
***** No 1 *****
In Mozilla and Netscape (so in Gecko I suppose), the main section of the page (the white bit in the middle, which is a table) is not centered, but rather appears on the left.
I have tried different ways of centering it - using <table align="center" ....> is the way it currently works. I have also tried enclosing the table in <p align="center"> and also by defining "horizontal-align: center;" in the CSS.
None of these seem to get the table to be centered in the Gecko-based browsers.
I have also tried enclosing the whole lot in a <center> tag, and whilst this gets the table to appear in the center as I want it, it makes Gecko-based browsers exhibit the same problem I describe for Opera below:
***** No 2 *****
In Opera, the table is centered, but it doesn't stretch to the bottom of the screen.
This won't be a problem on pages where there is enough content in the table to spread to the bottom of the screen, but where there are only a few lines (as in the current index page), the table just stops under the last line of text.
The way I have the table set up is <table width="750" height="100%" ...>
It may be a problem I suppose with mixing an absolute value with a relative/percentage value.
I want the table to be exactly 750px wide (and centered) so that I can be sure the page will look similar on any resolution of screen (i.e. it's only the coloured borders at the side that change depending on what screen res. the pages are viewed at).
But, I also want the main (white) section in the middle to always stretch the whole way from the top to the bottom of the screen. Using height="100%" seems to work fine in IE and Gecko, but not Opera.
I don't really want to just add a load of <br>'s or anything, as it will be hard to judge how many are needed (for different res.'s), and I don't want vertical scrollbars where they are not needed.
I also don't really want to use a script to determine the res. the agent is running, and define the dimensions of the table this way; I'm trying to make it as simple as possible, and ensure it works on as many different platforms as I can & using JavaScript etc.. doesn't really sit well with this objective!
**********
Right, sorry this is such a long post, but I thought I'd better explain my questions properly.
If anyone can offer me any advice on these 2 problems, I'd be very very grateful.
Thanks in advance,
mcdruid.
[edited by: korkus2000 at 12:21 pm (utc) on May 2, 2003]
[edit reason] no personal urls please [/edit]
No. 1:
You're table is given a fixed width of 750px, try giving it a width of 100%, with your centre cell as 90% (as it is now), and the left and right ones at 5%. Align the background images to the left and right respectively.
No. 2:
In your CSS, make sure to specify a body height of 100%, this may allow Opera to stretch the table to 100% of the height - as it's parent (the body) has now been given a height of 100% also.
Also, in your CSS, the body has a style rule of color: #000000px;, the px is an error here as it is a unit of measurement.
HTH
Re: Problem #1
I'm not sure that align='' is a standard attribute within <table>.
I would put your outermost <table> within a <div align='center'>, so you have...
<div align='center'>
<table width='750'><tr><td>
.. rest of page ..
</tr></td></table>
</div>
