Solved

IE6 -CSS -SELECTBOX problem-coldfusion

Posted on 2009-05-13
12
662 Views
Last Modified: 2012-05-06
Hello experts.
I have downloaded from:
http://www.dhtmlgoodies.com/index.html?whichScript=modal-message
the files for the tutorial from that site:
http://www.dhtmlgoodies.com/scripts/modal-message/demo-modal-message.html
The problem i have is that when i have a select box then it appears over the message and not under.(the known problem with select boxes and IE6).
How can i solve this?
Is there another tutorial that is working for IE6 without problems?
I send the test page.
You can download the scripts from the links.
(i use coldfusion)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
	<title>Demo 1: DHTML modal dialog box</title>
	
	<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
	<style type="text/css">
	/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
	#mainContainer{
		width:500px;
		margin:0 auto;
		margin-top:10px;
		border:1px double #000;
		padding:5px;
		
	}
	
	/* Alternative layout for the message box - used by one of the messages */
	
	.modalDialog_contentDiv_error{
		border:3px solid #FFF;	
		padding:2px;
		z-index:100;/* Always needed	*/
		position:absolute;	/* Always needed	*/
		background-color:#F00;	/* White background color for the message */
		color:#FFF;
	}
	.modalDialog_contentDiv_error a{
		color:#FFF;
	}
	h1{
		margin-top:0px;
	}
 
	</style>	
	<script type="text/javascript">
	function verify(ver){
		
		if(ver){
			// Confirmed message, i.e. clicked on "Yes"
			alert('Message confirmed');
		}else{
			// Clicked on "No"
			alert('Message not confirmed');
		}
	}
	</script>
	<link rel="stylesheet" href="css/modal-message.css" type="text/css">
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript" src="js/modal-message.js"></script>
	<script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
</head>
<body>
	<form>
	<div id="header">
		<img src="/images/heading3.gif">
	</div>	
	<div id="mainContainer">
		<p>This is a demo of the DHTML_modalMessage class. It displays a message at the center of the screen and disables all other page controls until the message is closed.</p>
		<a href="#" onclick="displayMessage('includes/demo-modal-message-1.inc');return false">Message from url (example 1)</a><br> 
		<a href="#" onclick="displayMessage('includes/demo-modal-message-2.inc');return false">Message from url (example 2)</a><br> 
		<a href="#" onclick="displayMessage('includes/demo-modal-message-3.inc');return false">Alternative confirm dialog (example 3)</a><br> 
		<p>The content of the two boxes above are loaded from external files. We have also specified that we want a drop shadow on them</p>
		<a href="#" onclick="displayStaticMessage('<h1>Static message</h1><p>This is a static message</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Close</a>',false);return false">Static message (Example 1)</a><br>
		<a href="#" onclick="displayStaticMessage('<h1>Error message</h1><p>This is a static message with a different layout(css class)</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Close</a>','modalDialog_contentDiv_error');return false">Static message (Example 2 - different layout)</a>
		<p>These last boxes are displaying static HTML. There are no shadows on these boxes. The last message box is assigned to a different CSS class than 
		the other messages. This gives it a different look.</p>
		<div class="clear"></div>	
	</div>
	</form>
<form name="form1" method="post" action="">
  <label>
    <select name="select" id="select">
    </select>
  </label>
</form>
<script type="text/javascript">
messageObj = new DHTML_modalMessage();	// We only create one object of this class
messageObj.setShadowOffset(5);	// Large shadow
 
 
function displayMessage(url)
{
	
	messageObj.setSource(url);
	messageObj.setCssClassMessageBox(false);
	messageObj.setSize(400,200);
	messageObj.setShadowDivVisible(true);	// Enable shadow for these boxes
	messageObj.display();
}
 
function displayStaticMessage(messageContent,cssClass)
{
	messageObj.setHtmlContent(messageContent);
	messageObj.setSize(300,150);
	messageObj.setCssClassMessageBox(cssClass);
	messageObj.setSource(false);	// no html source since we want to use a static message here.
	messageObj.setShadowDivVisible(false);	// Disable shadow for these boxes	
	messageObj.display();
	
	
}
 
function closeMessage()
{
	messageObj.close();	
}
 
 
</script>
</body>
</html>

Open in new window

0
Comment
Question by:Panos
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
12 Comments
 
LVL 5

Accepted Solution

by:
sscotti earned 300 total points
ID: 24380187
If you don't mind hiding the select box form when you pop the window you could add this code:

<form name="form1" id="form1" method="post" action="">
  <label>
    <select name="select" id="select">
    </select>
  </label>
</form>
<script type="text/javascript">
messageObj = new DHTML_modalMessage();  // We only create one object of this class
messageObj.setShadowOffset(5);  // Large shadow
 
 
function displayMessage(url)
{
       
        messageObj.setSource(url);
        messageObj.setCssClassMessageBox(false);
        messageObj.setSize(400,200);
        messageObj.setShadowDivVisible(true);   // Enable shadow for these boxes
        messageObj.display();
            document.getElementById('form1').style.visibility = 'hidden';
}
 
function displayStaticMessage(messageContent,cssClass)
{
        messageObj.setHtmlContent(messageContent);
        messageObj.setSize(300,150);
        messageObj.setCssClassMessageBox(cssClass);
        messageObj.setSource(false);    // no html source since we want to use a static message here.
        messageObj.setShadowDivVisible(false);  // Disable shadow for these boxes      
        messageObj.display();
       
       
}
 
function closeMessage()
{
        messageObj.close();
      document.getElementById('form1').style.display = 'visible';    
}
0
 
LVL 5

Assisted Solution

by:sscotti
sscotti earned 300 total points
ID: 24380204
Sorry, the closeMessage() function should be:

function closeMessage()
{
        messageObj.close();
      document.getElementById('form1').style.visibility = 'visible';    
}
0
 
LVL 9

Assisted Solution

by:ftaco96
ftaco96 earned 200 total points
ID: 24380219
dojo is a really good soloution. My team uses dojo tooltips, which have no problem with IE 6 select boxes.

http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Dialog.html
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:Panos
ID: 24382457
Hi.
As i was checking out the solutions the only way is to hide the select boxes or the forms where there are in.The dojotoolkit is hidding the selectboxes only in ie6 and in f.f it is working without problems.
0
 
LVL 2

Author Comment

by:Panos
ID: 24382475
Before i close the question please a little more help from sscotti:
How can i use the script i posted in FF and IE7.... and the solution you posted in IE6 with if...?
0
 
LVL 5

Expert Comment

by:sscotti
ID: 24383381
I have a little trouble testing in IE6.  I have a Mac and use Parallels for Windows.  However, it does work in IE6, IE7 in Parallels and in FF on the Mac for me.  It is on my server at http://sscotti.com/modal-message/test.html if you want to try it there.
0
 
LVL 2

Author Comment

by:Panos
ID: 24384806
Hi sscotti.
I know.It is working for me too.As i said it is hiddind the form.
The last question was if i could use the code without the hidding function(the first code i posted in the question) when a client has FF or IE7 ,and the code you posted for client with IE 6.Is this possible?
0
 
LVL 5

Expert Comment

by:sscotti
ID: 24384942
Not sure I understand.  If it works for all browsers why not just use it.  If there is some other reason you could check the browser agent using javascript and conditionally execute the code to hide the select list if the browser agent is IE6.  
0
 
LVL 2

Author Comment

by:Panos
ID: 24385124
Because i'm using these in a search form with many many select boxes it is not so good.It is like the half page in backround is disappearing.
So i prefer that what you said: conditionally execute the code to hide the select list if the browser agent is IE6.
If you want you can answer here or i have to make a new question.
0
 
LVL 2

Author Comment

by:Panos
ID: 24385275
Thank you
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 31581002
Thank you all for your help
regards
Panos
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question