It has been brought to my attention that lots of people and the dev-team have an issue on centering a shop using the correct doctype declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Which is needed in order to validate to w3c-standard and to make it "cross browser"
In your stylesheet you have the tag BODY, this tag is responsible for the viewport and should look like this:
BODY {
/*For the background image, if used*/
background-image: url('images/body_background.png');
background-repeat: repeat;
background-attachment: fixed;
/*Set standard font size to 100%*/
font-size: 100%;
/*Set the margins and width of the shop. Note the use of "auto" and the rule for overflow*/
margin-top: 16px;
margin-left: auto;
width: 780px;
margin-right: auto;
padding: 0;
overflow: scroll
}
/*Define a new class like so, to set the height of the shop (the others are optional)*/
/*This affects the behaviour of the shop within the BODY tag above*/
.bodytable {
background-color: #EFEFEF; /*Of course you could use another background image here*/
border-collapse: separate; /*Optional*/
border-spacing: 6px; /*Optional*/
padding: 0;
height: 590px;
width: 100%
}
Next step is to open all your files in document root, which is where you have your index.php file
First add this just before the title tag:
<!-- Make IE browsers CSS 2.1 compatible//-->
<meta http-equiv="X-UA-Compatible" content="IE=8" > <!-- IE8 mode //-->
<!--[if lte IE 7]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<![endif]-->
Next is to find wher your body table begins, its most likely after the inclusion of the header:
Change the lines to:
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->
<!-- body //-->
<table class="bodytable">
<tr>
......
Thus we have referenced our css class for the body, and can set the height of the shop.
You can see it in action at www.tyraochsally.se or www.ji-fashion.com
Kind regards
Sara
OSCmasters
Latest News: (loading..)
0
3 replies to this topic
#2
Posted 17 June 2010, 04:57
Addition:
For the overflow you could optionally use:
overflow:auto;
This rule will give the shop scrollbars only when needed.
Regards
Sara
OSCmasters
For the overflow you could optionally use:
overflow:auto;
This rule will give the shop scrollbars only when needed.
Regards
Sara
OSCmasters
#3
Posted 22 September 2010, 22:05
Juto, on 15 June 2010, 12:24, said:
It has been brought to my attention that lots of people and the dev-team have an issue on centering a shop using the correct doctype declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Which is needed in order to validate to w3c-standard and to make it "cross browser"
In your stylesheet you have the tag BODY, this tag is responsible for the viewport and should look like this:
BODY {
/*For the background image, if used*/
background-image: url('images/body_background.png');
background-repeat: repeat;
background-attachment: fixed;
/*Set standard font size to 100%*/
font-size: 100%;
/*Set the margins and width of the shop. Note the use of "auto" and the rule for overflow*/
margin-top: 16px;
margin-left: auto;
width: 780px;
margin-right: auto;
padding: 0;
overflow: scroll
}
/*Define a new class like so, to set the height of the shop (the others are optional)*/
/*This affects the behaviour of the shop within the BODY tag above*/
.bodytable {
background-color: #EFEFEF; /*Of course you could use another background image here*/
border-collapse: separate; /*Optional*/
border-spacing: 6px; /*Optional*/
padding: 0;
height: 590px;
width: 100%
}
Next step is to open all your files in document root, which is where you have your index.php file
First add this just before the title tag:
<!-- Make IE browsers CSS 2.1 compatible//-->
<meta http-equiv="X-UA-Compatible" content="IE=8" > <!-- IE8 mode //-->
<!--[if lte IE 7]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<![endif]-->
Next is to find wher your body table begins, its most likely after the inclusion of the header:
Change the lines to:
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->
<!-- body //-->
<table class="bodytable">
<tr>
......
Thus we have referenced our css class for the body, and can set the height of the shop.
You can see it in action at www.tyraochsally.se or www.ji-fashion.com
Kind regards
Sara
OSCmasters
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Which is needed in order to validate to w3c-standard and to make it "cross browser"
In your stylesheet you have the tag BODY, this tag is responsible for the viewport and should look like this:
BODY {
/*For the background image, if used*/
background-image: url('images/body_background.png');
background-repeat: repeat;
background-attachment: fixed;
/*Set standard font size to 100%*/
font-size: 100%;
/*Set the margins and width of the shop. Note the use of "auto" and the rule for overflow*/
margin-top: 16px;
margin-left: auto;
width: 780px;
margin-right: auto;
padding: 0;
overflow: scroll
}
/*Define a new class like so, to set the height of the shop (the others are optional)*/
/*This affects the behaviour of the shop within the BODY tag above*/
.bodytable {
background-color: #EFEFEF; /*Of course you could use another background image here*/
border-collapse: separate; /*Optional*/
border-spacing: 6px; /*Optional*/
padding: 0;
height: 590px;
width: 100%
}
Next step is to open all your files in document root, which is where you have your index.php file
First add this just before the title tag:
<!-- Make IE browsers CSS 2.1 compatible//-->
<meta http-equiv="X-UA-Compatible" content="IE=8" > <!-- IE8 mode //-->
<!--[if lte IE 7]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<![endif]-->
Next is to find wher your body table begins, its most likely after the inclusion of the header:
Change the lines to:
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->
<!-- body //-->
<table class="bodytable">
<tr>
......
Thus we have referenced our css class for the body, and can set the height of the shop.
You can see it in action at www.tyraochsally.se or www.ji-fashion.com
Kind regards
Sara
OSCmasters
Hi Sara, this looks good. Thanks for this. Been looking for an easy way to center shop, that supports all browsers, etc.
I believe a typo is in
<!--[if lte IE 7]>
it should be
<!--[if lte IE 7]-->
Also, want to make sure I do this right. Should the bodytable class be like this
<!-- body // --> <table class="bodytable"> <tr> <table border="0" width="100%" cellspacing="3" cellpadding="3">
or this
<!-- body // --> <table class="bodytable" border="0" width="100%" cellspacing="3" cellpadding="3"> <tr>
Thanks!
#4
Posted 06 February 2011, 11:53
mcbsolutions, on 22 September 2010, 22:05, said:
Hi Sara, this looks good. Thanks for this. Been looking for an easy way to center shop, that supports all browsers, etc.
I believe a typo is in
it should be
Also, want to make sure I do this right. Should the bodytable class be like this
or this
Thanks!
I believe a typo is in
<!--[if lte IE 7]>
it should be
<!--[if lte IE 7]-->
Also, want to make sure I do this right. Should the bodytable class be like this
<!-- body // --> <table class="bodytable"> <tr> <table border="0" width="100%" cellspacing="3" cellpadding="3">
or this
<!-- body // --> <table class="bodytable" border="0" width="100%" cellspacing="3" cellpadding="3"> <tr>
Thanks!
Hello. No it's not a typo see: Syntax of Conditional Comments: http://msdn.microsoft.com/en-us/library/ms537512(v=VS.85).aspx
For the body table it should be just <table class="bodytable"> How the table looks is set in the css for the clas bodytable.
You could have a look at My Shop (Whiach also have a som other nice features)
Sara
