div problem

[Kekec]

Hi!

I have some zindex problem with DIV on my webform I have several
asp:dropdownlist controls and in some case i want to show div in middle of
that form but when I show that div every dropdownlis is above my div
element. I try to set zIndex style for div but no result. Can someone help
me with that problem!

tnx

[Ram]

Dropdown lists themselves are windows in IE browser and they have the
highest Z index. You can not show anything on top of them. Try to use
a popup window without toolbars etc.

Thanks
Ram

"Kekec" <slosoftware@hotmail.com> wrote in message news:<#w8SzV$VDHA.2376@TK2MSFTNGP10.phx.gbl>...

> Hi!
>
> I have some zindex problem with DIV on my webform I have several
> asp:dropdownlist controls and in some case i want to show div in middle of
> that form but when I show that div every dropdownlis is above my div
> element. I try to set zIndex style for div but no result. Can someone help
> me with that problem!
>
> tnx

[PJ]

I can help you by being the messenger of bad news. There is no way to bring
an html element in front of a drop down list. Certain windows controls
always live above html block/inline elements. I use dhtml menu navigation
that overlaps with specific page drop downs and the best solution I have
found is to hide the offending controls when appropriate. The javascript I
usually use is...

// specific page javascript
var ddl = document.getElementById("ddlBadWindowsDropDown");
if ( ddl );
controlsToHide[0] = ddl;

// linked dhtml library...
var controlsToHide = new Array():
// time of hiding
for ( int i = 0; controlsToHide.length; i++ )
controlsToHide[i].style.display = "none";
// time of showing
for ( int i = 0; controlsToHide.length; i++ )
controlsToHide[i].style.display = "inline"; // or "block" as appropriate

"Kekec" <slosoftware@hotmail.com> wrote in message
news:%23w8SzV$VDHA.2376@TK2MSFTNGP10.phx.gbl...

> Hi!
>
> I have some zindex problem with DIV on my webform I have several
> asp:dropdownlist controls and in some case i want to show div in middle of
> that form but when I show that div every dropdownlis is above my div
> element. I try to set zIndex style for div but no result. Can someone help
> me with that problem!
>
> tnx
>
>

[Kekec]

tnx ! I'll try your code!


"PJ" <pjwalNOSPAM@hotmail.com> wrote in message
news:OgowDqAWDHA.1872@TK2MSFTNGP12.phx.gbl...

> I can help you by being the messenger of bad news. There is no way to

bring

> an html element in front of a drop down list. Certain windows controls
> always live above html block/inline elements. I use dhtml menu navigation
> that overlaps with specific page drop downs and the best solution I have
> found is to hide the offending controls when appropriate. The javascript

I

> usually use is...
>
> // specific page javascript
> var ddl = document.getElementById("ddlBadWindowsDropDown");
> if ( ddl );
> controlsToHide[0] = ddl;
>
> // linked dhtml library...
> var controlsToHide = new Array():
> // time of hiding
> for ( int i = 0; controlsToHide.length; i++ )
> controlsToHide[i].style.display = "none";
> // time of showing
> for ( int i = 0; controlsToHide.length; i++ )
> controlsToHide[i].style.display = "inline"; // or "block" as

appropriate

>
> "Kekec" <slosoftware@hotmail.com> wrote in message
> news:%23w8SzV$VDHA.2376@TK2MSFTNGP10.phx.gbl...

> > Hi!
> >
> > I have some zindex problem with DIV on my webform I have several
> > asp:dropdownlist controls and in some case i want to show div in middle

of

> > that form but when I show that div every dropdownlis is above my div
> > element. I try to set zIndex style for div but no result. Can someone

help

> > me with that problem!
> >
> > tnx
> >
> >

>
>

[evropa]

im trying to trying to add new divs into "menu" but whenever i do the div tags
are placed into one as so
<div class="menuheadingtxt" id="txtleft">
<div>Content for New Div Tag Goes Here</div>
<strong>girls aloud</strong></div>

ive tried changing it to
<div class="menuheadingtxt" id="txtleft">
<strong>girls aloud</strong></div>
<div class="sectionlinks">
<p>fvfvf</p></div>

but whenever i do the second tag moves to the right and gets in between the
other divs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style/style.css" rel="stylesheet" type="text/css">
<link rel="shourtcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">

<title>index</title>
</head>

<body>
<!--Left Top-->
<div id="topleft"><img src="images/1.png" width="70" height="72" ><img
src="images/2.png" width="70" height="72" ><img src="images/3.png" width="70"
height="72"><img src="images/4.png" width="70" height="72"><img
src="images/5.png" width="70" height="72"></div>
<!--Right Top/Heading-->
<div id="topright"></div>
<!--Split Bar-->
<div id="split"></div>
<!--Left Menu-->
<div class="menu">
<div class="menuheadingtxt" id="txtleft">
<div>Content for New Div Tag Goes Here</div>
<strong>girls aloud</strong></div>
</div>
<!--Middle Content-->
<div id="middlecontent"></div>
<!--Right Menu-->
<div class="menu">
<div class="menuheadingtxt"><strong>bg underground</strong></div>
</div>
</body>
</html>

body {
width:800px;
margin:0 auto;
font-family: "Trebuchet MS";
}
#topleft {
background-repeat: no-repeat;
height: 80px;
width: 378px;
float: left;
padding: 0px;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 8px;
margin-left: 0px;
background-color: #D4D4D4;
}


#split {
background-color: #0099CC;
height: 25px;
width: 800px;
float: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}

#topright {
background-color: #FF6600;
background-repeat: no-repeat;
padding: 0px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 8px;
margin-left: 0px;
height: 80px;
width: 420px;
}
.menu {
background-color: #FFFFFF;
background-image:
url(file:///C|/Documents%20and%20Settings/Owner/My%20Documents/ga%20and%20bgu/im
ages/menu.png);
background-repeat: no-repeat;
height: 400px;
width: 200px;
margin: 0px;
padding: 0px;
float: left;
}

#topleft img {
padding: 0px;
margin-top: 4px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 4px;
}

#middlecontent {
background-color: #66CC33;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
float: left;
height: 300px;
width: 398px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.menuheadingtxt {

font-family: "Trebuchet MS";
font-size: 11px;
color: #FFFFFF;
padding: 0px;
margin-top: 10px;
margin-left: 6px;
text-transform: uppercase;
height: 10px;
width: 120px;
}

[laksinu]

Hi There,

Now it should not happen try with this code

---------------------------- Code ------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style/style.css" rel="stylesheet" type="text/css">
<link rel="shourtcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">

<title>index</title>
<style type="text/css">
body {
width:800px;
margin:0 auto;
font-family: "Trebuchet MS";
}
#topleft {
background-repeat: no-repeat;
height: 80px;
width: 378px;
float: left;
padding: 0px;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 8px;
margin-left: 0px;
background-color: #D4D4D4;
}


#split {
background-color: #0099CC;
height: 25px;
width: 800px;
float: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}

#topright {
background-color: #FF6600;
background-repeat: no-repeat;
padding: 0px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 8px;
margin-left: 0px;
height: 80px;
width: 420px;
}
.menu {
background-color: #FFFFFF;
background-image:
url(file:///C|/Documents%20and%20Settings/Owner/My%20Documents/ga%20and%20bgu/im
ages/menu.png);
background-repeat: no-repeat;
height: 400px;
width: 200px;
margin: 0px;
padding: 0px;
float: left;
}

#topleft img {
padding: 0px;
margin-top: 4px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 4px;
}

#middlecontent {
background-color: #66CC33;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
float: left;
height: 300px;
width: 398px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.menuheadingtxt {

font-family: "Trebuchet MS";
font-size: 11px;
color: #FFFFFF;
padding: 0px;
margin-top: 10px;
margin-left: 6px;
text-transform: uppercase;
height: 10px;
width: 120px;
}


</style>
</head>

<body>
<!--Left Top-->
<div id="topleft"><img src="images/1.png" width="70" height="72" ><img
src="images/2.png" width="70" height="72" ><img src="images/3.png" width="70"
height="72"><img src="images/4.png" width="70" height="72"><img
src="images/5.png" width="70" height="72"></div>
<!--Right Top/Heading-->
<div id="topright"></div>
<!--Split Bar-->
<div id="split"></div>
<!--Left Menu-->
<div class="menu">
<div class="menuheadingtxt" id="txtleft">
<div>Content for New Div Tag Goes Here</div>
<strong>girls aloud</strong></div>
</div>
<!--Middle Content-->
<div id="middlecontent"></div>
<!--Right Menu-->
<div class="menu">
<div class="menuheadingtxt"><strong>bg underground</strong></div>
</div>
</body>
</html>
----------------------------------------- code ------------

-laksinu

[evropa]

im still having the same problem, what changes did you make?

[laksinu]

can you place the file somewhere in the online url and show me what excatly the problem is ... may be i can help you out of this.

[evropa]

[url]http://evropa.bravehost.com/index.html[/url] - as you can see in IE the menu links line up just right, but in firefox not so much.
[url]http://evropa.bravehost.com/style/style.css[/url]

[laksinu]

Yes, I see that i feel the problem causing is < h1 > in <h1 class="menuheadingtxt">Girls aloud</h1>

Can you remove <h1> tag for Girls aloud and give a css using SPAN tag it may work

[Murray *TMM*]

Validate your page. Fix those errors. Then post back....

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"evropa" <webforumsuser@macromedia.com> wrote in message
news:dm6dbv$fbh$1@forums.macromedia.com...

> [url]http://evropa.bravehost.com/index.html[/url] - as you can see in IE the menu
> links line up just right, but in firefox not so much.
> [url]http://evropa.bravehost.com/style/style.css[/url]

[evropa]

i fixed all the errors and it is now valid xhtml. while fixing the errors i
also managed to fix the aligment problem everything looks good in
firefox,ie,opera now. i really appericate all your help laksinu, and Murray
*TMM*

[Murray *TMM*]

Good luck - and you're welcome!

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"evropa" <webforumsuser@macromedia.com> wrote in message
news:dm7t90$nq0$1@forums.macromedia.com...

>i fixed all the errors and it is now valid xhtml. while fixing the errors i
> also managed to fix the aligment problem everything looks good in
> firefox,ie,opera now. i really appericate all your help laksinu, and
> Murray
> *TMM*
>

[laksinu]

great ! you're welcome