Please have look at this page & its source code.
http://www.chemfluence.org.in/monetarist/index_copy.php
Web page is not showing from top of the web page. There is a gap of around 10px from top of the browser.
I have higlighted the gap in above image.
Could you please anyone tell me how to display the page from top 0px ?
Chrome has a default margin of 8px built into the browser, in your CSS use:
body{ margin: 0 }
It's always handy to use some sort of CSS reset, to prevent inconsistencies like the above between browsers.
Something like this: http://meyerweb.com/eric/tools/css/reset/
This is because you haven't explicitly set a margin for the body of your document and some browsers then use a default one.
To fix that, add something like this to your CSS stylesheet:
body {
margin-top: 0px;
}
The default browser style sheets add a margin to the body Tag, so you have to set the margin of the body to 0:
html,body {margin:0;}
By the way, you should not use a table as a layout grid.
Related
I have a PHP page that I need to print. I managed to remove unwanted elements from printing with a print stylesheet (print.css) below. However it does not remove browser generated header, page numbers, URL and date. I am using bootstrap framework. bootstrap.min.css does not have any '#media print' sort of thing. Need some better CSS ideas to achieve this. Thank you.
/* Remove unwanted elements */
/* Assign class="noprint" in the HTML. Header and navigation (<div id="header"> and <div id="nav">) */
#header, #nav, .noprint
{
display: none;
}
/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}
/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}
/* Remove links */
a:link, a:visited, .navbar-link
{
display: none;
}
In a browser like chrome, when you try to print the page (Ctrl+P) it will open a dialog box.
In this box you have to select "More definitions" or something similar and then, uncheck the option of headers.
Other browsers, must have a similar way.
As far as I am aware you can not change this via css however when you bring up your browsers print dialog it should present you with an option to exclude headers and footers (i.e. page number and url).
Is not possible to remove the browser's default strings. You can achieve in Internet Explorer exploiting the "features" (also knows as bugs) that they provide you, but in the rest of browsers you can't.
My web page is having a top margin.
I cannot get rid of it. I tried
html {
margin:0px;
}
body {
margin:0px;
}
Try to Call Suitable reset css
Reset CSS
A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. In case you didn't know, every browser has its own default 'user agent' stylesheet, that it uses to make unstyled websites appear more legible.
hi lot of css elements have default margin and padding , always use reset css
add following code in your css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
or refer below link
http://www.javascriptkit.com/howto/nomargin.shtml
I'm trying to use window.loaction.replace() and discovered unwanted behavior.
The redirect works fine but it messes up my html structure.
It redirects to the wanted site but the top panel becomes a ghost. As far as I can tell the body structure behaves like it has a "negative margin the size of the panelheight". If I double the size of the panel with firebug it comes down.
The whole page looks like there is no panel at all after redirecting.
redirector: function(e){
window.location.replace(e);
}
The top panel is a nav element containing to ul's from which the right one is floated right. It is not fixed:
.panel{
display: block;
height: 42px;
position: relative;
z-index: 9998;
}
Even after manually reloading the page the bug doesn't disappear.
EDIT:
Same problem occurs if i redirect with PHP header: location...
The complete html,body moves up.
If I had to describe this bug in css it would look like:
html{
height:100%
position: absolute;
top:-40px;
bottom:40px;
}
Maybe it's useful for someone else:
The problem occurs if the calculated height of the content inside the body,html tags is higher than the body,html itself.
If the html,body have 100% height and inside the body are for example three elements:
Top Navigation Panel
Content Wrapper
Footer
And the calculated CSS height for these three element is higher than the body height it leads to this problem.
I don't know why it does only show up after a redirect but not if I navigate through links.
Is it possible to set the default zoom level on a site? For instance, could I code my site in such as a way that it is zoomed to 125% when a user opens it?
My website body has this code
<body ID="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
How to put this zoom code inside?
Add zoom: 125%; to body style
body {
color: #536482;
background-color: white;
zoom: 125%;
}
This does not directly answer your question, but is an alternative that I recommend considering.
If you use relative sizing for your page (such as em), then you can set the base size of the site in one place, and the whole page will scale up and down accordingly.
For instance, if I want 125% of default size:
body { font-size: 1.25em }
Then, suppose I want a reasonable amount of margin around a header <div>:
#header { margin: 1em }
If I then go back and change that base size on the body to something else, the margin on my header will scale with it. If you do your entire page in relative units, this becomes very easy to do.
You might want to check the zoom CSS attribute. Bear in mind however that it is part of CSS3 and that, therefore, you might find it to behave oddly on old IEs. This is also completely separate from the interface zoom.
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp));
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,htmlContent,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
I'm having Sticky footer issues with this site:
http://dev.epicwebdesign.ca/allshipsrise/events/
For some reason or another, The #page div is limiting itself to the header.
I can't figure this out. All tags are closed, etc. The W3C Conformance checker only complains about "the acronym element is obsolete. Use the abbr element instead.". That is wordpress's doing.
It's similar to Footer isn't at the bottom of the page However I have set clear:both on the footer.
The footer is fine when the page is too tall. I need it on the bottom even when it's not.
There were a couple underlying issues, mostly from trying to compensate for the real issue. (Not setting body height:100%) They're all sorted out now.
In your body set the height to 100% and your footer will be displayed until the end of your page :)
Or another work around would be changing the margin-top: to 100%
You have a few problems. With element.style you are using absolute positioning and raising it up 85px. Change that to position="relative" and remove the bottom attribute.
This:
element.style {
bottom: 85px;
position: absolute;
}
Becomes:
element.style {
bottom: 0px;
position: relative;
}
Removing position:relative solves the problem. Just remove this element using firebug and you will get the result.