|
CSS - Page Shift With Centred Ap Div
I am editing a CSS layout I have found. Basically, I want a fixed header. The original layout had the fixed header (AP Div) take up 100% width with right positioning of 16px to allow for the scrollbar, but this was making it awkward for me to centre another div within the Header/AP Div, so I have edited my layout like this:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
#printhead {
display:none;
}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: Arial, Helvetica, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background-color: #EAEBEB;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
word-wrap:break-word;
}
#info {
width: 750px;
margin-right: auto;
margin-left: auto;
background-color: #666666;
padding-right: 25px;
padding-left: 25px;
}
#head {
position:absolute;
width:800px;
height:137px;
z-index:5;
border-top-style: none;
border: none;
background-color: #FFFFFF;
left: -400px;
margin-left: 50%;
}
.top-spacer {
display:block;
height:137px;
}
.btm-spacer {
display:block;
height:30px;
background-color: #FFFFFF;
width: 800px;
margin-right: auto;
margin-left: auto;
}
</style>
<style type="text/css" media="print">
html {
padding:0;
margin:0;
border:0;
background:#fff;
font-size:10pt;
font-family: arial, sans-serif;
min-height: 100%;
margin-bottom: 1px;
}
body {
padding:0;
margin:0;
border:0;
}
#content {
display:block;
position:relative;
z-index:3;
word-wrap:break-word;
}
#head {
display:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#printhead {
height:100px;
background:#fff;
font-size:24pt;
color:#000;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<div id="head"></div>
<div id="content">
<div class="top-spacer"></div>
<div id="info">
<p>Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here </p>
<p> </p>
</div>
<div class="btm-spacer"></div>
</div>
</body>
</html>
Basically, I have cheated to centre the AP Div, but now in Firefox, when there is overflow, the Div underneath the header moves over to accommodate the scrollbar, but the header doesn't. Can anyone suggest a workaround for this? Thanks. Similar TutorialsThe index page of my site shifts to the far left in IE. The background does not move (stays in center) but the rest of the page shifts far left. It only happens on the index page all others are fine. I would link to it but I am new and cannot post links...any suggestions? Thanks. Hi all, I have written a page with jsp and ajax to dynamically load page contents. I also added a hidden "processing.." message image with the following code: Code: <img src="<%=IMAGE_BASE_URL%>/processing-img.gif" id="processing" style="display:none;z-index:2;position:relative;top:250;right:-250"> this img tag was placed right after the <body> tag. When the user clicks on a link, I turned this css property to display:block so that it shows in the middle of the page. But strangely, when it is showing the processing message image, the entire page content after the <img> tag was shifted down a bit and showing an empty row! Does anybody know what's wrong with it? I've tried to change the display to inline using javascript but it still won't help... Any help would be appreciated..thanks.. I have a simple query, and don't know if this can be done. I have a <div> layer, which is centred on the page, and I am trying to get another <div> within that to be centred as well. I have a sample page on http://jimpix.co.uk/002.htm which shows that this doesn't work. This is my code: ######################################### <html> <head> <style> body { text-align: center; } div#container { margin-left: auto; margin-right: auto; width: 50%; text-align: left; border:10px solid pink; } div#container2 { margin-left: auto; margin-right: auto; width: 50%; text-align: left; border:10px solid red; } </style> </head> <body> <div id="container"> <div id="container2">test</div> </div> </body> </html> ###################################### I thought that the 2nd div, would sit centred in the middle of the first one. Can anyone suggest what I am doing wrong, or if there is a way this can be done? Thanks Jim hey out there, 1st post so here goes: i've been designing our new website in css. it looks great in the following browsers: pc: ie6, ns7, firefox 1, mozilla 1 and above and opera 7.5 and above. mac: ns7, firefox 1, mozilla 1 and even safari. however, the centre layout totally breaks in ie 5.2 on a mac and i cant find out why. it's centring the content horizontally but not virtically. i *think* it's got something to do with static and relative positioning and the mac ie seems to be ignoring it. is there a hack i'm missing? this is the site: http://62.49.5.36:8181/28design/index.asp (ignore the black outlines on the divs, this is pury so you can see each div) and this is the main css that controls the centred layout and the navigation: /* controls for centering the page */ #centreTable { width: 100%; height: 100%; } #centreTable td { vertical-align: middle; text-align: center; } #containerDiv { position: relative; text-align: left; margin-left: auto; margin-right: auto; width: 750px; height: 400px; z-index:1 } #containerBckDiv { position: absolute; background-image: url(../images/28bck.gif); background-repeat: no-repeat; background-position: right top; position: relative; text-align: left; margin-left: auto; margin-right: auto; width: 750px; height: 400px; } /* end */ /* controls for the main website areas */ #navDiv { position: absolute; top: 0px; left: 0px; width: 340px; height: 40px; } /* the discTxtDiv needs styling but gets it's ID name from the rs*/ .discTxtDiv { position: absolute; top: 40px; left: 0px; width: 340px; height: 80px; visibility: hidden; } #subNavTxtDiv { position: absolute; top: 120px; left: 0px; width: 170px; height: 40px; } #subNavDiv { position: absolute; top: 120px; left: 170px; width: 170px; height: 40px; } #jobTitleDiv { position: absolute; top: 160px; left: 0px; width: 170px; } #jobInfoDiv { position: absolute; top: 160px; left: 170px; width: 170px; } #contactDiv { position: absolute; top: 265px; left: 0px; width: 117px; height: 85px; } #imageDiv { position: absolute; top: 0px; left: 350px; width: 400px; height: 400px; } /* end */ as always, any suggestions are grand, cheers, jake Hi, I have been developing my own website for some time now, and have asked a lot of questions, and checked other CSS resources to do a horizontal list. I have managed to create a horizontal list and it looks very good in my website. However I wish to improve this. At the moment I have to give a width for each element in my list. This means that if I have 5 elements in my list then I set the following CSS property in the ul li as follows: Code: div#header ul li {
width: 20%;
padding: 0px;
}
If the elements become four then I would set the width equals to 25% and so on. I would like to change this so that the list will still appear the same without me having to set the width. This would mean I do not need to change the CSS file each time I add a new element in my list. My list is inside a div tag. I would like to have the elements inside that list extend through the whole space of the div. I have checked other websites to see the examples they give, however they all seem to only provide an example with a width. Is this possible? Or I have to always set the width of the li element? I am sorry if I am not clear enough. Thanks for any suggestions. Regards, Sim085 I have a site which uses a centred frame DIV for its content, as achieved by the normal technique of: margin-left: auto; margin-right: auto; with the text-align: centre/text-align: left workaround for IE. The problem is that some pages are longer than the viewport, resulting in an overall vertical scrollbar. On those pages, In Firefox, Mozilla, and Opera, the content is centred in the space which remains after the vertical scrollbar is in place. This means that, when moving from a short page to a long page, or vice-versa, the whole page content moves from side to side. This does not happen in IE. To see what I am talking about, go to the following page: http://www.clearsight.info/demo/index.php?pageId=5 Click on the top link in the main text frame ("The Lindisfarne window"), and then go back and forth between the two pages. No problem in IE, but in FF/Moz/Opera, the page dances before your eyes. Is there any way around this? Thanks Tom I've noticed when I am replacing my filler text with text that is not as long, Firefox is shifting my layout over to the right. For instance look at a look of filler text: http://www.jaycutler.com/Eumyotheria/the_beast/favorites.html Now for the replacing text: http://www.jaycutler.com/Eumyotheria/the_beast/contest_history.html You will notice if you use the sidebar (or the top nav) the shift occurs when you visit a page with a lot of content. In IE it is fine, but Firefox doesn't like. Not sure why as I use replaced text. Any ideas? The stylesheet is located here if needed: http://www.jaycutler.com/Eumyotheria/css/stylesheet.css Thanks for your time and any help that you can pass on. Brian Hello, i have a DIV in which i have put a javascript for my top advertisement banner. This banner is one of those that when the user moves their mouse over it, it expands.. is there anyway i can make it so when the banner inside the div expands, the DIV height expands accordingly to the height of the banner? and when it collpases, the div will shift back to original height? thanks The Divs holding the "In Stock" banners (absolutely positioned) on this page seem to shift to the right (the first box is missing a banner, and there is an extra banner off the page. Any idea why? Please view at woodflooringvalue.com and click on any of the product link buttons under the "in stock" heading. Thanks. Some of my pages are long enough to cause the primary vertical scroll bar to become active but most of the pages are short enough so that it stays hidden. Because of this the entire content automatically shifts to the left to accommodate the width of the scroll bar. I don't like that. I would like it to stay in the same spot no matter what. (centered) my wrapper has margin: auto, 0px; so that the page stays centered when the window size changes. Is there a way to just bump the page to the right only when the scroll bar is active? (via my external css) Thanks a bunch. (if there is a thread about this already please feel free to just post the link to it) Also, I am going to add this head-banging dude because its just so flippin stupid. I am having a problem unique to IE 8. The right most nav button jumps down a bunch of pixels. This does not seem to be happening in any other browsers, except IE 8. Some code involving said elements: Code: #nav {
right: 10px;
top: 45px;
position: absolute;
background-color: black;
height: 50px;
width: 640px;
}
ul {
text-overflow: clip;
display: inline;
border-bottom: 25px solid black;
}
li {
list-style-type: none;
float: left;
margin-top:25px;
}
#aboutButton {
display: block;
height: 20px;
width: 93px;
background-image: url(images/nav/about_button2.gif);
margin-left: 40px;
clear: both;
}
#aboutButton:hover {
display: block;
background-position: 0px 20px;
height: 20px;
width: 93px;
background-image: url(images/nav/about_button2.gif);
clear: both;
}
message me for a link to the site if you would like to see it in action. any help is appreciated. thanks! Hey everyone, I am doing some stuff to my site, and I noticed that when someone clicks a link, the text shifts sligtly to the left. I thought it would be the active border, but I am not sure. It is a small bug, but it is kind of annoying me. Here is my link code. Code: #main a:link {
color: #41619a;
padding: 0;
}
#main a:visited {
color: #41619b;
}
#main a:hover {
text-decoration: underline;
}
#main a:active {
border: 0;
}
Here is one of the pages where it happens. Any suggestions on how to fix this? I have a few lines of text inside a nested div. Everything is fine if I leave it at that but as soon as I add some more, the whole page (wrapper) get shifted left by 9 pixels. It causes a 'jump' hen navigating between this page and the rest of the site. All of these pages are quite simple and were created from the same index page. HTML Code:
<div id="wrap">
<div id="content_awards">
<div id="subcontent_awards">
<div class="award_col">
<h3>Subtitle 1</h3>
Winner<br /><br />
<h3>Subtitle 2</h3>
Winner<br /><br />
<h3>Subtitle 3</h3>
Commended<br /><br />
<!--
<h3>Subtitle 4</h3>
Commended<br /><br />
-->
</div>
<br style="clear:both;" />
</div>
<br style="clear:both;" />
</div>
<br style="clear:both;" />
</div>
CSS Code:
body
{
padding:2px 0 0 0;
margin:0;
text-align:center;
font-size:14px;
background-color:#FFFFFF;
}
#wrap
{
margin:0 auto;
width:760px;
padding:0;
text-align:center;
}
#content_awards
{
margin:0 auto;
padding:20px 0 0 0;
width:754px;
color:#FFFFFF;
text-align:left;
background-color:#31578E;
clear:both;
}
#subcontent_awards
{
margin:0 auto;
padding:0 10px 10px 10px;
width:734px;
background-image:url('images/bg_awards_shadows.jpg');
background-repeat:no-repeat;
background-color:#31578E;
clear:both;
}
div.award_col
{
float:left;
margin:0 0 0 1px;
padding:0 10px 0 20px;
width:152px;
line-height:130%;
font-size:12px;
}
Thanks, Hello CSS gurus, When I add an italic font style to my web page, it causes a vertical shift in IE6. Everything is fine in Firefox. Can anyone tell me what is happening with this? Vertical Shifted with Italics: http://www.innovations-online.com/t...ch_news_it.html No Italics is Fine: http://www.innovations-online.com/t.../tech_news.html The same problem occurs with oblique. Thanks in advance! Darin That title is probably a little confusing but it is what's happening. I have an inline list (<li>) that will shift to the right when I hover over links that have been visited. The links that have never been visited do not cause this problem. It's very strange and I'm not sure what's up. The page... http://www.vaska.com/a/ The css... http://www.vaska.com/a/css/c.css To get the menu to appear, hover over the "menu/options" and it will appear. I know for a fact that these issues are not becaused by the javascript in this file...somehow it's a CSS issue. I'm having the problem in Safari and Firefox...I'm not sure about IE/PC and such, but I'm betting the problem is there as well. Thanks for any help...v Hi all, I'm a CSS newbie and I need your help, pleeease! I tried to make a rollover graphic menu today. And of course I got completely stuck with this code: Code:
/* Header */
#header {
position: absolute;
background: url(images/header.jpg) no-repeat;
width: 830px;
}
#menu, #menu li a:hover, #menu li.current a {
background: url(images/link_menu.jpg) no-repeat;
}
#menu {
margin: 115px 0px 0px 29px ;
width: 600px ;
height: 75px ;
list-style-type: none;
}
#menu li {
float: left;
margin: 0px 0px 0px 0px;
width: 120px;
height: 75px;
}
#menu li#menu-contact {
margin: 0;
}
#menu li a {
display: block;
padding: 75px 0px 0px 0px;
height: 75px;
overflow: hidden;
}
html>body #menu li a {
height: 0;
}
#menu li#menu-home a:hover, #menu li#menu-home.current a {
background-position: 0px -75px 120px 29px;
}
#menu li#menu-about a:hover, #menu li#menu-about.current a {
background-position: -120px -75px;
}
#menu li#menu-gallery a:hover, #menu li#menu-gallery.current a {
background-position: -240px -75px;
}
#menu li#menu-foto-shop a:hover, #menu li#menu-foto-shop.current a {
background-position: -360px -75px;
}
#menu li#menu-contact a:hover, #menu li#menu-contact.current a {
background-position: -480px -75px;
}
The rollover works, but somehow it shifts to the right Like this: URL What am I doing wrong? Why does it shift? Thanks in advance... http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks Hi All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery |
|||||||