I am having an issue with firefox and the height of the div that contains all the content. I can't figure out why the min-height:100% won't apply.
PS: If I use width:100% instead, it will work but will cause some troubles on pages where the height is more than the height of screen.
Website : [URL-Removed (Problem Solved)]
Screenshot :
Opera/Edge/Chrome :
Firefox:
Thanks in advance
I set wrapper 100% height and it looks ok.
In #page-wrapper you should use height: 100%; instead min-height: 100%;
You should use this code :
height:auto;
Related
I have a custom dropdown with some text options, and I need to set a fixed height. Seems simple enough, I added max-height and overflow-y: scroll. It works great! but on Chrome on device mode, with big resolutions it blurs the text.
I made a pen that shows this. https://codepen.io/a40637francisco/pen/OvbNyB
It seems these 2 properties don't go well with chrome.
max-height: 100px;
overflow-y: scroll;
I've tried several fixes using translate, perspective, smoothing, but no luck. Any ideas?
I guess it has to do with the mobile screen resizing. Setting it to 100% fixed it for me. Hope it helped!
I found a solution using also height
height: 100%
max-height: 100px;
overflow-y: scroll;
I know this has been asked many times and I've tried the fixes provided.
I saw this post: Make div 100% height of browser window
and I followed what it said, make the div instead
height: 100%; /* Make it */
height: 100vh;
however my div still has a gap between the top of it and the browser window.
https://jsfiddle.net/hgs3d1n6/
What am I missing or not doing which is causing this problem? I've tried other suggestions to like making the html, body 100%.
Thanks.
Both the body and paragraph elements have a default margin. The easiest way to clear that cross browser is with:
body,p {
margin:0;
}
jsFiddle example
Please check the following link in the latest safari:
http://www.grupoguion.com/
The footer is fixed at the bottom and supossed to revealed with the scrolling, so the previous section has a margin-bottom but it doesn't work, only in Safari.
Everywhere else is ok, even in I.E.
I tried to add overflow: auto in the page-wrapper, but everything gets weird in all browsers with elements dissapear and appear.
I also have read that removing height: 100% in the body and html may fix that, but that is not an option for me, because i need the images to fix the browser height.
Does anybody have another possible solution please?
Thank in advance.
You can add a div with the size of your bottom and make it transparent.
html:
<div id='tr-footer'>
</div>
css :
#tr-footer{
height: ?px;
width:100%;
background:transparent;
}
Try making the element
display:inline-block
and Safari should respect its dimensions and margin.
The accepted answer is way too complicated. Consider this approach (taken from another thread):
It's a normal weird behaviour calling margin collapse.
To simply avoid it add overflow: auto; on the [footer] container.
Your footer container could look something like this:
.footer-container {
overflow: auto;
}
if you take a look at this link (link removed) on an ipad, you will notice that my header doesn't take the full width of the page, there's a full px gap on the right side. Same issue for the footer. I don't understand why because these elements have a 100% width in my CSS sheet and it looks perfect on my mac with safari and firefox. Any idea what is wrong? (didn't include the code here as there would have been too many lines since I don't know where the issue is) Thanks
This is because of your min-width in html,body Changing min-width to 1000px will fix your issue.
Change this
html, body {
min-width: 980px;
to this
html, body {
min-width: 1000px;
your style for .wrapper has a width of 1000px set on it. Removing width:1000px in line 452 of your style.css should do the trick
I am having a page where i give max-height max-width property to image element. It is working fine in chrome and firefox but not in ie-7.
Try this css
*max-height:400px;
*max-width:400px;
like that
MAX width working in IE-7 according to Microsoft check the link below
http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#positioning
But you have to set appropriate doctype
*+html #div {
max-height: 300px;
max-width: 300px;
}
use this code ... i think its useful for you............