Text hidden in DIV in IE 6.0, works fine in Mozilla and IE on MAC.

**sponk** · Aug 20, 2004, 14:29

For some reason, in IE 6.0 the text "Please login below to manage the website" is not shown on http://www.datalist.org/control_room/ and the div layer looks messed up with the submit button overlapping, however, it shows correctly in firefox and IE on MAC.
I would appreciate any input, thanks!

**theGWS** · Aug 24, 2004, 18:46

I'm not sure what input you're looking for, but it looks perfect in Safari 1.2.3, Netscape 7.1, and Opera 6.0.3 for Mac, though Opera does have this strange half-of-a-box black line around the 'Login' button.

**sponk** · Aug 24, 2004, 20:18

Thanks for the reply, it works in those browsers, but not in Internet Explorer 6.0. That's where my problem lies

**mediaman_12** · Aug 25, 2004, 01:09

Can you sort of 'select' the text?
If you can then it's probbaly due to IE's love of
position:relative;
Try adding that to the verious classes and see if it fixes it.

**Paul O'B** · Aug 25, 2004, 04:42

Hi,

You need to clear the float on the submit button, add position relative to the paragra[ph text and set about the default margins with a big stick.

Something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1...ansitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Control Room - Content Management System</title>
<meta http-equiv="Content-Language" content="en-us"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<style type="text/css">
/* Type CSS rules here and they will be applied
to pages from 'editcss'
immediately as long as you keep this window open. */
/**** LINK-tag style sheet design.css ****/
/* CMS Design i.e. body, input boxes, tables, img... */
body, table, td, pre {
 font-size:10px;
 color:#000000;
 font-family: verdana, arial,sans-serif;
}
br {
 clear: left;
}
img {
 border: 0px none;
}
table {
 padding: 0px;
 border: 0px;
 border-spacing: 0px;
 border-collapse: collapse;
 /*width: 100%;*/
}
.red {
 color: #FF6633;
}
select, .input, .input4, textarea {
 border: 1px solid #88A0C8;
 font-family: verdana, arial,sans-serif;
 font-size: 11px;
 color: #003068;
 text-decoration: none;
 background-color: #E9EDF0;
}
.input4 {
 border: 1px solid #800000 !important;
 background-color: #DFE3E6 !important;
}
.input:focus, select:focus, textarea:focus {
 border: 1px solid #800000;
 background-color: #DFE3E6;
}
.submit_btn {
 font-family: verdana, arial,sans-serif;
 font-size: 11px;
 color: #333333;
 border-left-style: solid;
 border-left-width: 1px;
 border-top-style: solid;
 border-top-width: 1px;
 padding: 0px;
 background-color: #F1F1F1;
}
label {
 display: block;
 width: 75px;
 float: left;
 margin-bottom: 10px;
 text-align: right;
 padding-right: 20px;
}
label.forgot_password {
 width: 187px;
}
.folderselected {
 background-color: #DFE3E6;
 z-index: auto;
}
.folderunselected {
 background-color: #E9EDF0;
 z-index: auto;
}

/**** LINK-tag style sheet links.css ****/
/* CMS Links */
a, a:link,  a:visited, a:active {
 text-decoration: none;
 color: #336699;
}
a:hover {
 text-decoration: underline;
 color: #FF6633;
}
div#menu a, div#menu a:link, div#menu  a:active, div#menu a:visited {
 text-align: center;
 text-decoration: none;
 color: #003068;
 padding: 2px;
 border: solid 1px #F1F1F1;
}
div#menu a:hover {
 text-align: center;
 text-decoration: none;
 color: #003068;
 padding: 2px;
 border: solid 1px #88A0C8;
 background-color:#E9EDF0;
}

/**** LINK-tag style sheet layout.css ****/
/* CMS Layout ... DIVS, TABLES etc */
div#container {
 clear: left;
 width: 750px;
 margin: 0 auto;
 padding: 0;
 text-align: left;
}
div#overDiv {
 position:absolute;
 visibility:hidden;
 z-index:1000;
}
table#main {
 width: 745px;
}
div#main-content table {
 width: 100%;
}
table#content {
 padding: 1px;
 border: 1px;
 border-color: #C0C0C0;
 border-style: solid;
 /*border-spacing: 1px;*/
 background-color: #F1F1F1;
 text-align: left;
 width: 100%;
position:relative;
}
table#content td.left, table#content td.input_left {
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-right: 1px solid #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
 margin: 0; padding: 5px; 
 width: 5%;
 background-color: #F9F9F9;
 text-align: center;
}
table#content td.input_left {
 width: 20%;
 text-align: right;
 vertical-align: top;
}
table#content td.right, table#content td.input_right {
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
 background: none #E9EDF0;
 margin: 0; padding: 5px;
 width: 95%;
}
table#content td.input_right {
 width: 80%;
}
div#top-right {
 float: right;
 height: 87px;
 width: auto;
 text-align: left;
 padding: 5px;
}
/*div#info {
 float: right;
 text-align: right;
 vertical-align: middle;
}*/
div#menu, div#error_msg, div#msg, div#debug, div#collapseobj_create_new_folder {
 padding: 7px;
 border: 1px;
 border-color: #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
 background-color: #F1F1F1;
}
div#error_msg {
 background-color: #DFE3E6;
 color: #9C3E00;
}
div#msg {
 background-color: #DFE3E6;
 color: #008000;
}
div#debug {
 background-color: #FFFFCC;
 color: #CC6600;
}
div#content {
 padding: 0px;
 border: 1px;
 border-color: #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
 background-color: #F1F1F1;
}
div#breadcrumbs {
 padding: 3px;
 padding-top: 10px;
 padding-bottom: 10px;
 font-weight: bold;
}
div#table-row, div.table-row {
  background: none; border: solid #000000 0px; color: #000000;
  margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
  padding: 0; text-align: center; width: 100%;
}
/* Main Folder Display */
div#left-folder {
  border: none; float: left; margin: 0; padding: 0; width: 5%;
}
div#folder-info {
  border: none; float: left; margin: 0; padding: 0; width: 95%;
}
div#space-line {
  clear: both; margin: 0; padding: 0; width: auto; height: auto;
}
div#left-folder1 {
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-right: 1px solid #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
  margin: 0; padding: 5px;
  font-style: normal; font-size: 1em; text-align: center; text-indent: 0;
  width: auto;
}
div#folder-info1 {
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
 background: none #E9EDF0;
  margin: 0; padding: 7px;
  font-style: normal; font-size: 1em; text-align: left; text-indent: 0;
  width: auto;
}
div#folder-name {
 font-size: 12px;
 font-weight: bold;
}
/* End Main Folder Display */
/* Files Display */
td#files_name {
  border: none; float: left; margin: 0; padding: 0; width: 30%;
}
td#files_title {
  border: none; float: left; margin: 0; padding: 0; width: 50%;
}
td#files_tools {
  border: none; float: left; margin: 0; padding: 0; width: 20%;
}
td#no_files {
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
 margin: 0; padding: 5px;
 font-style: normal;
 font-size: 1em;
 text-align: left;
 text-indent: 0;
 width: auto;
}
tr.lightgrey {
 background-color: #F9F9F9;
}
#files_name1, #files_title1, #files_hname, #files_htitle, #files_htools, #files_tools1 {
 spacing: 1px;
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-right: 1px solid #C0C0C0;
 border-style: solid;
 margin: 0; padding: 5px;
 font-style: normal;
 font-size: 1em;
 text-align: left;
 text-indent: 0;
 width: auto;
}
#files_hname, #files_htitle, #files_htools {
 font-weight: bold;
}
#files_htools {
 border-right: 0px;
}
#files_tools1 {
 border-right: 0px;
 padding: 2px;
 padding-top: 3px;
}
/* End Files Display */
/* Admin Display */
td#admin_name, td#admin_email, td#admin_status, td#admin_tools {
  border: none; float: left; margin: 0; padding: 0; width: 25%;
}
#admin_name1, #admin_email1, #admin_status1, #admin_tools1, #admin_hname, #admin_hemail, #admin_hstatus, #admin_htools {
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-right: 1px solid #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
 margin: 0;
 padding: 5px;
 font-style: normal;
 font-size: 1em;
 text-align: left;
 text-indent: 0;
 width: auto;
}
#admin_hname, #admin_hemail, #admin_hstatus, #admin_htools {
 font-weight: bold;
}
#admin_htools {
 border-right: 0px;
}
#admin_tools1 {
 border-right: 0px;
 padding: 2px;
 padding-top: 3px;
}
/* End Admin Display */
/* Input Fields Display */
#input_field_name {
  border: none; float: left; margin: 0; padding: 0; width: 20%; height: auto;
}
#input_field_text {
  border: none; float: left; margin: 0; padding: 0; width: 80%; height: auto;
}
#input_field_name1 {
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-right: 1px solid #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
   margin: 0;
 padding: 5px;
   font-style: normal;
   font-size: 1em;
   text-align: right;
   text-indent: 0;
   width: auto;
   height: 100%;
}
#input_field_text1 {
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-style: solid;
 background: none #E9EDF0;
 border-spacing: 1px;
 margin: 0;
 padding: 5px;
 font-style: normal;
 font-size: 1em;
 text-align: left;
 text-indent: 0;
 width: auto;
 height: 100%;
}
/* End Input Fields Display */
div#help, div#info, div#collapseobj_forgot_password {
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
 background-color: #E9EDF0;
 margin: 0;
 padding: 5px;
 /*font-style: normal;
 font-size: 1em;*/
 text-align: left;
 text-indent: 0;
 width: auto;
}
.no_data {
 border: 0px none;
 border-bottom: 1px solid #C0C0C0;
 border-style: solid;
 border-spacing: 1px;
 margin: 0;
 padding: 5px;
 text-align: center;
 text-indent: 0;
 width: auto;
}
div#collapseobj_forgot_password {
 border-left: 1px solid #C0C0C0;
 background-color: #F9F9F9;
}
div#footer {
 padding: 5px;
 clear:both;
}
.input,.submit_btn {
 display: block;
 /*width: 150px;*/
 float: left;
 margin-bottom: 10px;
}
 form {margin:0;padding:0}
table  p {position:relative;margin:10px 0;}
.clearer {
 height:1px;
 overflow:hidden;
 clear:both;
}
</style>
<script type="text/javascript" src="http://www.datalist.org/control_room/include/js/collapse_expand.js"></script>
<script type="text/javascript" src="http://www.datalist.org/control_room/include/js/functions.js"></script>
<script type="text/javascript" src="http://www.datalist.org/control_room.../js/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
</head>
<body>
<div id="overDiv"></div>
<div id="container" ><img alt="Control Room - Content Management System" border="0" src="http://www.datalist.org/control_room...-room-logo.gif" width="74" height="87" vspace="5"/><img alt="Control Room - Advanced Content Management System" border="0" src="http://www.datalist.org/control_room...-room-text.gif" width="214" height="31" vspace="30" hspace="20"/> 
  <div id="breadcrumbs"><span class="red">»</span> Control Room <span class="red">»</span> 
	Login</div>
  <div id="main-content">
	<table id="content" >
	  <tr>
		<td colspan="2"> 
  
  <div id="collapseobj_forgot_password" style="display: none;float: right;"> 
			<p><b>Password Reminder</b></p>
			<form action="" method="post">
			  <input type="hidden" name="PHPSESSID" value="cecf6a654b04ba60c8841a14466481e6" />
			  <label for="email" class="forgot_password">Please enter your email 
			  address:</label>
			  <input id="email" name="email" size="25" class="input"/>
			  <br/>
			  <label for="sendpassword" class="forgot_password"></label>
			  <input type="submit" value="send my password" id="sendpassword" name="sendpassword" class="submit_btn"/>
			  <br/>
			</form>
		  </div>
		  
	
	<div id="info" >
			<p>Please login below to manage the website.</p>
			<form action="" method="post">
			  <input type="hidden" name="PHPSESSID" value="cecf6a654b04ba60c8841a14466481e6" />
			  <label for="uid">Username:</label>
			  <input id="uid" name="uid" class="input" type="text"/>
			  <br/>
			  <label for="pwd">Password:</label>
			  <input id="pwd" name="pwd" class="input" type="password"/>
			  <br/>
			  <label for="remember_me"></label>
			  <input type="checkbox" id="remember_me" name="remember_me" value="ON" checked/>
			  Remember me<br/>
			  <label for="sublogin"></label>
			  <input type="submit" value="login" id="sublogin" name="sublogin" class="submit_btn"/>
			  <br/>
			</form>
		  <div class="clearer"></div>
	</div></td>
	  </tr>
	  <tr> 
		<td colspan="2" ><div id="footer">Control Room Powered by CheckURL</div></td>
	  </tr>
	</table>
  </div>
  <br/>
</div>
</body>
<script type="text/javascript">
<!--
 init_cms();
//-->
</script>
</html>

Paul

**sponk** · Aug 25, 2004, 08:56

Wow, that worked. Thanks for the source example Paul and mediaman, yes it was exactly that 'select' issue. I have added "position: variables" elements to some tags and now it works perfectly.

Thanks again for all your help, greatly appreciated.

The SitePoint Forums have moved.

User Tag List

Thread: Text hidden in DIV in IE 6.0, works fine in Mozilla and IE on MAC.

Thread Tools

Display

Text hidden in DIV in IE 6.0, works fine in Mozilla and IE on MAC.

Bookmarks

Bookmarks

Posting Permissions