G
I am trying to get text vertically centered on a web page using css.
My html is below. One question I have is why the vertical positioning
is different in Print Preview in ie6 than in the browser window. The
text is much higher on the page when printed out than it appears in
the browser window.
I am using <br> to vertically position the lines of text relative to
each other. I put the font size and style in the body rather than
in the css because I want different styles and sizes of text on
different lines. If there is a better way to do that, perhaps in the
css, please let me know how it is best done.
Also, my background image is cut off at the bottom in the browser
window, but looks fine when printed out. There are also no scroll
bars. I realize you don't see my image in the html below, but in
general, why doesn't the browser take into consideration the vertical
size of the background image and either adjust the size of the window
or add scroll bars accordingly?
Thanks in advance for the help,
Robert
<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin-top: 27%;
font-size: 100%;
background-image: url(../pics/frame_back.jpg);
background-repeat: no-repeat;
background-position: top center;
padding: 0px;
}
-->
</style>
</HEAD>
<body>
<p style="text-align: center; font-family: 'times'; font-style:
'italic'; font-size: 120%">
first line of text<br><br><br><br></p>
<p style="text-align: center; font-family: 'times'; font-style:
'italic'; font-size: 85%">
second line of text<br><br><br><br></p>
<p style="text-align: center; font-family: 'times'; font-size:
120%">
third line of text</p>
</body>
</HTML>
My html is below. One question I have is why the vertical positioning
is different in Print Preview in ie6 than in the browser window. The
text is much higher on the page when printed out than it appears in
the browser window.
I am using <br> to vertically position the lines of text relative to
each other. I put the font size and style in the body rather than
in the css because I want different styles and sizes of text on
different lines. If there is a better way to do that, perhaps in the
css, please let me know how it is best done.
Also, my background image is cut off at the bottom in the browser
window, but looks fine when printed out. There are also no scroll
bars. I realize you don't see my image in the html below, but in
general, why doesn't the browser take into consideration the vertical
size of the background image and either adjust the size of the window
or add scroll bars accordingly?
Thanks in advance for the help,
Robert
<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin-top: 27%;
font-size: 100%;
background-image: url(../pics/frame_back.jpg);
background-repeat: no-repeat;
background-position: top center;
padding: 0px;
}
-->
</style>
</HEAD>
<body>
<p style="text-align: center; font-family: 'times'; font-style:
'italic'; font-size: 120%">
first line of text<br><br><br><br></p>
<p style="text-align: center; font-family: 'times'; font-style:
'italic'; font-size: 85%">
second line of text<br><br><br><br></p>
<p style="text-align: center; font-family: 'times'; font-size:
120%">
third line of text</p>
</body>
</HTML>