Form objects overlay div

Fabri

Someone call please tell me why this simple code:

================================================== ===============
<html>
<head>
<title>Example</title>
<style type="text/css">
#msg{
position: absolute;
background-color: white;
margin: auto;
padding: 5px;
border: 5px solid red;
font: bolder 15px arial;
}
</style>
</head>
<body>
<div id="msg">PippoPippo</div>
<form name="form1" method="post" action="">
<select name="select">
<option value="PippoPippo" selected>PippoPippo</option>
</select>
</form>
</body>
</html>
================================================== ===============

in IE and firefox work differently?

I tried to use z-index properties but nothing change.

In IE form objects "win".
In FF div "win".

How can I decide to show an element "over" another?

Any help appreciated.

Regards.

--
Fabri
("Sig. Finocchiaro, mi sa dire quali sono i Pirati più pericolosi?Si
.....i piràti ndé baddi!")

Jul 23 '05 #1

Subscribe Post Reply

2770

cosmic fool

"Fabri" <no@sp.am> wrote in message news:d7**********@news.ngi.it...

Someone call please tell me why this simple code:

================================================== ===============
<html>
<head>
<title>Example</title>
<style type="text/css">
#msg{
position: absolute;
background-color: white;
margin: auto;
padding: 5px;
border: 5px solid red;
font: bolder 15px arial;
}
</style>
</head>
<body>
<div id="msg">PippoPippo</div>
<form name="form1" method="post" action="">
<select name="select">
<option value="PippoPippo" selected>PippoPippo</option>
</select>
</form>
</body>
</html>
================================================== ===============

in IE and firefox work differently?

I tried to use z-index properties but nothing change.

In IE form objects "win".
In FF div "win".

How can I decide to show an element "over" another?

Any help appreciated.

Regards.

--
Fabri
("Sig. Finocchiaro, mi sa dire quali sono i Pirati più pericolosi?Si
....i piràti ndé baddi!")

i think that may be because ie kind of sucks.
try setting the select's visibility to hidden

Jul 23 '05 #2

Grant Wagner

"cosmic fool" <si*@onit.com> wrote in message
news:Hq*********************@news20.bellglobal.com ...

"Fabri" <no@sp.am> wrote in message news:d7**********@news.ngi.it...
How can I decide to show an element "over" another?

Any help appreciated.

i think that may be because ie kind of sucks.
try setting the select's visibility to hidden

"ie kind of sucks" is not a particularly useful explanation.

A more useful explanation might be: In IE version 5 and higher, <select>
is a windowed element. As explained at <url:
http://support.microsoft.com/default...b;en-us;177378 />:

"All windowed elements paint themselves on top of all windowless
elements, despite the wishes of their container."

You'll have to try to figure out when elements are overlapping the
<select> and hide the <select> under those circumstances. If you know
that the display of the <div> and the <select> are mutually exclusive,
and the <div> only appears under very specific circumstances, you could
try just hiding the <select> anytime the <div> is visible. It really
depends on your requirements.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #3

cosmic fool

"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:uH****************@news2.mts.net...

"cosmic fool" <si*@onit.com> wrote in message
news:Hq*********************@news20.bellglobal.com ...

"Fabri" <no@sp.am> wrote in message news:d7**********@news.ngi.it...
How can I decide to show an element "over" another?

Any help appreciated.

i think that may be because ie kind of sucks.
try setting the select's visibility to hidden

"ie kind of sucks" is not a particularly useful explanation.

A more useful explanation might be: In IE version 5 and higher, <select>
is a windowed element. As explained at <url:
http://support.microsoft.com/default...b;en-us;177378 />:

"All windowed elements paint themselves on top of all windowless
elements, despite the wishes of their container."

You'll have to try to figure out when elements are overlapping the
<select> and hide the <select> under those circumstances. If you know
that the display of the <div> and the <select> are mutually exclusive,
and the <div> only appears under very specific circumstances, you could
try just hiding the <select> anytime the <div> is visible. It really
depends on your requirements.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

lol
like i said, it sucks

Jul 23 '05 #4

drWot

You can cry about the Microsoft behavior or work around it:

It is possible to have a select element on your page and still overlay the
page with other content; even in browsers that try to keep the select on
top.

You have to hide the select element; but to have easy access to it, hide it
under a 'faux select' element that can be overlaid.

Clicking the fake 'select' toggles the select display.

Like this:

1. Create a span element

2. Put the select element in the span and set the select element's display
property to 'none' ;

3. Create a span with the text from the selected option as its content and
append it to the parent span;
(To really look like a select element give this inner span a little
gif of the drop down arrow beside the text)

4 Set an onclick event handler on the parent span that:
swaps the display of the select element to 'inline' and the
visibility of the inner span to 'hidden';
calls focus() on the select element (to show the drop down list)
(to avoid having to click twice to see the option list you need to
set the select's multiple attribute to true.
if that can be a problem in your code, set the select size attribute
to false);

5. Set the select element's onchange event to do whatever it is supposed to
do;
plus change the text in the inner span to match the selected option text

6.Set an onblur event handler (in case someone leaves the select without
selecting anything)that:
resets the display of the select to 'none';
resets the visibility of the inner span to 'visible';

To a visitor it looks like a select element, but it will not push itself
above an overlay.

If you have to do it more than once, write a function to 'encapsulate' any
select element.

Jul 23 '05 #5

RobB

Fabri wrote:

Someone call please tell me why this simple code:

================================================== ===============
<html>
<head>
<title>Example</title>
<style type="text/css">
#msg{
position: absolute;
background-color: white;
margin: auto;
padding: 5px;
border: 5px solid red;
font: bolder 15px arial;
}
</style>
</head>
<body>
<div id="msg">PippoPippo</div>
<form name="form1" method="post" action="">
<select name="select">
<option value="PippoPippo" selected>PippoPippo</option>
</select>
</form>
</body>
</html>
================================================== ===============

in IE and firefox work differently?

I tried to use z-index properties but nothing change.

In IE form objects "win".
In FF div "win".

How can I decide to show an element "over" another?

Any help appreciated.

Regards.

--
Fabri
("Sig. Finocchiaro, mi sa dire quali sono i Pirati più pericolosi?Si
....i piràti ndé baddi!")

This one's been blogged to death....

google "iframe shim" for suggestions. #:=)

Jul 23 '05 #6

Similar topics

html tags <fig> and <overlay>

by: Ross | last post by:

it seems that it is only supported by w3c but not IE or netscape, but what is a w3c browser ?

HTML / CSS

Export of form with 2 graphs As a JPEG

by: David Lauberts | last post by:

Hi Wonder if someone has some words of wisdom. I have a access 2002 form that contains 2 graph objects that overlay each other and would like to export them as a JPEG to use in a presentation....

Microsoft Access / VBA

C# and Managed DirectX (DDraw and Overlay)

by: Never Best | last post by:

I'm having troubles attaching the Device to a window using its hWnd, and I have some troubles with getting transparancy to work with a DDOverlay... if anyone could help it would be greatlay...

C# / C Sharp

Windows Metafile and Overlay

by: sendhil | last post by:

hi, Iam doing some graphics programming with C#. I have to create a Windows MetaFile from a base64 encoded string. How do i create the file. I want to Overlay this Windows MetaFile on a image...

C# / C Sharp

Web Form -- Datagrid Overlays Fields and Controls Under It

by: Bruce LeMond | last post by:

When I start the browse of a web form, the datagrid would overlay the fields and controls below it. The fields and controls still show up inside the datagrid (It looks like a double exposure in a...

Visual Basic .NET

How do I overlay graphics on DirectX games?

by: odie5533 | last post by:

I am looking to make a program similar to Xfire which will overlay information while playing a directx game. For an example of what xfire is capable of, see the image below:...

C# / C Sharp

Ttransparent overlay watermark - on the fly?

by: Chuck Anderson | last post by:

Is it possible to overlay a transparent watermark on an image - dynamically? I'd like the result to look like this example: <http://www.cycletourist.com/temp/photo.php> That is a bit of...

PHP

dropdown list not support overlay for IE its appeared on overlay please help

by: pravinnweb | last post by:

i have dropdown select menu in my page. when i click any button the black overlay comes while loading. in FF overlay working fine but in IE the select option menu appeared on overlay...please help me

HTML / CSS

Is there a way to overlay text on youtube videos?

by: linksterman | last post by:

I want to make a simple app to overlay subtitles on youtube videos. Is there a way to do this and keep the files hosted on youtubes servers (eg just overlay the text with another flash app)? I...

Flash / Actionscript

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA