SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    USA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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!

  2. #2
    BLYAT! theGWS's Avatar
    Join Date
    Jun 2001
    Location
    Melbourne, AU & Seattle, WA
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ~Dorian

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    USA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, it works in those browsers, but not in Internet Explorer 6.0. That's where my problem lies

  4. #4
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  6. #6
    SitePoint Member
    Join Date
    Aug 2004
    Location
    USA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •