...

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



mike-vf
12-01-2009, 03: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
12-01-2009, 03: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
12-01-2009, 04: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
12-01-2009, 04: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
12-01-2009, 04: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
12-01-2009, 04: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
12-01-2009, 04: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
12-01-2009, 05: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
12-01-2009, 05: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
12-01-2009, 05:14 PM
Beer is good (http://beeradvocate.com/beer/profile/408/1203) :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum