Ir para conteúdo
Fórum Script Brasil
  • 0

Barra do IE não aparece


Edvaldo Pereira

Pergunta

Boa noite galera! Viva o CSS!!!!!

Galera to fazendo um sistema de ticket online e ta tudo otimo estou testando no firefox e no IE, só que estou com um problema no meu arquivo main.css, quando a página é muito extensa aparece a barra de rolagem vertical normalmente no firefox mas o mesmo não acontece no IE. E sem isso meu sistema não vale nada. Afinal o conteúdo da página fica quebrado já que no IE não aparece a barra. Vou postar aqui um arquivo de exemplo.

arquivo: view.html

<!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=iso-8859-1">

<title>SAOL :: Suporte</title>

<link rel="stylesheet" href="main.css" media="screen">

<link rel="stylesheet" href="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">

<li><a class="log_out" href="logout.php">Sair</a></li>

<li><a class="my_tickets" href="view.php">Meus Ticket's</a></li>

<li><a class="new_ticket" href="open.php">Novo Ticket</a></li>

<li><a class="home" href="index.php">Home</a></li>

</ul>

<div id="content">

<table width="100%" cellpadding="1" cellspacing="0" border="0">

<tr><td colspan=2 width=100% class="msg">

Ticket #762686 &nbsp;<a href="view.php?id=762686" title="Reload"><span class="Icon refresh" /></a></td></tr>

<tr>

<td width=50%>

<table align="center" class="infotable" cellspacing="1" cellpadding="3" width="100%" border=0>

<tr>

<th width="100" >Ticket Status:</th>

<td>closed</td>

</tr>

<tr>

<th>Departamento:</th>

<td>Support</td>

</tr>

<tr>

<th>Criado em:</th>

<td>01/04/2008 9:13 am</td>

</tr>

</table>

</td>

<td width=50% valign="top">

<table align="center" class="infotable" cellspacing="1" cellpadding="3" width="100%" border=0>

<tr>

<th width="100">Nome:</th>

<td>Edvaldo Pereira</td>

</tr>

<tr>

<th width="100">Email:</th>

<td>nadoguirra@hotmail.com</td>

</tr>

<tr>

<th>Fone:</th>

<td>(749) 991-2928</td>

</tr>

</table>

</td>

</tr>

</table>

<div class="msg">Assunto: Teste do OSTicket</div>

<div>

</div>

<br>

<div align="left">

<span class="Icon thread">Ticket Mensagem</span>

<div id="ticketthread">

<table align="center" class="message" cellspacing="0" cellpadding="1" width="100%" border=0>

<tr><th>Fri, Jan 4 2008 9:13am</th></tr>

<tr class="info">

<td>Nado e ai este negocio parece que é ruim hein?</td></tr>

</table>

<table align="center" class="response" cellspacing="0" cellpadding="1" width="100%" border=0>

<tr>

<th>Fri, Jan 4 2008 9:17am&nbsp;-&nbsp;Admin</th></tr>

<tr class="info">

<td> Aqui funcionou vamos vê se você vai receber a resposta do OSTIcket.</td></tr>

</table>

<table align="center" class="message" cellspacing="0" cellpadding="1" width="100%" border=0>

<tr><th>Fri, Jan 4 2008 9:44pm</th></tr>

<tr class="header"><td><a class='Icon file' href='attachment.php?id=2&ref=8e95860f51c418faabe6d6648051dfa0'><b>help_imagem.jpg</b></a>&nbsp;(<i>472 bytes</i>)&nbsp;&nbsp;</td></tr>

<tr class="info">

<td>ok. Funcionou beleza. Só falta a barra de rolagem no IE.</td></tr>

</table>

<table align="center" class="response" cellspacing="0" cellpadding="1" width="100%" border=0>

<tr>

<th>Fri, Jan 4 2008 10:28pm&nbsp;-&nbsp;Admin</th></tr>

<tr class="info">

<td> Vou verificar no forum do OSTicket lá deve ter a solução.</td></tr>

</table>

</div>

</div>

<div>

<div align="center">

</div>

<div id="reply" style="padding:10px 0 20px 40px;">

<div class="msg">O Ticket será reaberto se respostar</div>

<form action="view.php?id=762686#reply" name="reply" method="post" enctype="multipart/form-data">

<input type="hidden" name="id" value="762686">

<input type="hidden" name="respid" value="2">

<input type="hidden" name="a" value="postmessage">

<div align="left">

Respostar Mensagem <font class="error">*&nbsp;</font><br/>

<textarea name="message" id="message" cols="60" rows="7" wrap="soft"></textarea>

</div>

<div align="left">

Anexar Arquivo<br><input type="file" name="attachment" id="attachment" size=30px value="" />

<font class="error">&nbsp;</font>

</div>

<div align="left" style="padding:10px 0 10px 0;">

<input class="button" type='submit' value='Enviar Resposta' />

<input class="button" type='reset' value='Reset' />

<input class="button" type='button' value='Cancelar' onClick='window.location.href="view.php"' />

</div>

</form>

</div>

</div>

<br><br>

<div style="clear:both"></div>

</div>

<div id="footer">Copyright &copy; osTicket.com. All rights reserved</div>

<div align="center">

<!-- As a show of support, we ask that you leave powered by osTicket link to help spread the word. Thank you! -->

<a id="powered_by" href="http://osticket.com"><img src="./images/poweredby.jpg" width="126" height="23" alt="Powered by osTicket"></a></div>

</div>

</body>

</html>

Arquivo: main.css

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:760px;

margin:5px auto 0 auto;

border:1px solid;

}

#header {

padding:0 10px 0 0;

height:64px;

border-bottom:1px solid;

overflow:none;

}

#footer {

height:24px;

border-top:1px solid;

border-bottom:1px solid;

text-align:center;

overflow:none;

}

#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;

}

Arquivo: colors

/* default text and background colors */

body {

color:#333;

background-color: #fff;

background-image: url(../images/bg.gif);

background-repeat: repeat;

}

/* default link color */

a { color:#006699; text-decoration: none; }

/* default link hover color */

a:hover { color:#DB8606; text-decoration: none; }

#container {

background:#fff;

border-color:#ccc;

}

#loginform, #ticketform {

background:#f1f1f1;

border-color:#ccc;

}

/* bottom border of header */

#header {

border-color:#000;

}

/* "SUPPORT TICKET SYSTEM" default text */

#header p {

color:#666;

}

/* "SUPPORT TICKET" color */

#header p span {

color:#fe7700;

}

/* top nav background and bottom border */

#nav {

background:#f1f1f1;

border-color:#ccc;

}

/* nav link color */

#nav li a {

color:#006699;

font-weight:bold;

}

/* nav link hover color */

#nav a:hover {

color:#fe7700;

}

/* footer background and border */

#footer {

background:#f1f1f1;

border-color:#ccc;

}

/* Headings */

h1 {

color:#fe7700;

}

h2 {

color:#333;

}

h3 {

color:#666;

}

/* Data Table */

table.tgrid {

border-left: 1px solid;

}

table.tgrid td {

border:1px solid;

border-top:none;

border-left:none;

}

table.tgrid th {

color: #FFF;

font-size: 12px;

font-weight:bold;

}

table.tgrid, table.tgrid td, table.tgrid th {

border-color:#ADADAD;

}

/* Table headings */

table.tgrid th {

background:#ADADAD;;

color:#FFF;

}

table.tgrid th a, table.tgrid th a:hover {

color:#FFF;

text-decoration:underline;

}

/* row highlighting on hover */

.tgrid tr:hover td { background-color: #FFFFDD; }

/* Alt rows used on most data tables */

.row1 { background-color: #F4FAFF; }

.row2 { background-color: #FFFFFF; }

/* auto-highlight */

.row1.highlight td,.row2.highlight td {

background-color: #FFFFDD;

}

/* mesages, warning and errors */

.error {

color: #FF0000;

}

.msg {

color:#006699;

}

#infomessage {

background-color: #390;

border-color: #390;

color: #390;

background: #CFC;

}

#errormessage {

border-color: #903;

background-color: #fcc;

color: #903;

}

#warnmessage {

border-color: #fad163;

background-color: #fdedc1;

}

/* Input buttons/submits colors*/

.button {

background-color: #DB8606;

color: #FFF;

border-color: #666;

}

/* Assorted number of tables used on view ticket.*/

table.infotable td, table.infotable th {

background-color: #F4FAFF;

}

table.infotable th {

font-weight:bold;

text-align:left;

padding-left:3px;

}

/* Response & message background */

table.message, table.response {

border-color:#ADADAD;

}

/* Message title */

table.message th {

background-color: #C3D9FF;

}

/* Response title */

table.response th {

background-color: #FFE0B3;

}

/* message & response header */

table.message tr.header td, table.response tr.header td {

background-color: #EFEFEF;

border-color:#ccc;

}

/* table cells bg */

table.message td, table.response td {

background-color: #FAFAFA;

}

E é isso ai galera, eu só preciso que a barra apareça sem perder nada na formatação do meu CSS.

Espero contar com a ajuda de vocês obrigado.

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...