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.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help please... How can I fix the width of my wrap area and keep it centred

    Need help please...

    How can I fix the width of my wrap area and keep it centred
    In internet explorer 8 the content is a percentage of the browser size. All I want is to fix the widtht to 888px and keep it centered.

    Just like it is in FF.

    http://speedyhotelbookings.com/

    If you use IE8 on a wide screen you will see it.

    Really appreciate some advice on this

    Thanks

    Mike

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mike-vf,
    in style.css make these changes highlighted in red -
    Code:
    body {
    background:#fcfcfc;
    background-image: url(http://speedyhotelbookings.com/images/speedy-hotel-bookings-head.png);
    background-repeat: no-repeat;
    background-position: top center;
    color:#111;
    font-size:62.5%;
    font-style:normal;
    /*margin:210px;
    padding:0 1em;*/
    font-family: Verdana, Tahoma, Arial, Sans-serif;
    }
    /*Wrap*/
    #wrap {
    width: 888px;
    margin: 0px auto;
    padding:0;
    overflow: auto;
    font-size:1.1em;
    } 
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the really fast reply. I just added your mod, The width is fixed but something is not quite right.

    What can I try next?

    Thanks

    Mike

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your page appears to be in quirks mode. Remove all the white space at the top and this line highlighted in red -
    Code:
    
    
    
    
    
    
    <!-- book hotels online -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    <head profile="http://gmpg.org/xfn/11">
    <!-- TradeDoubler site verification 1746983 -->
    <!-- TradeDoubler site verification 1745528 -->
    The white space may not even matter, but the comment should go. The DocType needs to be the first line.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Getting closer :-)

    Quirks mode... I had a php include at the start that loaded all my variables.

    OK I took that out and the content is now centred. Still have the red and lost top of my head logo.

    What now :-)

    Thanks

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I see what's going on...
    You have your header img as a background on the body of your document.
    A few more changes to #wrap will fix that -
    Code:
    /*Wrap*/
    #wrap {
    width: 888px;
    margin: 211px auto 0;
    padding:0;
    overflow: auto;
    /*background: #f00; this was for testing only*/
    font-size:1.1em;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Absolutely awesome, that was driving me nuts. There is just one small detail if it is not too tricky...

    If the bottom horizontal line could match the top in length that would be real cool.

    Really appreciate your help.

    Send me your email and I'll paypal you $10 if that's ok

    Regards

    Mike

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Since #footer is outside of #wrap it needs to be given a width if you don't want it to expand to fit it's container, body.
    Like this -
    Code:
    #footer {
    width: 888px;
    margin: 0 auto;
    clear:both;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You the man :-)

    Yes this line was causing problems: <?php echo $myInPageKeywordsVar;?>

    Which echoed: <!-- book hotels online -->

    Took that out and put all my other variables back in and it works a charm.

    Again I am real grateful for your time, pm me and I'll buy you beers :-)

    Thanks

    Mike

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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