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;
}
Related
I have a #container div that is set to height:100%; width:100%; of the document body. Inside the #container is div#box2 that is set to height:100%; width:200px;. When I add lots of content to div#box2 the div height overflows the document body and a scroll bar appears.
How can I make div#box2 100% the height of the #container (and thus 100% of document body) and not overflow with a document scrollbar when content is added?
See this fiddle: http://jsfiddle.net/aDdTe/
Essentially, div#box2 should get the scroll bar, not document body.
update
I've edited my fiddle to better represent my actual dev scenario. The new fiddle is here: jsfiddle.net/Nszjv and is working as expected in safari however firefox does not render the scrollbar for some reason.... any ideas on this?
You need to use overflow property in your css.
#box1{
display:table-cell;
}
#box2{
overflow:scroll;
display:block;
height:500px;
width:200px;
}
Here is the code on jsFiddle:
http://jsfiddle.net/gDKKr/
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>
In Microsoft's homepage (http://www.microsoft.com/en-us/default.aspx) you see the white background stretch all the way to the bottom and the sides in grey?
How do you that in an HTML/CSS? I mean, I've been trying but the DIV won't go all the way down...
Help?
Well, their page has enough content to force the page to scroll. Like this
If you don't have enough content, you can set the height of the div to 100%. The important thing to note here is that it will be 100% of its parent's height. That's why you have to set the html and body heights to 100% as well. DEMO
html, body {
height: 100%;
}
#contentDiv {
height:100%;
}
HTML
<body>
<div id="contentDiv">my content here</div>
</body>
You must make sure that the body and html file has 100% height aswell, cause 100% is what it gets from the current height of the parent element
so if you set, and html's parent is the window(document) that's why you get a full height
html,body{
height:100%;
width:100%;
background:gray;
}
div{
height:100%;
width:100%;
background:red;
}
you will get a red page
Set the height to %100 and sometimes setting the parent element to position:relative will set things straight. Post your html and css and we could help you better.
All,
I have a page which is suppose to take up only the available screen space in the browser.
I have a 'top bar' and a 'bottom bar', both of which are fixed positioned at the top and bottom of the page. I want to have a div which will consume (take up) the remaining of the space inbetween the two bars mentioned above.
Its crucial that the middle div is not overlapped by the top and bottom bars. Is this at all possible with CSS or do I need to make use of js.
Also, if I do go with js, considering the browser loads up the CSS first before the js code, how is the above work out using js for centre positioning?
Many thanks,
You can use relative and absolute positions. Here an example:
css
html,body,#wrapper {
height:100%;
margin:0;
padding:0;
}
#wrapper {
position:relative;
}
#top, #middle, #bottom {
position:absolute;
}
#top {
height:50px;
width:100%;
background:grey;
}
#middle {
top:50px;
bottom:50px;
width:100%;
background:black;
}
#bottom {
bottom:0;
height:50px;
width:100%;
background:grey;
}
html
<div id="wrapper">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
Demo: http://jsfiddle.net/jz4rb/4
This demo works for me in Chrome12 but YMMV depending on which browsers you need to support. For example position:fixed does not work correctly in IE6.
Use absolute positioning on the body tag. position:absolute with zero top and bottom will "stretch" body to be the same size as the browser window. Alternatively, setting height: 100% also works but I remember it works wierd for certain old browsers.
Then use absolute positioning on the center div, with enough top/bottom offsets to avoid your header and footer bars. The header bar is absolutely positioned with top and the fotter is absolutely positioned with bottom.
Note: This won't work on mobile browsers. You'll need to use JS to get the window's height and manually set the center div's height.
Well I have, I think, kind of unusual question. Well I have a web page with starting div with absolute position.
.head_warp
{
width:100%;
display:block;
height:238px;
margin:0 auto;
padding:0;
position:absolute;
text-align:center;
background-image:url(images/demo6_fon.png);
background-position:center;
background-position:top;
background-repeat:repeat-x;
z-index:-9999;
}
and after that I have a container
#container_out
{
width:1024px;
margin:0 auto;
}
The HTML is that way:
<div class="head_warp"></div>
<div id="container_out"></div>
The idea is the content in the "container" to be shown over the "head_warp" and it's ok in any browser I tested with. Chrome, FF, Safari even with IE8 and IE7. But my co worker is with IE8 with windows VISTA and look what is the result
alt text http://www.pechat.mdkbg.com/problem.jpg
What is the problem?
#Puaka I think all browsers are relative to the parent container when specifying a percentage width. In this case it should be relative to the body.
Is your DOCTYPE correct?
If you are absolutely positioning an element, you should be specifying the top/left position which you don't appear to be doing. Also, you specify margin:0 auto; implying there could be a left/right margin. I would have thought this should be simply margin:0;?
Looks like you're missing some information for your absolutely-positioned div:
top: 0;
left: 0;
in IE, 100% width will use its parent width, so you need to put it inside container_out, change your container_out css, maybe add padding-top/margin-top = header_warp height
I just tested it in IE8 on Vista and it displayed fine.
It looks like all that div is doing is displaying a background image for the page. Why not just add the background image to body and get rid of that div?