IE 9 "duplicando" classes CSS

  • Rodrigo RDA
  • Avatar de Rodrigo RDA Autor do Tópico
  • Offline
  • JCB! Novato
  • JCB! Novato
Mais
6 anos 10 meses atrás #80156 por Rodrigo RDA
Rodrigo RDA created the topic: IE 9 "duplicando" classes CSS
Boa noite galera!

Estou fazendo meu primeiro site em Joomla 2.5.6 (ou seja, sou novato nesta área de Web Designer) e estou com um problema que não estou conseguindo resolver de forma alguma:

Estou utilizando o módulo Roksprocket (um excelente módulo, por sinal) mas, devido a uma necessidade, precisei acrescentar o seguinte código no arquivo 'index.php' dele (foi a segunda DIV que eu adicionei, a "sprocket-titulo", a 1º e a ultima linhas são padrões do módulo e eu copiei aqui só para vocês verem o que vem antes e depois do código que eu inseri):
<div class="sprocket-lists" data-lists="<?php echo $parameters->get('module_id'); ?>">
     

	<div class="sprocket-titulo">
		<?php echo "Vamos Orar<br>"; ?>
	</div>


	<ul class="sprocket-lists-container" data-lists-items>

Até aí tudo bem, da maneira acima funcionou normal no IE9, Firefox e Chrome. Porém agora preciso que a frase "Vamos Orar" não seja apenas um texto, mas sim um link.

Foi então que (depois de pesquisar por horas e horas no Google), troquei o código acima pelo seguinte código:
<div class="sprocket-lists" data-lists="<?php echo $parameters->get('module_id'); ?>">
     

	<div class="sprocket-titulo">
		<?php echo "<a href=\"index.php/vamos-orar\">Vamos Orar<a/>";?>
	</div>


	<ul class="sprocket-lists-container" data-lists-items>
No Chrome e no Firefox funcionou tudo certinho, porém ao abrir o site no IE9 veio a decepção e o desespero. Como podem ver na foto em anexo (o módulo no IE9), no círculo azul que eu fiz para destacar o erro: O IE9, não sei porque, está "chamando" ou "aplicando" duas vezes a classe "sprocket-titulo", como se ele estivesse dividindo o meu código acima em 2 partes e cada uma chamando a class "sprocket-titulo" que eu criei.

Tenho quase certeza que é erro meu, no código PHP que adicionei (pois eu não sei praticamente nada de PHP, a única coisa que tentei inventar usando esta linguagem até hoje é o código acima). Diferente de CSS e HTML, que já tenho adquirido certa experiência (por estar a quase 2 anos se aventurando a criar este site).

Se puderem me ajudar eu ficaria muito grato, pois o site está praticamente pronto, mas preciso resolver este problema que também afeta um outro módulo, num problema praticamente idêntico a esse.

Desde já fico muito grato por este fórum existir (já "salvou minha pele" várias vezes). <!-- s:P --><img src="{SMILIES_PATH}/icon_razz.gif" alt=":P" title="Legal" /><!-- s:P -->
Anexos:

Please Entrar ou Registrar to join the conversation.


  • Rodrigo RDA
  • Avatar de Rodrigo RDA Autor do Tópico
  • Offline
  • JCB! Novato
  • JCB! Novato
Mais
6 anos 10 meses atrás #80327 por Rodrigo RDA
Rodrigo RDA replied the topic: Re: IE 9 &quot;duplicando&quot; classes CSS
Pessoal, para ajudar a explicar melhor a minha dúvida, estou anexando abaixo os arquivos .PHP e o .CSS que contem os códigos que eu inseri.

Arquivo PHP (o código que eu inseri [classe "sprocket-titulo"] é apenas as linhas 18, 19 e 20):
<?php
/**
 * @version   $Id$
 * @author    RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - 2012 RocketTheme, LLC
 * @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 */

/**
 * @var $layout     RokSprocket_Layout_Lists
 * @var $items      RokSprocket_Item&#91;&#93;
 * @var $parameters RokCommon_Registry
 * @var $pages      int
 */

?>
<div class="sprocket-lists" data-lists="<?php echo $parameters->get('module_id'); ?>">
		<div class="sprocket-titulo">
			<?php echo "<a href=\"index.php/vamos-orar\">Vamos Orar<a/>";?>
		</div>
	<ul class="sprocket-lists-container" data-lists-items>
		<?php
			$index = 0;
			foreach ($items as $item){
				echo $layout->getThemeContext()->load('item.php', array('item'=> $item,'parameters'=>$parameters,'index'=>$index));
				$index++;
			}
		?>
	</ul>
	
	<div class="sprocket-lists-nav">
		<div class="sprocket-lists-pagination<?php echo !$parameters->get('lists_show_pagination') || $pages <= 1 ? '-hidden' : '';?>">
			<ul>
			<?php for ($i = 1, $l = $pages;$i <= $pages;$i++): ?>
				<?php
					$class = ($i == 1) ? ' class="active"' : '';
				?>
		    	<li<?php echo $class; ?> data-lists-page="<?php echo $i; ?>"><span><?php echo $i; ?></span></li>
			<?php endfor; ?>
			</ul>
		</div>
		<div class="spinner"></div>
		<?php if ($parameters->get('features_show_arrows')!='hide' && $pages > 1) : ?>
		<div class="sprocket-lists-arrows">
			<span class="arrow-next" data-lists-next><span>&rsaquo;</span></span>
			<span class="arrow-prev" data-lists-previous><span>&lsaquo;</span></span>
		</div>
		<?php endif; ?>
		
		
		
		
		
	</div>
</div>

Arquivo CSS (o código que eu inseri [classe ".sprocket-titulo"] é apenas as linhas 7, 8, 9, 10 e 11):
/**
 * @author    RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - 2012 RocketTheme, LLC
 * @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 */
/* Layout - Sprocket Lists - Core */
.sprocket-titulo {font-size:250%; letter-spacing: 1px; color: #fbf9f1;/*#9f0f0f /*777672*/; padding: 12px 0 15px 25px;font-family:'Cuprum',sans-serif; border: 1px solid #8e4747;/*942c2c;*/ width: 162px; border-radius: 0 4px 4px 0; margin: 22px 0 12px -1px;box-shadow: 2px 2px 3px rgba(000,000,000,0.3); background: #9f0f0f;/*#fbf9f1;/*text-shadow: #dedede 1px -1px 1px;*/}
.sprocket-titulo a {color: #fff !important;}
.sprocket-titulo a:link {color: #fbf9f1;}
.sprocket-titulo a:visited {color: #fbf9f1;}
.sprocket-titulo a:hover {color: #fff !important; padding-left: 1px; font-size:102%;}
.sprocket-lists {max-height: 360px !important; display:block;}  /*  para retirar a faixa vermelha no rodapé é só comentar o padding   */
.sprocket-lists:after {display: table;content: "";*zoom: 1;clear: both;}
.sprocket-lists ul {list-style: none !important;margin: 0;padding: 0;background: #fbf9f1;} 
.sprocket-lists-container {overflow: hidden;padding: 15px 0 0 0 !important;height: 220px !important;color: transparent !important;}  /* linha separadora inferior TESTE  */

/* Layout - Sprocket Lists - Titles */
.sprocket-lists-title {font-size:14px; letter-spacing: 1px; position: relative;padding: 8px 10px 4px 28px!important;line-height: 1.2em !important;margin: -1px -1px 2px -19px !important;cursor: pointer;list-style: none !important;}  /*    posicionamento do titulo de cada item   */
.sprocket-lists-title.padding {padding-right: 35px;}
.sprocket-lists-title .indicator {position: absolute;top: 50%;right: 10px;margin-top: -9px;display: block;width: 18px;height: 18px;border-radius: 1em;opacity: 1/*opacity: 0.7*/;cursor: pointer;text-align: center;}
.sprocket-lists-title .indicator:hover {/*opacity: 1;*/}
.active .indicator {opacity: 0;}

/* Layout - Sprocket Lists - Items */
.sprocket-lists-item {/*font-family: 'Cuprum',sans-serif;*/margin-top: -5px;font-size:12px;display: block;position: relative;color: #575757;background: url(separaembaixo1.png) 0 bottom no-repeat;margin-left:-19px;padding-left:19px;} /*   cor do conteudo do texto    */
.active .sprocket-lists-item {opacity: 1;margin-bottom: 0;}
.sprocket-lists-item .sprocket-padding {padding: 10px;display: block;}
.sprocket-lists-image {float: left;margin: 0 15px 15px 0;}

/* Layout - Sprocket Lists - Navigation */
.sprocket-lists-nav {display: table;width: 100%;padding: 0px 0px 22px 23px;background: #fbf9f1;border-radius: 0 0 5px 5px;}
.sprocket-lists-pagination {display: table-cell;vertical-align: middle;}
.sprocket-lists-pagination ul {float: left;margin: 0 !important;padding: 0 !important;}
.sprocket-lists-pagination li {margin:0px;display: inline-block;padding: 6px;border-radius: 3em;cursor: pointer;background: #5E5951; box-shadow: inset 1px 1px 2px 1px rgba(54,54,54,0.9);border:1px solid; border-color: #bfbaa5;/*display: inline-block;padding: 5px !important;opacity: 0.4;border-radius: 1em;cursor: pointer;*/}  /*  o padding desta linha define o tamanho das bolinhas  */
.sprocket-lists-pagination li.active {margin:0px;padding: 6px;opacity: 1;background: #ba1414;/*#caf749;*/ box-shadow: -1px 1px 4px rgba(150,150,150,0.7);border:1px solid; border-color: #6a6761;}   /*   bolinhas ativadas   */
.sprocket-lists-pagination li span {display: none;font-size: 0.85em;line-height: 1em;}
.sprocket-lists-pagination-hidden {display: none;}
.sprocket-lists-arrows {display: table-cell;vertical-align: middle;}
.sprocket-lists-arrow ul {float: right;margin: 0 !important;padding: 0 !important;}
.sprocket-lists-arrows .arrow-prev {color: #9f0f0f;background: #f6f9f9; right: 44px; position: absolute;display: block;width: 23px;height: 7px;border: 1px; padding:1px; padding-bottom: 17px;bottom: 20px; border-radius: 4px 0px 0px 4px;opacity: 1;cursor: pointer;z-index: 10;text-align: center;font-size: 18pt; background: #fff; border:1px solid; border-color: #9a9a9a; box-shadow: -1px 0px 4px rgba(179,179,179,0.6); margin-top: -24px;/*position: relative;display: block;width: 18px;height:18px;border-radius: 1em;opacity: 0.7;cursor: pointer;float: right;margin-left: 5px;text-align: center;font-size: 1.1em;*/}
.sprocket-lists-arrows .arrow-next {color: #9f0f0f;background: #f6f9f9; left: 232px; position: absolute;display: block;width: 23px;height: 7px;border: 1px; padding:1px; padding-bottom: 17px;bottom: 20px; border-radius: 0px 4px 4px 0px;opacity: 1;cursor: pointer;z-index: 10;text-align: center;font-size: 18pt; background: #fff; border:1px solid; border-color: #9a9a9a; box-shadow: 1px 0px 4px rgba(179,179,179,0.6);}
.sprocket-lists-arrows .arrow-prev:hover {background: #e5e5e5; box-shadow: inset 0 -1px 6px 0px rgba(155,155,155,0.9);}
.sprocket-lists-arrows .arrow-next:hover {background: #e5e5e5; box-shadow: inset 0 -1px 6px 0px rgba(155,155,155,0.9);}
.sprocket-lists-arrows .arrow:hover {opacity: 1;}
.sprocket-lists-arrows .arrow:before {content: '';width: 0;height: 0;position: absolute;top: 50%;border-top: 4px solid transparent;border-bottom: 4px solid transparent;}
.sprocket-lists-arrows .prev:before {left: 50%;margin-left: -3px;margin-top: -4px;}
.sprocket-lists-arrows .next:before {right: 50%;margin-right: -3px;margin-top: -3px;}

/* Layout - Sprocket Lists - Colors */
.sprocket-lists-title {background: url(separaembaixo1.png) 0 bottom no-repeat;/*border-bottom: 1px solid #ddd;*/}  /* cor das abas dos titulos  */
.sprocket-lists-title .indicator {}
.active .sprocket-lists-title .indicator:before {}
.sprocket-lists-pagination li {}
.sprocket-lists-arrows .arrow {}

/* Layout - Sprocket Lists - Transitions */
.sprocket-lists-arrows .arrow, .sprocket-lists-title .indicator {-webkit-transition: opacity 0.2s ease-in;-moz-transition: opacity 0.2s ease-in;-o-transition: opacity 0.2s ease-in;transition: opacity 0.2s ease-in;}

E. por fim, era assim que este módulo deveria aparecer no IE9 (no Chrome e no Firefox aparece desta forma correta):
Anexos:

Please Entrar ou Registrar to join the conversation.