I'm working on a school project, and I have to create a simple presentation webpage. The problem is that the webpage doesn't work as expected in Firefox, while in Chrome and othet WebKit browser it's all fine.
My problem is here: http://c303.usv.ro/~HPC/ (please don't change the language in English, as you will not be able to see my problem). If you go to "Echipamente" in Chrome, you'll see that the "#content" div has some nice scrollbarls and the footer stays at the bottom. If you'll do that in Firefox, the scrollbars no longer appears and the footer seems to go somewhere under the visible part of the webpage. As a workaround I use:
function mozillaFix(){
return; // we shouldn't use this
$('#content').height($('#maindiv').height() - $('#topheader').height() - $('#copynote').height() - 40)
$('#leftmenu').height($('#maindiv').height() - $('#topheader').height() - $('#copynote').height() - 40)
}
but I guess that this is not the mos elegant solution. Where could be the issue?
Set the max-height with Javascript to the desired height (I tested it with FireBug to with max-height: 400px;). Then, Firefox will make a nice scrollbar, and show the footer as you wanted.
As found on the internet, the solution is defining the height of the container of the div. If you have the following CSS it should work:
html, body {
height: 100%;
}
Related
I have a few charts on a page, each in its own bordered box. All charts on first page load exceed the width of their parent.
If I resize the page width slightly, it all goes back to how it should be. The strange thing is this is showing up only on latest Chrome version. Safari an FF are working well.
Another strange issue is that if I empty cache and hard reload in Chrome, it loads OK. Refresh the page, and the charts bleed to the right of their container.
I have tried this CSS from research:
.highcharts-container {
width:100% !important;
height:100% !important;
}
But this screws up the tooltip on Chrome and other browsers too.
Any sugegstions welcome.
in addition to your rest of css apply max-width: 100%; to your div like below
.highcharts-container {
max-width:100%;
}
I am currently experimenting locally with Vantage theme(Wordpress)
Link
I want to set minimum width of the page in order to stop scaling down content when browser window is being narrowed.
It works perfectly on their site (at around 1020px width website stops scaling), and I wonder what is the trick to make it happen.
I have tried going with
min-width:1080px;
And it works nicely, however it crushes admin-bar completely, and plugins like Chrome Ruler. This indicates that this method is plain wrong, however on user-end everything looks nice.
Any other way to do it?
Edit:
Ok, I found the solution.
Adding min-width to body itself does not help, but works when added to:
body.layout-full {
min-width: 1080px;
}
Ok, I found the solution.
Adding min-width to body itself does not help, but works when added to:
body.layout-full {
min-width: 1080px;
}
First off, this is not the zoom issue that I've seen in other questions. Also, I'm testing this using an iPhone 4, running iOS 6. In working on a mobile project, I discovered an issue with the viewport tag and mobile safari. I distilled everything into code as basic as I could get it. I have there parameters set:
width=device-width
height=device-height
initial-scale=1.0
maximum-scale=1.0
user-scalable=no
It all works fine, until you rotate the screen. Nothing gets resized, and a black bar appears on the right side to fill in the gap (see screenshots). If I remove height=device-height completely, the problem goes away. However, I do need to use this parameter. Otherwise, I will have to ask a different question.
After rotating back to portrait mode, that black bar remains, and I can scroll left and right. This is a very strange issue. Removing width=device-width does something else unexpected. I have the code here if you would like to try it: http://toastd.net/viewport.html
Here are some screenshots:
Here it is working fine in portrait mode:
When rotated to landscape mode
Then rotated back into portrait mode
The meta tag will help define rules for the viewport but you still need to apply visual styling to address the change in orientation. Give these CSS values a try:
body { width: 100%; height: 100%; }
If you'd like a good resource to help continue your project, PhoneGap has a starter app on GitHub that you can fork.
PhoneGap Start
I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.
The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.
Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.
If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.
This seems like it should be a simple question but i cannot seem to find a solution anywhere.
On the website i am making i have a navigation bar at the top of the page that is 43px in height and in an attempt to not have to edit it for each individual page that i make what i did is put an iframe below it at 100% width with the navigation buttons targeting the source of my iframe.
Now where i run into an issue is that i want the iframe to extend from the bottom of the navigation bar to the bottom of the page so that you cannot tell that it was iframed in but if i set the height to 100% it is set to the height of the entire page and adds a 2nd scrollbar to compensate for the extra 43px at the bottom, so how can i fit the iframe to just the remaining space below the nav bar ?
I have tried setting different % but that does not work for different res monitors. And i need this to work cross browser (in IE, Chrome, Safari, and Mozilla, preferably in Opera also but that's not a necessity).
Sorry its a little wordy, can anyone help?
Pretty simple. All you need do is subtract the height of your navigation from the current viewport height and set that as your iframe's height. Use this Javascript method:
function ResizeIFrame() {
var nNavigationHeight = 43; // Assuming the 43px you stated above
var nViewHeight = document.body.clientHeight;
var nIframeHeight = nViewHeight - nNavigationHeight;
document.getElementById("YourIFrameID").style.height = nIframeHeight + "px";
}
You'll need to set your body and html to 100% height for this to work.
body, html {
height: 100%;
}
I should mention that this is a somewhat dubious way of achieving what you want to do, but it's a solution true to the letter of your question. I'd recommend you look into using Jquery rather than vanilla Javascript as cross-browser headaches will be minimised (I've tested this code in my current installations of IE 7 & 8, FF, Chrome, and Safari without issue, but your mileage may vary). If you decide to go that route, it would be better to take advantage of their excellent and simple AJAX functionality using a div and dispense with the iframe entirely.
Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}