I am having an issue with IE6 not showing scroll bars, IE7 and firefox work correctly

Discussion in 'CSS' started by dot45, Jan 8, 2008.

  1. #1
    body {
      font-family:arial, helvetica, sans-serif;
      font-size:9pt;
      margin:0;
      padding:0;
    }
    
    * { position:relative;}
    
    table input { width: auto; height: auto; }
    
    img, fieldset { border:None; }
    fieldset {
      clear:both;
      margin:0;
      padding:2px 0 2px 0;
    }
    
    .btn, .btn a {
      display:block;
      width:134px !important;
      height:27px;
      border:none;
      font-family:arial, helvetica, sans-serif !important;
      line-height:27px !important;
      background:url(../images/button.jpg) top left no-repeat;
      text-align:center;
      color:#fff !important;
      font-weight:bold;
      text-decoration:none;
      padding:0;
      margin:0;
    }
    
    form .btn {
      padding-bottom:4px;
    }
    
    h1, h2, h3 {
      font-weight:normal;
      margin:0;
      padding:0;
    }
    
    th {
      font-weight:bold;
      text-align:left;
      padding-left:3.5px;
    }
    
    #container {
      width:725px;
      margin:5px auto 0 auto;
      border:1px solid;
    }
    
      #header {
        padding:0 10px 0 0;
        height:64px;
        border-bottom:1px solid;
        overflow:auto;
      }
    
      #footer {
        height:24px;
        border-top:1px solid;
        border-bottom:1px solid;
        text-align:center;
        overflow:auto;
      }
    
        #logo { 
          width:222px;
          height:64px;
          display:block;
          float:left;
        }
    
        #header p {
          width:300px;
          float:right;
          font-size:10px;
          line-height:10px;
          height:10px;
          text-transform:uppercase;
          text-align:right;
          padding-bottom:5px;
        }
        
      #nav {
        clear:both;
      }
       
        #nav {
          clear:both;
          margin:0;
          padding:0 40px 0 0;
          height:24px;
          border-bottom:1px solid;
        }
        
        #nav li {
          list-style:none;
          margin:0;
          padding:0;
          display:inline;
        }
        
        #nav li a {
          height:24px;
          line-height:24px;
          display:block;
          float:left;
          padding-left:25px;
          margin:0 10px 0 10px;
          text-decoration:none;
          font-weight:bold;
          float:right;
        }
    
        #nav a.home { background:url(../images/home.gif) 0 5px no-repeat; }
        #nav a.new_ticket { background:url(../images/new_ticket.gif) 0 5px no-repeat; }
        #nav a.my_tickets { background:url(../images/my_tickets.gif) 0 5px no-repeat; }
        #nav a.ticket_status { background:url(../images/ticket_status.gif) 0 5px no-repeat; }
        #nav a.log_out { background:url(../images/logout.gif) 0 5px no-repeat; }
       
      #content {
          clear:both;
          padding:2px 10px 10px 10px;
          line-height:14pt;
          margin:5px auto 5px auto;
      }
      
        #content #index {
          width:525px; /* Enable to center the forms */
          margin:10px auto 10px auto;
        }
        
        #index .box {
          width:252px;
          float:left;
        }
        
        #index .box p {
            clear:both;
            padding-top:10px;
            text-align:justify;
        }
        
        #content form {
          margin:0;
          padding:0;
        }
        
          #content form label {
            display:block;
            width:60px;
            padding-right:10px;
            text-align:right;
            float:left;
            font-weight:bold;
          }
          
          #content #index form input {
            width:175px;
            float:left;
          }
            
        #content #bar {
          width:21px;
          height:auto;
          display:block;
          float:left;
       }
       
       #ticketform {
         padding:20px 20px 50px 20px;
         width:600px;
         margin:20px auto 20px auto;
         border:1px solid;
       }
       
       #loginform {
         padding:20px 20px 50px 20px;
         width:400px;
         margin:20px auto 20px auto;
         border:1px solid;
       }
       
       #ticketform input, #ticketform select {
         width:300px;
         float:left;
       }
    
       #loginform input {
         width:160px;
         float:left;
       }
          
       #ticketform label {
         width:130px;
         text-align:right;
         display:block;
         float:left;
         padding-right:10px;
       }
       
       #loginform label {
         width:130px;
         text-align:right;
         display:block;
         float:left;
         padding-right:10px;
       }
       
       #ticketform textarea {
         width:400px;
       }
       
       #ticketform .ticketsubmit {
         margin-left:410px;
       }
       
       #loginform .ticketsubmit {
         margin-left:170px;
       }
    
       
      #powered_by {
          clear:both;
          display:block;
          width:126px;
          height:23px;
      }
       
    
    .error {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        text-decoration: none;
        border: none;
        font-weight: bold;
    }
    
    .msg {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13.5px;
        text-decoration: none;
        font-weight: bold;
    }
    
    
    #infomessage, #warnmessage, #errormessage {
        margin-bottom: 1.5em;
        padding: 0.3em;
        font-weight: bold;
        border-top: 1px solid;
        border-bottom: 1px solid;
    }
    
    
    /* Buttons  */
    .button {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        margin: 5px;
        border: 1px solid;
    }
        
    /* Generic CSS based Icons. use=> <tag class="Icon iconname">text</tag> */
        
    .Icon {
            
        width: auto;
        padding-left:20px;
        background-position: left center;
        background-repeat: no-repeat;
        color:#006699; 
        text-decoration: none;
    }
    
    a.Icon { }
       
    a.Icon:hover {
        text-decoration: underline;    
    }
    
        
    .Icon.Ticket { background:url(../images/icons/ticket.gif) 0 2px no-repeat; }
    .Icon.webTicket { background:url(../images/icons/ticket_source_web.gif) 0 2px no-repeat; }
    .Icon.emailTicket { background:url(../images/icons/ticket_source_email.gif) 0 2px no-repeat; }
    .Icon.phoneTicket { background:url(../images/icons/ticket_source_phone.gif) 0 2px no-repeat; }
    
    
    .Icon.attachment { background-image: url(../images/icons/attachment.gif); }
    .Icon.file { background-image: url(../images/icons/attachment.gif); }
    .Icon.refresh { background-image: url(../images/icons/refresh.gif); }   
    .Icon.thread {
        font-weight: bold;
        font-size: 1em;
        background-image: url(../images/icons/thread.gif);
    }
    
    /* Ticket view (Messages and Responses) */
    #ticketthread table.message {
        margin:10px 0 5px 0;
    }
    
    #ticketthread table.response {
        margin-bottom:5px;
    }
    
    table.message, table.response {
        border: 1px solid;
        border-bottom: none;
    }
    
    table.message td, table.message th,table.response td, table.response th {
        border-bottom:1px solid;
        padding:5px;
    }
    
    table.message tr.header td, table.response tr.header td {
        padding:1px;
        padding-left:5px;
    }
    
    table.message th, table.response th {
        line-height:24px;
        font-size:12px;
        padding:1px;                
        padding-left:5px;
        font-weight:bold;
    }
    
    Code (markup):
    I have included the php file below

    If i change the position from relative to fixed, IE6 displays correctly but firefox and IE7 wont.
     
    dot45, Jan 8, 2008 IP
    Dollar likes this.
  2. dot45

    dot45 Peon

    Messages:
    4
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here is the open.php file that i am specifically having the issue with.

    <?php
    $title=($cfg && is_object($cfg))?$cfg->getTitle():'osTicket :: Support Ticket System';
    
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title><?=$title?></title>
        <link rel="stylesheet" href="./styles/main.css" media="screen">
        <link rel="stylesheet" href="./styles/colors.css" media="screen">
    </head>
    <body>
    <div id="container">
        <div id="header">
            <a id="logo" href="index.php" title="Support Center"><img src="./images/logo2.jpg" border=0 alt="Support Center"></a>
            <p><span>SUPPORT TICKET</span> SYSTEM</p>
        </div>
        <ul id="nav">
             <?                    
             if($thisclient && $thisclient->isValid()) {?>
             <li><a class="log_out" href="logout.php">Log Out</a></li>
             <li><a class="my_tickets" href="view.php">My Tickets</a></li>
             <?}else {?>
             <li><a class="ticket_status" href="view.php">Ticket Status</a></li>
             <?}?>
             <li><a class="new_ticket" href="open.php">New Ticket</a></li>
             <li><a class="home" href="index.php">Home</a></li>
        </ul>
        <div id="content">
    
    PHP:
     
    dot45, Jan 8, 2008 IP
  3. dot45

    dot45 Peon

    Messages:
    4
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I have resolved the issue.

    In main.css I made the following changes.

    Change

    body {
      font-family:arial, helvetica, sans-serif;
      font-size:9pt;
      margin:0;
      padding:0;
    }
    
    * { position:relative; }
    Code (markup):
    to


    body {
      font-family:arial, helvetica, sans-serif;
      font-size:9pt;
      margin:0;
      padding:0;
      text-align:center;
    }
    
    /* * { position:relative; } [comment out or delete]*/change
    Code (markup):
    and

    #container {
      width:760px;
      margin:5px auto 0 auto;
      border:1px solid;
    }
    Code (markup):
    to

    #container {
      width:760px;
      margin:5px auto 0 auto;
      border:1px solid;
      text-align:left;
    }
    Code (markup):
     
    dot45, Jan 10, 2008 IP