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.
Pergunta
Edvaldo Pereira
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 <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 - 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> (<i>472 bytes</i>) </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 - 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">* </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"> </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 © 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.