...

View Full Version : How to set max width that centers position?



gh05
05-22-2009, 12:23 AM
Please see last post in this (http://www.codingforums.com/showthread.php?t=166698) thread:

Many Thanks!

SB65
05-22-2009, 08:39 AM
Is there a possible solution that involves setting max-width on #pageWrapper, rather than #innerColumnContainer?

gh05
05-23-2009, 01:24 AM
Is there a possible solution that involves setting max-width on #pageWrapper, rather than #innerColumnContainer?

I tried setting it on pagerwapper but it doesn't center then. Just stays to the left.

Any suggestions?

Thanks,

SB65
05-23-2009, 07:08 AM
Add:


margin:0 auto

to #pagewrapper as well.

gh05
05-23-2009, 05:24 PM
Ok I've done this now and it kind of works locally but when i upload it to the web the page really screws up with any resizing. (See http://www.onlinemoneytest.com) - The words and buttons move out of place. I'm unsure why it would work locally but not online??

Also I went to browsershots.com and it seems this layout displays differently on every browser.

Any ideas much appreciated.

Or even a better three column layout which will centralise and is fluid but has min/max width settings. I've tried looking everywhere but can't find one. Even these supposdely 'holy grail' layouts make content in the middle column dissapear when resized which seems pretty useless to me.

Thanks.

SB65
05-23-2009, 06:16 PM
Works fine in Firefox3/Chrome/Opera on resize, but yes, I get the same error on IE7.

If you refresh the resized page it's ok again, not that that helps. I don't think this is triggered by the margin: 0 auto or max-width though.

That looks like an IE bug to me.

A quick Google finds this (http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/bffdd34b-ee12-457f-b6ed-9c1574eaccf3) which looks like it matches what you've got.

A quick play around with this, if you either

- remove position:relative from #leftColumn
- or remove the 4% left and right margin from body

that seems to fix it, using the IE developer toolbar, without causing any obvious issue elsewhere. Maybe give that a try.

More IE strangeness.....

gh05
05-23-2009, 08:50 PM
Works fine in Firefox3/Chrome/Opera on resize, but yes, I get the same error on IE7.

If you refresh the resized page it's ok again, not that that helps. I don't think this is triggered by the margin: 0 auto or max-width though.

That looks like an IE bug to me.

A quick Google finds this (http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/bffdd34b-ee12-457f-b6ed-9c1574eaccf3) which looks like it matches what you've got.

A quick play around with this, if you either

- remove position:relative from #leftColumn
- or remove the 4% left and right margin from body

that seems to fix it, using the IE developer toolbar, without causing any obvious issue elsewhere. Maybe give that a try.

More IE strangeness.....

I don't understand it though because it works fine locally. The exact same files have an error in IE as soon as I upload them to the site. Also, for me (on IE7 too), the page content doesn't go back to normal as soon as i return the page to full size. Very strange.

I'll give what you said a try anyway.

effpeetee
05-23-2009, 09:22 PM
There is some useful stuff here (http://bonrouge.com/~faq).

and more here. (http://www.exitfegs.co.uk/Sources.html)

This is quite spectacular (http://nopeople.com/CSS/background_image_resize/).

Frank

gh05
05-24-2009, 04:04 PM
Works fine in Firefox3/Chrome/Opera on resize, but yes, I get the same error on IE7.

If you refresh the resized page it's ok again, not that that helps. I don't think this is triggered by the margin: 0 auto or max-width though.

That looks like an IE bug to me.

A quick Google finds this (http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/bffdd34b-ee12-457f-b6ed-9c1574eaccf3) which looks like it matches what you've got.

A quick play around with this, if you either

- remove position:relative from #leftColumn
- or remove the 4% left and right margin from body

that seems to fix it, using the IE developer toolbar, without causing any obvious issue elsewhere. Maybe give that a try.

More IE strangeness.....

Ok I got rid of the position:relative and that seems to have done the trick. Not sure why really that was happening in IE but glad it isn't happening anymore. Many Thanks for your help!

gh05
05-24-2009, 04:06 PM
There is some useful stuff here (http://bonrouge.com/~faq).

and more here. (http://www.exitfegs.co.uk/Sources.html)

This is quite spectacular (http://nopeople.com/CSS/background_image_resize/).

Frank

Cheers, I was hoping not to get too involved with CSS this time around as i learnt last time i tried to build a website how difficult it can be but i guess it's something which I'll have to learn about as little things always go wrong with errors on IE.

Thanks for the links.

gh05
05-25-2009, 12:13 AM
*Sigh*...well i thought it was sorted but now when I input text to the columns it doesn't stay within the columns. I think the changes made have broken that part of it and I'm not sure how to get it back.

Anyone know if there is a simple solution to that while avoiding the original IE7resizing problem?

See onlinemoneytest.com for what i mean. The right column isn't containing any text and neithe is the header panel. I think the others are the same too.

gh05
05-25-2009, 03:32 AM
*Sigh*...well i thought it was sorted but now when I input text to the columns it doesn't stay within the columns. I think the changes made have broken that part of it and I'm not sure how to get it back.

Anyone know if there is a simple solution to that while avoiding the original IE7resizing problem?

See onlinemoneytest.com for what i mean. The right column isn't containing any text and neithe is the header panel. I think the others are the same too.

Edit: I've put 'word-wrap: break-word;' inside the body so now the text wraps in Internet Explorer but I have no clue on how to make it wrap in firefox and other browsers.

Maybe I should just fix whatever I broke as it wrapped before i made some changes?

gh05
05-25-2009, 03:46 PM
Fixed now, Thanks.

gh05
05-27-2009, 06:19 PM
Oh well. I thought it was fixed until I tried it today in Internet Explorer 6 and get exactly the same issues (only worse) as i was getting in IE7 before i took away the 'position:relative' code from #leftColumn, #middleColumn, #rightColumn, * html #SOWrap.

This time, not only is the left menu jumping into the body of the page upon resize, but the headers above the menus aren't displaying and also the min and max widths don't seem to be having any effect at all. If i put position:relative back in then it works perfectly again in IE6 but messes up in IE7 and Firefox!

NB. The original author of the script has put a note in saying that position:relative is needed for IE to fix rendering issues but it was obviously written before IE7 and the latest version of firefox. I'm clueless as to a fix. Any ideas anyone?

Please see www.onlinemoneytest.com if you have IE6 to see what i mean. Thanks.

gh05
05-28-2009, 06:09 PM
Does anyone know if this could be an error caused with other parts of my code or if it's just a bug in IE which can't be fixed? Cheers.

SB65
05-29-2009, 10:11 AM
Hi gh05

You have a missing semi-colon in your css (comments removed for clarity):


body
{margin: 25px 4%
font-size: 100.1%;
word-wrap: break-word;
white-space:normal;
}

Worth fixing that for starters - that might be causing some issues. You've also got a few validation errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.onlinemoneytest.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0), although to be honest it doesn't look like any of these would cause the issue you're having. However, worth fixing.

Guessing that these don't fix things, then an approach might be to use condtional comments (http://www.quirksmode.org/css/condcom.html) in your html to call different css files, since it sounds like you can get it to work either in IE6 or IE7.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum