I'm working with Embarcadero's RADPHP XE2 and a page I want to build has some text at the top (multiple lines) as a label, and below that a PageControl component - despite the page being set to be more than tall enough, when debugging and viewing in Internet Explorer there are no scrollbars and it chops the bottom of the page off.
Has anyone found a work around on this?
I could not get scroll bars in my browser although the page is larger than the window.
Now fixed by adding this
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
to my css file.
To load my css file into the Page I put my tags into a text file including
<link rel="stylesheet" href="/css/mainstyle.css" type="text/css">
then load the text file into the page my putting
$head = file_get_contents('defaulthead.txt');
echo $head;
into the OnShowHead event of the page.
The solution by Les Kaye did not work for me.
For some reason, the script /rpcl-bin/qooxdoo/framework/script/qx.js does overwrite my stylesheet by inserting following CSS at runtime:
html,body {
width:100%;
height:100%;
overflow:hidden;
}
So what I simply did is using the !important rule. It is not clean, but the behavior of qx.js is not clean either. There should really be a Form property where the user can define if the page scrolls or not.
/* Overwrite the values which are enforced in /rpcl-bin/qooxdoo/framework/script/qx.js */
html {overflow-x:scroll !important ; }
html {overflow-y:scroll !important ; }
html {overflow:scroll !important ; }
Related
On my website on all pages except the home page, here's an example: http://www.pantsdownrecords.com/discography/, the issue I have been having is with the custom header. In the customer header div element where it says: “div class=”custom-header” and right after this is a style tag adding a margin-bottom of 82px. I have looked in all of the template pages and even the few plugins I am running right now, and cannot find where this style tag is being added. And since it is a style tag I can’t override it with CSS since style tags take precedence. Since this margin bottom is there, on some pages I can’t even see the footer because the page can’t scroll to the bottom.
Could somebody help point me in the right direction of where this issue is coming from?
All help would be greatly appreciated,
Thanks
It's in this file - http://www.pantsdownrecords.com/wp-content/themes/twentyseventeen/assets/js/global.js?ver=1.0
Under the adjustScrollClass() function. And you can overwrite an inline style with !important in your CSS. You should use that feature sparingly, but it works if you need to overwrite an inline style.
You could open more files in notepad++ and use search with Find in all open documents if you want to find a specific string.
You could change this with CSS by using !important for the specific element or check with javascript or jQuery for pages where you have the problem and set the specific styles.
CSS:
.custom-header { margin-bottom: 0px !important")
JavaScript:
var winURL = window.location.href;
if(winURL == "http://www.pantsdownrecords.com/artists/") {
document.getElemetsByClassName("custom-header")[0].style.margin = "0px 0px 0px 0px";
}
jQuery:
var winURL = window.location.href;
if(winURL.indexOf("artist")) {
$(".custom-header").css("margin","0px");
}
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.
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.
seem to have a inconsistent problem with one of my pages.
In some IE browsers it displays nearly a whole screen of blank white space between the header and the main content, strangely enough on my pc using both firefox and ie the page displays correctly however on some other pc's it shows the blank space.
http://kiwiradio.blakjak.net/wxradar.php
Would really appreciate some help with this please
Ok, I downloaded and installed Microsoft Expression 3 Superpreview so that I could see the page opened in both IE6 and IE8 side by side which made finding the culprit script easy.
It turned out to be the CSS script that comes with the slideshow script that was causing the display problems, with it removed everything appears to be displaying as I want it to now with ealier versions of IE.
Thanks for your help.
<style type="text/css">
/* All Styles Optional */
* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input, div#show4 table input {
outline-style:none;
}
</style>
<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->
I viewed the URL: http://kiwiradio.blakjak.net/wxradar.php, in IE 8.0, It is perfect, there is no space. In case if you get issues. There are few things may go wrong here.
You place two DIV's side by side and the width of the parent div is fixed size which is less than the total size of the two divs placed side by side. In this case the second div moves down and if the height of the first div is set to fill the whole page, you can see it blank.
The header DIV/Table's height is mistakenly set to fill the height of the page and the content is not filling the whole DIV/Table etc.
Find out which browser makes the problem and see the url:
http://www.quirksmode.org/css/contents.html
for any compatibility issues.
I dont think setting margin and padding will help as you say the space is for the whole page.
It's clearly your sidebar. I removed it and the problem went away. Try narrowing down further until you find the culprit.
Use IE tester to dramatically help with testing:
http://www.my-debugbar.com/wiki/IETester/HomePage
Good Luck
In case you have not found what the problem is - the problem is with your "Rain Radar and Maps" heading - you use tag which is not widely used because the tag istelf is badly designed. If you don't want to change this, the fastest and easiest solution is to add height for the "Rain Radar and Maps" center tag.
Do you use UTF-8 with BOM? I used it some times ago and I got a similar problem.
If so, change the coding to UTF-8 without BOM.
some people set by default:
* {padding:0px;margin:0px;}
at least it helps to set everything yourself.
CSS Solution:
* { padding: 0; margin: 0; }