On our website I am using CSS to streamline to looks of our site.
In all files I have put a div to set the size of the file to 100%. No very clever to do it this way, but still.
Now I want to change the size of the site. I tried to do this via CSS in the body as follows:
body { font-family: Verdana; font-size: 11px; background-image: url (<!-- m --><a class="postlink" href="http://www.themagictouch.com/pictures/icons/tmtbg.gif">http://www.themagictouch.com/pictures/icons/tmtbg.gif</a><!-- m -->); repeat-y top left fixed; width: 750px; height: 100%; overflow: auto}
This does not work. Can I set the width for a page in the body or should I use something else. I do not want to change all files before it will apply.
Each file starts with the following div
<div style="position: absolute; left: 12; top: 1; width: 100%; height: 650">
Is it possible to overwrite this with CSS?
Thanks for your kind attention!
MarianneFirst off your css has errors:
body {
font-family: Verdana;
font-size: 11px;
background: url(<!-- m --><a class="postlink" href="http://www.themagictouch.com/pictures/icons/tmtbg.gif">http://www.themagictouch.com/pictures/icons/tmtbg.gif</a><!-- m -->) repeat-y top left fixed;
width: 750px;
height: 100%;
overflow: auto
}
However, elements that are abolutely positioned are removed from the document flow, so that probably won't do what you want it to do.You can do it using a strict doctype and absolute positioning on the body
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dave</title>
<style type="text/css"><!--
body {
font-family: Verdana;
font-size: 11px;
background: url(<!-- m --><a class="postlink" href="http://www.themagictouch.com/pictures/icons/tmtbg.gif">http://www.themagictouch.com/pictures/icons/tmtbg.gif</a><!-- m -->) top left fixed repeat-y;
width: 300px;
position: absolute;
}
--></style>
</head>
<body>
<div style="position: absolute; top: 0; left: 0; width: 100%;">
sidfb siudfb suidbhf uishd fuishd fiuhsdu fhsudoh faio fuohd lknzkxu hcoianeiofho aksd owrefh ohi wreoh owrhea oashd ohsd ao hosdh klzxncouih whc suiod uhse fshd iuhwoei nouihasdoi ois
</div>
</body>
</html>Thanks Dave!
When I try your suggestion, it works.
If I copy it into my CSS and upload it to the web, it only applies for the background, the text still is 100%.
I have no clue why it does work in a complete new file and not in an existing file.
Mariannecan you give us either the URL or the code you're using?Hello Dave,
This is the complete code I am using:
------------------
body {
font-family: Verdana;
font-size: 11px;
background: url(<!-- m --><a class="postlink" href="http://www.themagictouch.com/pictures/icons/tmtbg.gif">http://www.themagictouch.com/pictures/icons/tmtbg.gif</a><!-- m -->) repeat-xy top left fixed;
width: 750px;
position: absolute;
}
menu {
color: #000;
margin-bottom: 15;
font: 10px Verdana;
}
area {
color: #F00;
margin-top: 15;
margin-bottom: 15;
font: 11px Verdana;
}
font {
font-family: Verdana;
}
h4 {
font: 13px Verdana; font-weight: bold;
}
h3 {
font: 13px Verdana; font-weight: bold;
}
h2 {
color: #000;
font: 12px Verdana;
}
h1 {
color: #000;
font: regular 10px/150% Verdana;
}
li {
color: #000;
font: 11px Verdana;
}
link {
color: #000;
font: 11px Verdana;
}
p {
font: 11px Verdana;
}
small {
color: #000;
font: 9px Verdana;
}
table {
font: 11px Verdana;
}
td {
font: 11px Verdana;
}
tr {
font: 11px Verdana;
}
title {
color: #000;
font: 13px Verdana;
}
ul {
list-style-type: square;
font: 11px Verdana;
}
ol {
list-style-type: decimal;
font: 11px Verdana;
}
html {
font: 11px Verdana;
}
pre {
font: 11px Verdana;
}
hr {
size: 1px;
width: 100%;
color: #000;
}
h5 {
color: #F00;
font: 25px Futura Md BT;
}
a.one:link {
color: #000;
font: 11px Verdana;
}
a.one:visited {
color: #000;
}
a.one:active {
color: #F79E03;
}
a.one:hover {
color: #FF0;
}
a.two:link {
color: #00F;
font: 11px Verdana;
}
a.two:visited {
color: #00F;
}
a.two:active {
color: #69C802;
}
a.two:hover {
color: #F00;
}
a:link {
color: #00F;
font: 11px Verdana;
}
a:visited {
color: #00F;
}
a:active {
color: #69C802;
}
a:hover {
color: #F00;
}
input {
border: 1px solid #000;
}
----------------------
This does not change the size of the body text to 750px.
I am using an external style sheet.
MarianneCan we see the html code too?
It probably needs to be validated.An examle of the HTML
______________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"tmtstyle.css">
<meta name="keywords" content="themagictouch, magictouch, magic, touch, transfer paper, transfer papers, heat transfer, heat press, colour copier, shirts, fabrics, paper, mugs, caps, Canon, Kodak, Xerox, Ricoh, Sharp, Tektronix">
<meta name="description" content="TheMagicTouch is the world's leading image transfer paper system allowing a full colour image from a colour copier or printerto be transferred to virtually any substrate such as T-shirts, mugs, caps, wood, glass">
<title>TheMagicTouch - Legal</title>
<base target="contents">
</head>
<body background="pictures/icons/tmtbg.gif" text="#000000">
<div style="position: absolute; left: 12; top: 1; width: 100%; height: 650">
<font color="#FA1818">Legal Notice for TheMagicTouch website</font> <br>
© Copyright by TheMagicTouch GmbH, Germany, 1997-2003.
TheMagicTouch is a registered Trademark of TheMagicTouch GmbH, Germany, in all countries of the European Union and Australia, Canada, Japan, Norway, Singapore, Korea, Switzerland and the U.S.A. and further pending applications.
Other trademarks referenced are the property of their respective owners.
TheMagicTouch GmbH's image transfer paper is the subject of European Patent Nos. 0479882 and 0589984, U.S. Patent No. US 6,395,119 B1 and other international applications.
All Rights Reserved.<br><br>
You may store on your personal computer or print copies of extracts from these pages for your personal and non-commercial use only. You may not "mirror" or cache information provided via this website on your own server, copy, adapt, modify or reuse the text or graphics from this website without prior written permission from TheMagicTouch GmbH, Germany. <br><br>
<font color="#FA1818">Disclaimer</font><br>
Although every effort has been made to provide accurate information on this site, neither TheMagicTouch nor any of its employees, affiliated companies or suppliers make any warranty, expressed or implied, or assume any legal liability (to the extent permitted by law) or responsibility for the accuracy or completeness of any information contained on this site. To the extent permitted by law in no event shall TheMagicTouch be liable for any indirect or consequential damages or any damages whatsoever, whether in an action of contract, negligence or other tortuous action, arising out of or in connection with the performance of or use of the information available on this site. TheMagicTouch reserves the right to revise or withdraw products or services at any time without prior notice. Furthermore TheMagicTouch assumes no responsibility for material created or published by third parties that are referenced by a link from this site or which may be linked to this site.<br><br>
<font color="#FA1818">Prices</font><br>
TheMagicTouch reserves the right to revise prices at any time without prior notice.<br><br>
<font color="#FA1818">Trademarks</font> <br>
All Registered Names and Trademarks are recognised to be the property of their respective owners. <br><br>
TheMagicTouch GmbH<br>
Benzstrasse 17<br>
64807 Dieburg<br>
Germany<br>
<br>
Tel.: +49 6071 921 800<br>
Fax: +49 6071 921 821<br>
<br>
Managing Director: Juergen Hagedorn<br>
<br>
Company Register: Amtsgericht Hanau<br>
Registration Number: 41 HRB 4748<br>
<br>
VAT No: DE 151263839<br>
<br>
<br>
</div>
</body>
</html>
-----------------------
Thanks for all your effort so far!!in your body background tag the 'repeat xy' thing is invalid. Leave it out and it will repeat in both directions by default.
What do 'menu' and 'area' refer to?
If you're applying them to a class, it should be .menu
If you're referrign to an id then it should be #menu
edit: I've just realised there are elements of those names (I've never used them) so ignore this bit. W3C now recommends the use of lists, rather than the menu tag.
menu and area margins need units - e.g. 15px, not 15.
h1 font should be either 10px or 150%. not both...
hr you need to set height to 1px, not size.
Here is the css validator: <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator">http://jigsaw.w3.org/css-validator/validator</a><!-- m -->
It's a good idea to validate your code - it may or may not fix your problems, but it usually helps.
You also need to validate your html, which you've possibly posted while I've been writing this...
<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
Apologies in advance if this post seems too critical...Hi Marianne
You need to change the doctype on your html to match the one I used.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
html 3.2 has been replaced by 4.01
That should probably fix it.
Then fix the css errors.Changing 3.2 to 4.01 did the trick!
How silly that a small thing like this can cause that other things do not work.
Only drawback is that I have to replace 3.2 with 4.01 in all my files.
But I am glad it works!
Thanks for all your effort and time!
Kind regards,
MarianneHi Marianne
It's nice to be useful for a change...
Dave
In all files I have put a div to set the size of the file to 100%. No very clever to do it this way, but still.
Now I want to change the size of the site. I tried to do this via CSS in the body as follows:
body { font-family: Verdana; font-size: 11px; background-image: url (<!-- m --><a class="postlink" href="http://www.themagictouch.com/pictures/icons/tmtbg.gif">http://www.themagictouch.com/pictures/icons/tmtbg.gif</a><!-- m -->); repeat-y top left fixed; width: 750px; height: 100%; overflow: auto}
This does not work. Can I set the width for a page in the body or should I use something else. I do not want to change all files before it will apply.
Each file starts with the following div
<div style="position: absolute; left: 12; top: 1; width: 100%; height: 650">
Is it possible to overwrite this with CSS?
Thanks for your kind attention!
MarianneFirst off your css has errors:
body {
font-family: Verdana;
font-size: 11px;
background: url(<!-- m --><a class="postlink" href="http://www.themagictouch.com/pictures/icons/tmtbg.gif">http://www.themagictouch.com/pictures/icons/tmtbg.gif</a><!-- m -->) repeat-y top left fixed;
width: 750px;
height: 100%;
overflow: auto
}
However, elements that are abolutely positioned are removed from the document flow, so that probably won't do what you want it to do.You can do it using a strict doctype and absolute positioning on the body
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dave</title>
<style type="text/css"><!--
body {
font-family: Verdana;
font-size: 11px;
background: url(<!-- m --><a class="postlink" href="http://www.themagictouch.com/pictures/icons/tmtbg.gif">http://www.themagictouch.com/pictures/icons/tmtbg.gif</a><!-- m -->) top left fixed repeat-y;
width: 300px;
position: absolute;
}
--></style>
</head>
<body>
<div style="position: absolute; top: 0; left: 0; width: 100%;">
sidfb siudfb suidbhf uishd fuishd fiuhsdu fhsudoh faio fuohd lknzkxu hcoianeiofho aksd owrefh ohi wreoh owrhea oashd ohsd ao hosdh klzxncouih whc suiod uhse fshd iuhwoei nouihasdoi ois
</div>
</body>
</html>Thanks Dave!
When I try your suggestion, it works.
If I copy it into my CSS and upload it to the web, it only applies for the background, the text still is 100%.
I have no clue why it does work in a complete new file and not in an existing file.
Mariannecan you give us either the URL or the code you're using?Hello Dave,
This is the complete code I am using:
------------------
body {
font-family: Verdana;
font-size: 11px;
background: url(<!-- m --><a class="postlink" href="http://www.themagictouch.com/pictures/icons/tmtbg.gif">http://www.themagictouch.com/pictures/icons/tmtbg.gif</a><!-- m -->) repeat-xy top left fixed;
width: 750px;
position: absolute;
}
menu {
color: #000;
margin-bottom: 15;
font: 10px Verdana;
}
area {
color: #F00;
margin-top: 15;
margin-bottom: 15;
font: 11px Verdana;
}
font {
font-family: Verdana;
}
h4 {
font: 13px Verdana; font-weight: bold;
}
h3 {
font: 13px Verdana; font-weight: bold;
}
h2 {
color: #000;
font: 12px Verdana;
}
h1 {
color: #000;
font: regular 10px/150% Verdana;
}
li {
color: #000;
font: 11px Verdana;
}
link {
color: #000;
font: 11px Verdana;
}
p {
font: 11px Verdana;
}
small {
color: #000;
font: 9px Verdana;
}
table {
font: 11px Verdana;
}
td {
font: 11px Verdana;
}
tr {
font: 11px Verdana;
}
title {
color: #000;
font: 13px Verdana;
}
ul {
list-style-type: square;
font: 11px Verdana;
}
ol {
list-style-type: decimal;
font: 11px Verdana;
}
html {
font: 11px Verdana;
}
pre {
font: 11px Verdana;
}
hr {
size: 1px;
width: 100%;
color: #000;
}
h5 {
color: #F00;
font: 25px Futura Md BT;
}
a.one:link {
color: #000;
font: 11px Verdana;
}
a.one:visited {
color: #000;
}
a.one:active {
color: #F79E03;
}
a.one:hover {
color: #FF0;
}
a.two:link {
color: #00F;
font: 11px Verdana;
}
a.two:visited {
color: #00F;
}
a.two:active {
color: #69C802;
}
a.two:hover {
color: #F00;
}
a:link {
color: #00F;
font: 11px Verdana;
}
a:visited {
color: #00F;
}
a:active {
color: #69C802;
}
a:hover {
color: #F00;
}
input {
border: 1px solid #000;
}
----------------------
This does not change the size of the body text to 750px.
I am using an external style sheet.
MarianneCan we see the html code too?
It probably needs to be validated.An examle of the HTML
______________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"tmtstyle.css">
<meta name="keywords" content="themagictouch, magictouch, magic, touch, transfer paper, transfer papers, heat transfer, heat press, colour copier, shirts, fabrics, paper, mugs, caps, Canon, Kodak, Xerox, Ricoh, Sharp, Tektronix">
<meta name="description" content="TheMagicTouch is the world's leading image transfer paper system allowing a full colour image from a colour copier or printerto be transferred to virtually any substrate such as T-shirts, mugs, caps, wood, glass">
<title>TheMagicTouch - Legal</title>
<base target="contents">
</head>
<body background="pictures/icons/tmtbg.gif" text="#000000">
<div style="position: absolute; left: 12; top: 1; width: 100%; height: 650">
<font color="#FA1818">Legal Notice for TheMagicTouch website</font> <br>
© Copyright by TheMagicTouch GmbH, Germany, 1997-2003.
TheMagicTouch is a registered Trademark of TheMagicTouch GmbH, Germany, in all countries of the European Union and Australia, Canada, Japan, Norway, Singapore, Korea, Switzerland and the U.S.A. and further pending applications.
Other trademarks referenced are the property of their respective owners.
TheMagicTouch GmbH's image transfer paper is the subject of European Patent Nos. 0479882 and 0589984, U.S. Patent No. US 6,395,119 B1 and other international applications.
All Rights Reserved.<br><br>
You may store on your personal computer or print copies of extracts from these pages for your personal and non-commercial use only. You may not "mirror" or cache information provided via this website on your own server, copy, adapt, modify or reuse the text or graphics from this website without prior written permission from TheMagicTouch GmbH, Germany. <br><br>
<font color="#FA1818">Disclaimer</font><br>
Although every effort has been made to provide accurate information on this site, neither TheMagicTouch nor any of its employees, affiliated companies or suppliers make any warranty, expressed or implied, or assume any legal liability (to the extent permitted by law) or responsibility for the accuracy or completeness of any information contained on this site. To the extent permitted by law in no event shall TheMagicTouch be liable for any indirect or consequential damages or any damages whatsoever, whether in an action of contract, negligence or other tortuous action, arising out of or in connection with the performance of or use of the information available on this site. TheMagicTouch reserves the right to revise or withdraw products or services at any time without prior notice. Furthermore TheMagicTouch assumes no responsibility for material created or published by third parties that are referenced by a link from this site or which may be linked to this site.<br><br>
<font color="#FA1818">Prices</font><br>
TheMagicTouch reserves the right to revise prices at any time without prior notice.<br><br>
<font color="#FA1818">Trademarks</font> <br>
All Registered Names and Trademarks are recognised to be the property of their respective owners. <br><br>
TheMagicTouch GmbH<br>
Benzstrasse 17<br>
64807 Dieburg<br>
Germany<br>
<br>
Tel.: +49 6071 921 800<br>
Fax: +49 6071 921 821<br>
<br>
Managing Director: Juergen Hagedorn<br>
<br>
Company Register: Amtsgericht Hanau<br>
Registration Number: 41 HRB 4748<br>
<br>
VAT No: DE 151263839<br>
<br>
<br>
</div>
</body>
</html>
-----------------------
Thanks for all your effort so far!!in your body background tag the 'repeat xy' thing is invalid. Leave it out and it will repeat in both directions by default.
What do 'menu' and 'area' refer to?
If you're applying them to a class, it should be .menu
If you're referrign to an id then it should be #menu
edit: I've just realised there are elements of those names (I've never used them) so ignore this bit. W3C now recommends the use of lists, rather than the menu tag.
menu and area margins need units - e.g. 15px, not 15.
h1 font should be either 10px or 150%. not both...
hr you need to set height to 1px, not size.
Here is the css validator: <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator">http://jigsaw.w3.org/css-validator/validator</a><!-- m -->
It's a good idea to validate your code - it may or may not fix your problems, but it usually helps.
You also need to validate your html, which you've possibly posted while I've been writing this...
<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
Apologies in advance if this post seems too critical...Hi Marianne
You need to change the doctype on your html to match the one I used.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
html 3.2 has been replaced by 4.01
That should probably fix it.
Then fix the css errors.Changing 3.2 to 4.01 did the trick!
How silly that a small thing like this can cause that other things do not work.
Only drawback is that I have to replace 3.2 with 4.01 in all my files.
But I am glad it works!
Thanks for all your effort and time!
Kind regards,
MarianneHi Marianne
It's nice to be useful for a change...
Dave