PDA

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



mike-vf
Dec 1st, 2009, 02:38 PM
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

Excavator
Dec 1st, 2009, 02:56 PM
Hello mike-vf,
in style.css make these changes highlighted in red -


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;
}

mike-vf
Dec 1st, 2009, 03:03 PM
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

Excavator
Dec 1st, 2009, 03:24 PM
Your page appears to be in quirks mode. Remove all the white space at the top and this line highlighted in red -








<!-- 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.

mike-vf
Dec 1st, 2009, 03:32 PM
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

Excavator
Dec 1st, 2009, 03:39 PM
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 -

/*Wrap*/
#wrap {
width: 888px;
margin: 211px auto 0;
padding:0;
overflow: auto;
/*background: #f00; this was for testing only*/
font-size:1.1em;
}

mike-vf
Dec 1st, 2009, 03:53 PM
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

Excavator
Dec 1st, 2009, 04:03 PM
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 -

#footer {
width: 888px;
margin: 0 auto;
clear:both;
}

mike-vf
Dec 1st, 2009, 04:12 PM
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

Excavator
Dec 1st, 2009, 04:14 PM
Beer is good (http://beeradvocate.com/beer/profile/408/1203) :thumbsup: