<pre><code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
.back{width: 1000px;height: 1000px;z-index: 1;position: fixed;top: 0px;
left:0px;opacity: 0.5;filter: alpha(opacity=50);background-color: Black;}
#main
{margin: 100px 0 0 100px;width: 500px;position: absolute;background-color: Aqua;}
#div1 {background-color: yellow;z-index:2;position: relative;}
#div2 {background-color: yellowgreen;}
#div3 {position: relative;}
</style>
</head>
<body>
<div id="main">
<div id="div1">
<div>
<input value="0000" />
</div>
</div>
<div id="div2">
<div>
<input value="1111" />
</div>
<div class="back">
</div>
</div>
</div>
<div id="div3">
<input value="222" />
</div>
</body>
Hi all, i need overlap all with div class='back' except div2, but IE7 show div3 too. It should look like popup. Alternative is to clone div2 and append it to body, but i dont like this idea.
There's a z-index bug in IE7 when using relatively positioned elements. There's a non-JS solution you can try (Not easy though because of the makup), but there's also an easy JS solution for that.
You can see a working example in this fiddle.
The jQuery function goes like this:
if (document.all && !window.opera && window.XMLHttpRequest) {
$(function() {
var zIndexNumber = 1000;
$('div,p,li').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
}
It checks if you are on IE (You could just call the script using conditional comments), and if so, it loops through the divs setting a lower z-index each loop.
Now your input box is behind .back in IE7.
Related
What I am trying to do is give a div margin-top: 30px; But it seems to be moving the whole page 30px down, as opposed to only that div. It is like the child div is influencing the parent div?
Any suggestions?
Html:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="BBcolForum.master.cs" Inherits="BBcolForum.BBcolForum" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="css/default.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="content">
<form id="form1" runat="server">
<div class="header" style="margin-top:0px;">
<h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</div>
</body>
</html>
CSS;
body
{
background-image:url('/img/blue_back.png');
background-repeat:repeat-x;
}
#content
{
background-color:White;
width: 800px;
height:900px;
margin: 0 auto 0 auto;
}
.header
{
border-bottom:1px solid #000000;
height:100px;
color:Blue;
}
That's exactly what's happening, yes. A direct-child of an element with margin-top will also push the parent element. As a really easy/quick fix, have you considered using padding instead?
Failing that, you can use overflow: auto on the parent according to this previous discussion on the topic, and this one too.
Try adding padding:0.01px to the container. This will have no visual effect, but it will cause the margin to be applied in the right place.
It's the margin on the <h1>. This always seemed counter intuitive to me. You can fix it by putting overflow: auto; on the container or changing the h1s margin to padding.
You must change
<h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>
to
<h1 style="color:Aqua; padding-top:30px;">Student Forum</h1>
margin applies the space outside the object while padding applies it inside.
IE is driving me crazy - once again. In the real application I want to have an image on the left, some links on the right and the standard text in between. The example below just has 3 divs inside another one, but it is sufficient to show the problem.
The example has 2 times the same construct. One time bare, one time encapsulated in a list. Firefox shows
|Left text|Center text<-->|Right text|
, the list indented, but generally the same.
IE8 shows the same for the bare construct. But for the encapsulated code things go awry:
|Left text|<-->|Right text|
|Center text<--> |
with the upper gap being yellow, i.e. the containing div.
Since to me CSS behaviour is not always intuitive, I'd like to know whether my code below collides with any standards. And if it is sufficiently conforming, is there any way to help IE8 to render it as intended?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float Test for IE</title>
<style>
.meta-left {
float: left;
background-color: red;
}
.meta-right {
float: right;
background-color: blue;
}
.meta {
background-color: green;
}
.meta-container {
background-color: yellow;
}
ol {
clear: both;
list-style: none;
}
p {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="meta-container">
<div class="meta-left">
<p>Left text</p>
</div>
<div class="meta-right">
<p>Right text</p>
</div>
<div class="meta">
<p>Center text</p>
</div>
</div>
<ol><li>
<div class="meta-container">
<div class="meta-left">
<p>Left text</p>
</div>
<div class="meta-right">
<p>Right text</p>
</div>
<div class="meta">
<p>Center text</p>
</div>
</div>
</li></ol>
</body>
</html>
try adding the http-equiv="X-UA-Compatible" content="IE=edge" meta tag? forcing IE to render with it's most advanced rendering engine
Have you tried floating the centre text? IE is probably doing something because it doesn’t understand where to put it. Plus, IE is crap! : )
The following HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="border: 1px solid blue;">
<div style="float: left;">
Expected NPV</div>
</div>
</body>
</html>
...renders a parent DIV with a blue border and a child DIV inside. However, the float:left; directive makes the parent not surround the child with a border (which is what I desire).
Is there a way to make this happen w/out removing the float:left?
I boiled the HTML down to a very simple example to illustrate the basic problem. I realize float:left; is nonsensical in this example, but it is required from the original HTML. I can post that if it would be more helpful.
You can give the parent an overflow to take the child's height into account, like this:
<div style="border: 1px solid blue; overflow: auto;">
<div style="float: left;">
Expected NPV</div>
</div>
You can test it here. For a full explanation, check out the excellent write-up on quirksmode.org. Note that overflow: hidden also works here, you can test that version here.
Use overflow:auto; eg. on the container.
Similar problem : Floating image to the left changes container div's height
I am wondering why the following HTML/CSS renders fine until I put a doctype in:
<body style="margin:0; padding:0; background-color:#eeeeee"></body>
<div id="HeaderContainer" style="background-color:#eeeeee; color:Black; border-bottom:1px solid #cccccc; height:60px; margin:0px"></div>
<div style="width:100%; background-color:White; margin:0px; padding:0px">
<div style="margin:30px; width:840px; margin:10px auto; margin-top:50px; background-color:#cc0000;">
text
</div>
</div>
</div>
</body>
What I want is a header (a grey bar) with a dark grey border at the bottom. Beneath this, I want my content, which goes into a big 100% width div that's white (as the page is grey). The above code looks fine, but if I add this line to the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The margin on the innermost div turns from white to grey, so the page looks wrong.
Can anyone explain why? I am testing this using IE8 but it looks the same in Chrome.
Image description:
Adding a DOCTYPE declaration causes the browser to render the page in [almost] standards mode instead of quirks mode.
you are closing the body tag on line 1 and and then again on the last line.
This is terribly formed XHTML.
The problem you are referring to is actually a webkit issue. When you use a margin on an element, it uses the background from the parent element in the margin space. Instead use padding to get past this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; background-color:#eee">
<div id="HeaderContainer" style="background-color:#eee; color:#000; border-bottom:1px solid #ccc; height:60px; margin:0px"></div>
<div style="width:100%; background-color:#fff; margin:0px; padding:0px">
<div style="width:840px; margin:0 auto; padding-top:10px; background-color:#c00;">
text
<br /><br /><br />
</div>
</div>
</body>
</html>
If I want my textarea to be hidden, how do I do it?
Everyone is giving you answers, but not much on the reasons. Here you go: if you use the CSS rule visibility:hidden; the text area will be invisible, but it will still take up space. If you use the CSS rule display:none; the textarea will be hidden and it won't reserve space on the screen—no gaps, in other words, where it would have been. Visual example below.
So you want something like this to be totally hidden:
<textarea cols="20" rows="20" style="display:none;">
Example
/* no styling should show up for either method */
textarea {
background: lightblue;
border: 1px solid blue;
font-weight: bold;
}
<p><strong>Textarea (not hidden)</strong></p>
<textarea>Text within.</textarea>
<p>Some text after.</p>
<hr />
<p><strong>Textarea with <code>display:none;</code></strong></p>
<textarea style="display:none;">Text within.</textarea>
<p>Some text after. Neither height nor margin/padding/layout kept. No other styles visible.</p>
<hr />
<p><strong>Textarea with <code>visibility:hidden;</code></strong></p>
<textarea style="visibility:hidden;">Text within.</textarea>
<p>Some text after. Height and margin/padding/layout kept. No other styles visible.</p>
You have a few options, here are some examples:
Display:none
Visibility:hidden
Here is some example code for you to see for yourself
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Area Hidden</title>
<style type="text/css">
.hideButTakeUpSpace
{
visibility: hidden;
}
.hideDontTakeUpSpace
{
display:none;
}
</style>
</head>
<body>
<h1>Text area hidden examples</h1>
<h2>Hide but take up space (notice the gap below)</h2>
<textarea class="hideButTakeUpSpace" rows="2" cols="20"></textarea>
<h2>Hide Don't take up space</h2>
<textarea class="hideDontTakeUpSpace" rows="2" cols="20"></textarea>
</body>
</html>
See this jsFiddle Example
Using css: display: none; (this will make the textarea disappear completely, the space it would normally take up will not be reserved)
Hidden with occupy the space on current webpage.
<textarea style="visibility:hidden"></textarea>
Disappear on current webpage with no other effect.
<textarea style="display:none" ></textarea>
<!DOCTYPE html>
<html>
<head>
<style>
textarea.none {
display: none;
}
textarea.hidden {
visibility: hidden
}
</style>
</head>
<body>
<textarea class="none">The display is none.</textarea>
<br>
<textarea class="hidden">visiblity is hidden</textarea>
<br>
<textarea >This is visible and you can see a space taken visiblity:hidden</textarea>
</body>
</html>
Using the CSS visibility property should do the trick.