Hi - I'm trying to change a theme from a variable width one to a fixed width (966 wide).

I've swapped all the % references that were in the css and the theme, however it is for some reason still stretching to the full screen size?!

Can anyone figure out what's happening?

The site is - www.cgenie.net

Many thanks!

Try width="966px" instead of width="966" for table dimensions.

Yes you must specify the tables width in px. set margins to auto that may help too (mor so with divs then table but)

Also, just a heads up. I would keep your tables inside as percentages until you figure out the right measurements.
try 99.9% for more compatability.

Next if you want to get exact px widths for inner tables and your feeling a little lazy (like we all do from time to time) check out the Firefox extension called "Measure it".
It literally lets you measure your pixels. Pretty sweet tool.

Visit here if you already have forefox.

If not useful for this problem will surely be useful in the future!

Good luck.

Theres always been a debate regarding fixed width and percentage (liquid) layouts. Its very difficult to get a true liquid layout in XOOPS however because most modules/themes are utilizing html rather than css.

Fixed width is great for a layout specific site and I know our site is going to switch back to one. It really stretches far too much at a high resolution and not all the theme is css.

Never the less, I think its safe to say now that 800x600 screen resolutions are a marginal standard at best,accounting for far fewer surfers than before, making 1024x768 a miininum standard. Which means your 900px range is good. IMO.

(However you will have to adjust the tables inside and make sure they dont exceed in total the width of the table, and that padding and margins dont affect this as well. Which is why I suggest converting your nested tables to percentages until you figure the closest exact pixel range.)

Unecessary jabber, sorry.

Try that extension , its a great tool.

-have a good one.

hmm hi guys, thanks for the suggestions - I've tried all your ideas, but it's still not making a difference.

There's a CSS % that I can't seem to change:

table {
width: 100%;
margin: 5;
padding: 5;

font-size: small
}

If I set this to 966px, then all the tables are that width - so I don't think that's gonna work.

Apart from that, it's the only width % left in the CSS - so how's it stretching to fullscreen!?!

assign the style to the outter table, not all table tags

It is stretching full screen because the original sum of the graphics you are using which are hard coded total about 1500+ pixels wide.
Where you have tried to set the widths in your theme for the pictures is the right idea for starters but you have it set wrong for the html.
In your theme where you have instructed to redraw/resize the pictures-remove the px. In css you have to use the px after the number but not in the html. So instead of, for example in the theme.html width="255px" make it width="255". Also take out the px for the heights too.

Quest

Hi guys,

thanks for all the advice!

Quest: I'm not sure what you mean about the sum of the graphics being 1500+ pixels wide - I've specifically set the graphics to be 966px in total - so the html is:

<table width="966" cellspacing="0" cellpadding="0" class="bg">
<tr><td width="255"><img src="<{$xoops_url}>/themes/<{$xoops_theme}>/images/menubar_01.jpg" width="255" height="104" /></td>
<td width="642"><img src="<{$xoops_url}>/banners/banner.jpg" width="642" height="104" /></td>
<td width="69"><img src="<{$xoops_url}>/themes/<{$xoops_theme}>/images/menubar_03.jpg" width="69" height="104" /></td>
</tr>

I've taken the px out of theses (as you can see, but it doesn't appear to affect the rendering of the page...?

XUser: yeah I reckon that'd work if I could set the outer table to be another css class or something - how would I do this though - the css is specifying table = 100% so that'll affect all tables - I'm very new to css so I'm not sure how I can specify only a specific table.

maybe if I put class=outertable and then made an outertable bit in the css?! I'm just making this up really so any tips would be most appreciated!