Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

nadoweb

Barra do IE não aparece

Por , em Desenvolvimento frontend

Recommended Posts

nadoweb    0

nadoweb
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito