I have set
.x-mask {
height:100% !important;
}
But the parent window is scrollable. So when I scroll the window, the bottom portion does not have mask. Any way to solve this issue?
I am using extjs.
Your CSS isn't written correctly:
.x-mask {
height:100%;
}
If this doesn't fix your problem you would have to supply us with more code and/or a link to your website or a fiddle showing the issue.
x-mask {
position:fixed;
height:100%;
width:100%;
}
Related
Page content is covering the mobile menu on our site. Make your browser smaller, if needed, to see the problem.
I searched quite a bit and read a bunch of forum posts, so, I've tried playing with z-index and position:relative and I deleted a body tag with overflow-x:hidden, but I am not getting any results.
Here is the CSS I am currently using
.cshero-mobile-menu { position:relative; z-index:20000; }
.cshero-mobile-menu a { position:relative; z-index:21000; }
.cshero-mobile-menu span { position:relative; z-index:22000; }
.article * {position:relative; z-index:1000;}
Can anyone see what I am doing wrong and advise me how to fix it?
Thank You!
Add the following z-index rule to fix your issue:
#cs-header-custom-bottom .container {
…
z-index: 11;
}
There's a link to my test page Link
The problem is when I try to resize to small devices, background image is not covering the page properly, image is missing on the bottom of the page.
My CSS in head section.
Thanks in advance for any suggestions what I did wrong.
Change this
html,body {
height: 135%;
}
to
html,body {
height: auto;
}
Don't use fix height, use auto.
I realise this question has been asked multiple times in differently worded titles and options, but i have yet to find something that works for me.
Im trying to have an img fill most of the screen (keeping its aspect ratio) without overflowing the edges. (Basically what the firefox browser accomplishes when viewing an image)
Most that i've tried either works in only one direction ie. width will resize but will end up overflowing the height and the same for the other way, either with CSS or JScript. Also playing a factor in my trouble is that i want to aplly this to both portrait and landscape images (More or less any image i have on the site)
This seems like it should work using pure CSS but doesnt (im not completely knowledgeable in all CSS though):
Link to JSFiddle
body, html {
margin:auto;
padding:6px;
height:100%;
width:100%;
}
img {
max-width:100%;
max-height:100%;
}
There are a hand full of other scripts as well, but this post is getting a bit long.
Could anyone help me out containing my images within the screen, with either JQuery or CSS (within or without a DIV)
Thanks in advance,
Try this jQuery plugin: TailorFit
and check out the demo.
You can play around with various options in the demo to figure out if this could work for you. The browser support is extreme because it only uses jQuery and relative positioning.
Full disclosure - I'm the author of the plugin.
Now define your html, body height 100%;
as like this
body, html {
height:100%;
}
MY ANSWER:
I ended up just wrapping the image in a div and setting the div dimensions in CSS:
PURE CSS Resize
Unfortunately this method may look quite horrible in older browsers but it has atleast got me out of a pickle and its a tiny piece of styling.
Hopefully i can find some jQuery alternative soon.
body, html {
width:98%;
height:98%;
}
.outer {
position:fixed !important;
position:absolute;
margin:auto;
text-align:center;
top:10px;
right:0;
bottom:10px;
left:0;
}
img {
max-width:100%;
max-height:100%;
padding:4px;
background-color:#fff;
}
----
<div class="outer">
<img src="whatever.jpg" />
</div>
I created a overlay which i am using to show while doing ajax requests. In firefox it works great! But in IE7 i don't see the Div.
my div is simple its the first element after Body
<div id="overlay">
</div>
and my css is here
#overlay {
z-index:1000;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
display:none;
}
I think it maybe something to do with the sizing as i placed some text in the div and i don't see it on IE7 but i do on firefox.
Does anyon know where its not working, i am at a bit of a loss :-)
I tried removing display:none and its the same and i also inserting height:auto and still no joy.
I am using jquery to show and hide it liek so, but this isn't the problem as i removed Display:none and i don't see the div which should be over the top of the rest of the content
$("#overlay").show();
Any ideas?
Thanks in advance
since your div is positioned in absolute you should specify an height (different than auto). This can be done declaring height:100% to #overlay , then also html, body { height: 100% } when you open the overlay and html, body { height: auto } when closing the overlay);
Another (better) way is to dinamically calculate the height of body elements via javascript (e.g. document.body.offsetHeight) and then assign to the #overlay as a height
document.getElementById('overlay').style.height = document.body.offsetHeight + 'px';
this would be written in you jQuery snippet as
$("#overlay").height($('body').height()).show();
Try the following additional CSS:
#overlay {
zoom: 1;
}
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here