Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts

    How to set max width that centers position?

    Please see last post in this thread:

    Many Thanks!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Is there a possible solution that involves setting max-width on #pageWrapper, rather than #innerColumnContainer?

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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,

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Add:

    Code:
    margin:0 auto
    to #pagewrapper as well.

  • #5
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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.
    Last edited by gh05; 05-23-2009 at 04:29 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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 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.....

  • Users who have thanked SB65 for this post:

    gh05 (05-24-2009)

  • #7
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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 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.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There is some useful stuff here.

    and more here.

    This is quite spectacular.

    Frank
    Last edited by effpeetee; 05-23-2009 at 08:28 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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 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!

  • #10
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    There is some useful stuff here.

    and more here.

    This is quite spectacular.

    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.

  • #11
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    *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.
    Last edited by gh05; 05-24-2009 at 11:18 PM.

  • #12
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by gh05 View Post
    *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?

  • #13
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Fixed now, Thanks.

  • #14
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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.
    Last edited by gh05; 05-27-2009 at 05:37 PM.

  • #15
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •