I have the following code:
<html>
<head>
<style type="text/css">
DIV#left
{
z-index: 100;
position:absolute;
left:0px;
top:0px;
width: 100px;
height: 100px;
background-color: #e7e7e7;
}
DIV#right
{
z-index: 100;
position:absolute;
left:100px;
top:0px;
width: 100px;
height: 100px;
background-color: #e20074;
}
</style>
</head>
<body>
<div id="left">
1
</div>
<div id="right">
2
</div>
</body>
</html>
But I need the right div section to be expanded to the end of the page (width=100%)
So here is how I changed the width for DIV#right:
width: expression(parseInt(document.body.offsetWidth)-100);
Unfortunately, this doesn't work with IE any more! IE8 and firefox ignore expressions. How can I overcome this issue?
Many thanks in advance!
You shouldn't use CSS expressions like that - they're slow, old, and most importantly, proprietary, meaning it won't work on anything other than IE.
Here's a simple solution that works on Firefox, IE8 and IE7 [but not IE6 though]: Give the right div a right: 0 to force the div to expand out all the way to the end of the page:
#right {
position: absolute;
left: 100px;
top: 0;
right: 0;
height: 100px;
}
See: http://jsfiddle.net/hEeVY/
If you're using expressions for anything, it's probably better off to use Javascript to achieve the same effect.
Yes, CSS Expressions are slow, they affect performance. Along with they they compromise with security as well. Solution specified by Yi Jiang must work.
Now all browsers will go on same terms. To know more on why Expressions were dropped please check http://techbookshelf.blogspot.in/2012/11/css-expressions-in-ie8-and-higher.html
Related
It's best to see it yourself, so check out this fiddle:
https://jsfiddle.net/6rc4zzcv/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
#container
{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAADICAMAAACHxIozAAAABlBMVEUAAAD///+l2Z/dAAACq0lEQVR42u3VQQ0AMAzEsHX8OXcoWuk0G0I+uQUAxLsHAIhn6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChAwCGDgCGDgAYOgBg6PCtXqAyGDowrcZpDIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6AGDokKfHaQyGDkyrBSqDoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChSwAAhg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDALEeYdfPYfw5pLEAAAAASUVORK5CYII=');
background-position: center top;
background-repeat: no-repeat;
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
}
#centerbox
{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative
}
#floater
{
position: absolute;
top: 50px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="centerbox">
<div id="floater"></div>
</div>
</div>
</body>
</html>
When you resize the browser window (or just the fiddle output window), sometimes the red square stays exactly within the black frame, and sometimes there's a 1px gap. I checked this in Chrome and IE11. IE11 seems to try and render "half-pixel", so it's less noticeable, but still there. Curiously, if the background image is smaller than the viewport, this does not happen.
I can imagine the cause for this effect (the centering code is duplicated in two places, for background and for margins, and uses different rounding methods) - but how to work around it?
In real life, the black box is actually an artistically drawn box which merges with the background, so I'd really rather avoid splitting it out.
jsFiddle
Yes exactly as you've noticed, the issue is that Chrome (and possibly other browsers too) bugs on centering large images, cause the centering calculation offset.
One solution would be, instead of setting that 2000×200px background to the parent hitting that issue, use another inner element set at
#bg{ /* I'm inside the parent */
position: relative;
background: url("2000x200image.jpg");
width: 2000px;
height: 200px;
left: 50%; /* center left edge */
margin-left: -1000px; /* -half width */
}
as you can see above, the element is centered! and will move same as all other centered elements on the page.
HTML:
<div id="container">
<div id="centerbox">
<div id="bg"></div>
<div id="floater"></div>
</div>
</div>
CSS:
#container{
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
overflow:hidden;
}
#bg{
position:relative;
width:2000px; /* same as your image size */
height:200px;
/* center element instead of image! */
left: 50%;
margin-left:-1000px; /* -half width */
background: url('data:image/png;base64,iVBORw0KG...=');
}
#centerbox{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative;
}
#floater{
position: absolute;
top: 51px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}
The answer you already know. Pixel perfection on the web is a myth. You can Google for that and find a multitude of articles about the subject. Rounding errors are the chief culprit. Bugs may be another but, perhaps, less likely. Attempting to line things up to the pixel and then hope the browser, any browser, resizes fractional calculations in your favor is never going to happen except with just luck.
I have header1 div in page and I want set position: fixed top and center in IE7 and IE6. at multi resolution.
EX Resolution
EX Resolution
I use this code in css:
.page
{
width:900px;
height:auto;
margin:auto;
}
.header1
{
width: 500px;
height: 60px;
float: right;
position: fixed;
display: block;
z-index: 1100;
margin: 0 50px 0 0;
}
html code:
<div class="page">
<div class="header1"></div>
</div>
OR
.page
{
width:900px;
height:auto;
margin:auto;
}
.header1
{
width: 500px;
height: 60px;
float: right;
position: fixed;
display: block;
z-index: 1100;
top: 0px;
right: 0px; /*right: X px*/
left: 0px; /*left: X px*/
}
html code:
<div class="page">
<div class="header1"></div>
</div>
it's working in IE 8+,.. but not working in IE7 And 6.
IE6 does not support position:fixed.
IE7 does support it, but has bugs.
Ultimately, you will not be able to get this working using pure CSS. You might be able to make it work using a javascript polyfill script that adds newer browser features to older IE versions.
The only polyfill script that I know of which includes this feature is ie7.js / ie8.js /ie9.js. This script adds a whole load of extra features to old IE versions, including position:fixed. It's not perfect, but it might just do the trick for you.
Hope that helps.
You can find out more about the browser support here: http://quirksmode.org/css/css2/
Add DocType Tag on top of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I've had similar problems but try
.page
{
width:900px;
height:auto;
margin:auto;
padding:0pt
}
This can lead to you putting more CSS for a less effect, IE6 can be problem.
position:fixed should be given to the parent container and not the child one
is this what you are asking for
.page
{
width:100%;
position: fixed;
top: 0px;
}
.header1
{
width: 500px;
margin: 0 auto;
height: 60px;
}
I wouldn't worry about IE 6 or IE7, IE 8, 9, & 10 are used more, and thats only a portion of internet users that don't really worry about the internet, the rest of us use Firefox, Opera, and Chrome.
I have a lightbox-style div with scrolling content that I am trying to restrict to a reasonable size within the viewport. I also want this div to be horizontally centered. This is all easy in Fx/Chrome/IE9.
My problem is that IE8 ignores the absolute positioning which I use to size the content, and the rule margin: 0 auto which I use to horizontally center the lightbox.
Why?
What are my options for workarounds?
EDIT: The centering issue is fixed by setting text-align:center on the parent element, but I have no idea why that works since the element I want to center is not inline. Still stuck on the absolute positioning stuff.
HTML:
<div class="bg">
<div class="a">
<div class="aa">titlebar</div>
<div class="b">
<!-- many lines of content here -->
</div>
</div>
</div>
CSS:
body { overflow: hidden; height: 100%; margin: 0; padding: 0; }
/* IE8 needs ruleset above */
.bg {
background: #333;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */
}
.a {
background: #eee; border: 3px solid #000;
height: 80%; max-height: 800px; min-height: 200px;
margin: 0 auto;
position: relative;
width: 80%; min-width: 200px; max-width: 800px;
}
.aa {
background: lightblue;
height: 28px; line-height: 28px;
text-align: center;
}
.b {
background: coral;
overflow: auto;
padding: 20px;
position: absolute;
top: 30px; right: 0; bottom: 0; left: 0;
}
Here's a demo of the problem: http://jsbin.com/urikoj/1/edit
I found out what's going on, and it's not the doctype, nor anything about the code that needs changes.
It's that jsbin's edit page doesn't support IE8 - the exact same demo viewed in full* is styled correctly in IE8.
In edit mode, jsbin seems to apply quirks mode or something odd like that when viewed in IE9 with IE8 browser mode and IE8 document standards. Surprisingly, the demo also works with IE7 browser mode and document standards (quirks mode off).
*the link goes to a later revision, but the only change was to remove all the attributes from the <html> tag - I had added these for testing. So, the demo is fine without those attributes, and with the html5 doctype.
I once fixed this issue by:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:x2="http://www.w3.org/2002/06/xhtml2">
Make sure your page is declared as HTML5
<!DOCTYPE html>
The problem with the vertical aling in IE<9 should be solved with this:
.bg {
text-align: center;
}
.a {
text-align: left;
}
But I don't know what's going wrong with the absolute position
So I have a problem that I think is quite common but I have yet to find a good solution for. I want to make an overlay div cover the ENTIRE page... NOT just the viewport. I don't understand why this is so hard to do... I've tried setting body, html heights to 100% etc but that isn't working. Here is what I have so far:
<html>
<head>
<style type="text/css">
.OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
body { height: 100%; }
html { height: 100%; }
</style>
</head>
<body>
<div style="height: 100%; width: 100%; position: relative;">
<div style="height: 100px; width: 300px; background-color: Red;">
</div>
<div style="height: 230px; width: 9000px; background-color: Green;">
</div>
<div style="height: 900px; width: 200px; background-color: Blue;"></div>
<div class="OverLay">TestTest!</div>
</div>
</body>
</html>
I'd also be open to a solution in JavaScript if one exists, but I'd much rather just be using some simple CSS.
The viewport is all that matters, but you likely want the entire website to stay darkened even while scrolling. For this, you want to use position:fixed instead of position:absolute. Fixed will keep the element static on the screen as you scroll, giving the impression that the entire body is darkened.
Example: http://jsbin.com/okabo3/edit
div.fadeMe {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
<body>
<div class="fadeMe"></div>
<p>A bunch of content here...</p>
</body>
body:before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
First of all, I think you've misunderstood what the viewport is. The viewport is the area a browser uses to render web pages, and you cannot in any way build your web sites to override this area in any way.
Secondly, it seems that the reason that your overlay-div won't cover the entire viewport is because you have to remove all margins on BODY and HTML.
Try adding this at the top of your stylesheet - it resets all margins and paddings on all elements. Makes further development easier:
* { margin: 0; padding: 0; }
Edit:
I just understood your question better. Position: fixed; will probably work out for you, as Jonathan Sampson have written.
I had quite a bit of trouble as I didn't want to FIX the overlay in place as I wanted the info inside the overlay to be scrollable over the text. I used:
<html style="height=100%">
<body style="position:relative">
<div id="my-awesome-overlay"
style="position:absolute;
height:100%;
width:100%;
display: block">
[epic content here]
</div>
</body>
</html>
Of course the div in the middle needs some content and probably a transparent grey background but I'm sure you get the gist!
I looked at Nate Barr's answer above, which you seemed to like. It doesn't seem very different from the simpler
html {background-color: grey}
EDIT: Changed title to actually be
correct
I'm trying to simulate a modal popup in all HTML and CSS and am having a bit of bad luck with one single element of what I'm doing. I want the innermost div, the one with the content, to not be opaque like the border is, but no matter what I try with the CSS I cannot get it to work. Here's the code:
The CSS
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
The HTML
<table style="height: 100%; width: 100%; position: fixed; top: 0; left: 0;"><tr><td class="modalBackground">
<div style="display: table; height: 40px; width: 150px; position: fixed; overflow: hidden;
top: 40%; margin-top: -50px; left: 50%; margin-left: -75px; padding-left: 30px;
border: solid 1px navy; background-color: White;">
<div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
<div style="#position: relative; #top: -50%;"
><asp:Image runat="server" ImageUrl= "~/images/indicators/indicatordark.gif" /> working...</div>
</div>
</div></td></tr></table>
I am reaching my witt's end on this. I'm no HTML or CSS guru by any means, so an explanation of why the solution works would be greatly appreciated.
Updated Answer
The best way to do this now is to use rGBA colors. It won't work for older browsers, but you can let the design gracefully degrade by just feeding them a solid color. Example:
CSS
.parent {
background: gray; /* older browsers */
background: rgba(128,128,128,0.7); /* newer browsers */
}
.child {
background: blue;
}
Original Answer
It is annoying, but CSS doesn't allow that. Setting opacity for one element means no child element can have any greater opacity. (100% of 25% opacity is? Right.)
So, one solution is to use a tiny transparent PNG as a repeating background image to work around that. The only issue there is IE6, and there's an excellent workaround called supersleight.
(Updated. Think supersleight will work for you.)
Update
Here's a very simple test case. Create the image (say, a PNG with 50% black fill) and then create this file--save them in the same folder. If you don't see a thin box with a transparent background behind 'stuff', then you're either not saving the file correctly or have saved the image somewhere else.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body { background:white; }
#overlay { background-image:url(test.png); }
</style>
</head>
<body>
<div id="overlay">stuff</div>
</body>
</html>
You can also do this without using a transparent image. Create two separate divs and use z-index to control which one is on top
Example code on jsfiddle
Setting the color of the parent div with opacity with a rgba-color would make more sense here, because in this case the child element wouldnt inherit the opacity and wont be transparent!
so instead of using background-color: gray or #something, use something like this:
.modalBackground {
background-color: rgba(222, 222, 222, 0.7);
}
Like this the parent-element has an opacity of 0.7 but is does not inherit it to any div or image or whatever inside of this div!
There are many rgba-generators out there on the net, try them.
http://www.css3-generator.de/rgba.html
How about using visibility?
#parentDiv {
visibility: hidden;
}
#childDiv {
visibility: visible;
}
A PNG would provide better compatibility (you have to use a filter: statement for IE6) ,but the better CSS3 method is just to use RGBA colours (e.g. background: rgba(0,0,0,0.5); will get you black at 50% alpha), that gets rid of any inherited opacity.
The way that I was able to put a transparent div behind an opaque div was to use something like:
`div.transparent-behind { opacity: 0.4;
z-index: -1; }
div.opaque-ontop { position: absolute;
top: (wherever you need it to fit)px;
left: (some # of)px}'
where the div's were not nested inside each other, but one right after another in the html
make sense?
Try this
<div class="" id="" style=" background: none repeat-x scroll 4px 3px lightgoldenrodyellow; left: 450px; width:470px; text-align:center; height: 45px; position: fixed;
opacity:0.90;
filter:alpha(opacity=40);
z-index: 1000; ">
</div>