If you view the following website in IE9 (or any other modern browser) you will see the effect I am going for.
However viewed in IE8 or lower the header DIV that contains the mans photo collapses to what appears to be 0 height.
I have tried min-height and also the clearfix, but nada.
http://www.adrianwaddingham.com/
Have you tried just setting the height and making it !important, such as:
min-height: (yourheight)px!important;
Related
I'm using css flexbox to do a header/body/footer layout. However if spicing up the outer-div with overflow-x:hidden, Chrome begins to crop the bottom (the status element) when reducing height of the viewport, and introduces a vertical scrollbar.
Firefox works as expected by shrinking the body-element height, and continue to show the statusbar when reducing the browser height.
Chrome restores the correct layout if reloading page, or changing the viewport width.
Stackblitz sample:
https://stackblitz.com/edit/angular-xtapbp
The difference between Chrome and Firefox can be seen by showing the above stackblitz in the two browsers.
The implied value of min-height (or min-width for default flex-direction: row orientation) is auto for flex layouts. For some reason, Chrome decides, that the size of the content that you have during initial page render should be treated as current auto value, and during window shrinking it does not recalculate the whole layout. Probably it is a bug in Chrome css layout engine. A solution for this is to add min-height: 0 to the content+status div, as shown in this link.
I currently have a website where I'd like the main body portion of the page and footer (below the header image and navigation bar) to always take up the available view space, but to expand below this if there's more content. I've been setting min-height of my container of class mainbody to a calc() function. The HTML and CSS have been tested and behave correctly in Safari and Chromium, however it fails to behave as intended on Firefox. The problem is most apparent on the Alumni page, which has no content at the moment, and also occurs on the Media page on a large enough screen . Is there anything I'm doing wrong?
100% height means 100% of the height of the content. To be honest, I don't know why it works in chromium and not in firefox.
What you need is 100% of the viewport. There are cool vw and vh units for that. (See availability.).
If you change min-height to min-height: calc(100vh - 268px) !important;, it will work.
If you want old style solution, you can google 100% height css, e.g. enter link description here
P.S.: Also fix your CSS.
I have created the following responsive page here: http://asapuat1.bigredsky.com/mjb_v2.htm?cid=290&jbid=184
For the widths 640px to 1117px i have a 2 by 2 layout with 1 spacer div on the top and bottom rows to ensure correct alignment. Margins on input fields are set to %'s and the input fields themselves have a % width also, with a max-width of 280px.
All this works fine in Firefox, and Chrome, but in IE11 as the width is re-sized by dragging the browser window the vertical alignment changes, and the input fields are no longer vertically aligned correctly.
I suspect the spacer divs may be causing the issue, display on them when required is set to inline-block and when not required set to none.
Strangely when i encounter the issue switching off default css box-sizing: inherit via developer tools fixes, but re-size the window again and the issue still occurs
Any feedback would be appreciated.
Issue was resolved by using margin values in pixels on input fields instead of percentages and having css only for IE 11:
e.g.
#media only screen and (max-width:69.75em) and (min-width:55em) and (-ms-high-contrast:none)
input[type='text'], input#mjb-ico-search,
#topSpacer1, #bottomSpacer1, #topSpacer2, #bottomSpacer2, #middleSpacer1, #middleSpacer2, select {
margin: 20px 44px;
}
}
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.
I was testing a website: This Website
When I stumbled upon the following problem. everything looks correct in all browsers I tesded on my computer (IE, Chrome, Safari, Firefox etc...) but When I test this website on iPad, in safari browser I get strange margin at the right side, I can't show a screenshot, but in a nutshell image all website page like you see it on computer, but shifted to the left side (so there is blank space on the right side). Can anyone suggest what is causing this?
EDIT:
I noticed that this margin is somehow affected by margin of arrows that you can see on the sides (used to list through slides). Styles of the buttons have following id's
#prevslide and #nextslide
EDIT2:
As code is very long, I will post links to stylesheets used in website here.
Slideshow stylesheets, #prevslide, #nextslide style rules can be found in second stylesheet
Style1
Style2
And main stylesheet I use to style how website looks, however I dont think that the problem lies within it.
Main Style
It looks like your problem is because of the combination of % and pixels in your css.
For example, your .header wrapper is set to 100%, but the .in-header inside it is set to 1020px. This is fine as long as your browser window is wider than 1020px, but when it shrinks, .header is sizing itself in relation to the browser window, and .in-header isn't.
Set the min-width property on your body element so it won't ever reduce below the size of your main page elements:
body {
min-width: 1020px;
}
You'll need to set a meta tag in the header for the ipad (and mobile):
<meta name="viewport" content="width=device-width" />
This instructs the browser to set the page body to match the tablet size. I'm not 100% sure this is the exact setting you want, but I don't have my iPad handy to test; whatever the solution, it lies in this tag.