Full screen div

hdsk

hi everybody, this is my first time posting something. And I'm sorry because my english is far from perfect.

I'm trying to make a fullscreen transparent div but I have some restrictions on the way to do it. My div should be inside another div. As the containig div isn't full screen I think the inside div can't be full screen. . . .

I try to achive this in several steps to reduce complexity. The first step was to make a transparent 100% width, 100% height div inside anotherone, this should be portable to IE6+ and Firefox. In firefox it works fine, but in IE6 is a mess, the contained div height is much less than 100% of the container div.

Can anybody help me to make this work on IE6?

Can anybody tell me if is posible to make the transparent div fullscreen inside the other div?

Here is the code:

Expand|Select|Wrap|Line Numbers

 <html>
 
</html>

<body>

<form>

    <input type="text" size="20"/>

    <input type="buttom" value="Enviar"/>

</form>
 
<div style="position:relative; top: 0; left:0; background-color:#0000ff; border:1;">
 
<div style="position:absolute; top:0;left:0; height:100%; width:100%; background-color:#aaaaaa; filter: alpha(opacity=80, finishopacity=10; style=0);z-index:999;opacity:0.8">
 
</div>

    <div style="position:relative; background-color:#ffffff; opacity:1; margin: 0 auto 0 auto; width:220; height:200; text-align:center; z-index:1000">

        First trial

    </div>
 
</div>
 
</body>

Markus

Hey there, hdsk.

When posting code on the forums, be sure to use [code] tags. [code] .. code goes here [/code]. If you neglect to do so, you will be given a warning and possibly a temporary ban. Please read the Posting Guidelines on How To Ask A Question

Markus.

hdsk

Quote:

Originally Posted by Markus

Hey there, hdsk.

When posting code on the forums, be sure to use [code] tags. [code] .. code goes here [/code]. If you neglect to do so, you will be given a warning and possibly a temporary ban. Please read the Posting Guidelines on How To Ask A Question

Markus.

Thanks for the advice Markus, I didn't know that.

drhowarddrfine

You will never get IE to attempt to perform like modern browsers without a proper doctype. See the article about doctypes under the Howto section at the top.

hdsk

Quote:

Originally Posted by drhowarddrfine

You will never get IE to attempt to perform like modern browsers without a proper doctype. See the article about doctypes under the Howto section at the top.

Hi,

Thanks for your answer.

I try all the doctypes in the howto section and none of them work for me. Using them changes how the div looks. Their width and height seem to change but they doesn't make the right efect. In firefox with those doctypes I can't see the gray background. It seem all div be the same width/height and the top one hidding the others.

In IE almost same problem as before :-(.

David Laakso

Quote:

Originally Posted by hdsk

Hi,

Thanks for your answer.

I try all the doctypes in the howto section and none of them work for me. Using them changes how the div looks. Their width and height seem to change but they doesn't make the right efect. In firefox with those doctypes I can't see the gray background. It seem all div be the same width/height and the top one hidding the others.

In IE almost same problem as before :-(.

Sorry. Don't think your construct will work. Even if the CSS was valid. Even without a doctype. Even with a doctype. Even with doctype and valid HTML and valid CSS.

drhowarddrfine

Quote:

Originally Posted by hdsk

I try all the doctypes in the howto section and none of them work for me. Using them changes how the div looks. Their width and height seem to change but they doesn't make the right efect.

Of course it does. The doctype is the set of rules you are telling the browser you are using. Change the doctype, change the rules. But you have to get all the browsers on the same set of rules and IE is the one that's in outer space.

Use the html 4.01 strict doctype, validate your html and css, fix the errors there, then see where we are.

Full screen div

re: Full screen div

re: Full screen div

re: Full screen div

re: Full screen div

re: Full screen div

re: Full screen div

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about