Jump to content

Archived

This topic is now archived and is closed to further replies.

Chrnos

Carregar arquivo CSS conforme browser

Recommended Posts

Olá galera, tudo de boa? Estou com um problema aqui que está me dando dor de cabeça.... o negócio é o seguinte: em um site que estou montando, devido ao fato de usuários usarem N navegadores (entre eles o Ieca 6 ou inferior), eu montei dois arquivos css para configurar as DIVs que uso no site: um pro IE 6 e outro para os outros navegadores.... até ai tranquilo, os CSS funcionam corretamente (pelos testes que fiz no FF, Chrome e IE 6)... mas ai surgiu o problema: como carregar só um dos dois CSS's por execução da página?

 

Pesquisando na net, cheguei a este código que coloquei no header:

 

		<!--[if lte IE 6]>
			<style type="text/css">
				@import "css/style-ie.css";	
			</style> 
		<!--[if !IE 6]>
			<style type="text/css">
				@import "css/style.css";	
			</style>
		<![endif]-->	

Rodei o teste no IE 6 e no FF, e o CSS carregou normalmente usando este código no header... mas o Chrome não reconheceu a existência de nenhum dos dois arquivos CSS, o que zuou o formato do site todo... então, a dúvida é: como eu faço para carregar só o style-ie.css quando for carregado o site no IE 6 e o style.css em qualquer outro browser?

 

Grato pela ajuda.

 

[]'s

Share this post


Link to post
Share on other sites

Coloque só a primeira parte, depois de incluir o arquivo style.css normalmente, sem os comentários...

 

<link href = "css/style.css" rel="stylesheet" type="text/css"/>
 <!--[if lte IE 6]>
 <style type="text/css">
 @import "css/style-ie.css"; 
</style> 
<![endif]-->

Share this post


Link to post
Share on other sites

Coloque só a primeira parte, depois de incluir o arquivo style.css normalmente, sem os comentários...

 

<link href = "css/style.css" rel="stylesheet" type="text/css"/>
 <!--[if lte IE 6]>
 <style type="text/css">
 @import "css/style-ie.css"; 
</style> 
<![endif]-->

 

Olá Rick, obrigado por responder.... o problema é este: alguns tratamentos que tive que fazer me obrigaram a mudar valores dentro das divs que não permitem o uso dos dois estilos de CSS ao mesmo tempo, apenas um deles deve ser carregado, de acordo com o browser.... se for IE 6 ou inferior, deve importar apenas o style-ie.css, senão deve importar o style.css... se tentar trazer os dois juntos vai bagunçar tudo...

 

Isto porque no IE 6 não está aceitando muito bem os posicionamentos usando o css que montei em alguns trechos... estou sendo forçado em alguns momentos a usar dimensões absolutas em algumas divs para o IE 6 não zoar o layout todo do site que estou montando...

 

Se alguém tiver uma alternativa, como usar algum javascript para verificar isso se tiver, eu agradeço.

 

[]'s

Share this post


Link to post
Share on other sites

O correto seria um CSS só, se adaptando a todos os navegadores...

 

A alternativa 'quase' boa seria apenas sobrescrever algumas regras para o IE6 [minha sugestão]...

 

No mais, pode usar jQuery para verificar se está no IE...

 

$.browser.msie

Ou, com JS puro:

 

var navegador = navigator.appName;
var versao = navigator.appVersion;

if(versao.match("MSIE 6"))...

Share this post


Link to post
Share on other sites

Bom dia,

 

Como de costume o IE complicando nossas vidas !

 

Se entendi sua necessidade, acho que este artigo muito interessante e simples do MAUJOR lhe ajudará a servir folhas de estilo alternativas.

 

http://www.maujor.com/tutorial/alternatecss.php

 

Espero que ajude.

Share this post


Link to post
Share on other sites

Chrnos,

 

o que você deve fazer é o seguinte: no style.css faz o CSS que funcione em todos os browsers e ao máximo no Internet Explorer 6. No style-ie.css você apenas escreve as propriedades que estão erradas para o Internet Explorer.

 

Eu normalmente não uso comentário condicionais. Faço como o Rick disse, tento deixar tudo certo em uma só folha.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Share this post


Link to post
Share on other sites

Bom dia galera,

 

Valeu pelas respostas, mas confesso que webdesing não é bem a minha praia e por isso eu estou apanhando pra montar esse CSS... a noite vou pegar os dois códigos CSS e da página de teste e trazer aqui para vocês poderem dar uma olhada melhor no problema e se possível me ajudar a organizar o CSS, pode ser? Agora no trampo não tenho como pegar os códigos e por aqui.

 

Grato pela força.

 

[]'s

Share this post


Link to post
Share on other sites

Salve galera,

 

Então, como já tinha dito eu sou meio newbie quando se trata a desenvolver websites usando CSS.... então, estou tendo dificuldades com a parte de posicionar os dados e carregar o CSS de modo a fazer ele funcionar para qualquer navegador (incluindo o IEca 6).

 

Vamos ao que interessa... este é o código da index.html.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Esquemas de posicionamento CSS: Floats</title>
		<meta name="author" content="" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="language" content="pt-br" />	
		
		<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
		<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
		<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />	

		<style type="text/css">
			@import "css/style.css";
		</style> 
 
		<!--[if lte IE 6]>
			<style type="text/css">
				@import "css/style-ie.css";	
			</style> 
		<![endif]-->	
	
		<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"></script>
		<!--[if lte IE 6]>		
			<script type="text/javascript" src="javascripts/supersleight.js"></script>	
		<![endif]-->				
	</head>			
<body>
	<div id="container">
		<div id="lateral">
		</div>
		<div id="corpo">
			<div id="topo"> 
			</div>
			<div id="banner"> </div>		
			<!--MENU HORIZONTAL-->
			<div id="ddtopmenubar" class="mattblackmenu">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="http://www.dynamicdrive.com/forums/">Nossa História</a></li>					
					<li><a href="galeria.html" rel="ddsubmenu1">Galeria</a></li>
					<li><a href="http://www.dynamicdrive.com/forums/">Contato</a></li>
					<li><a href="http://www.dynamicdrive.com/forums/">Parceiros</a></li>					
				</ul>
			</div>	
			
			<script type="text/javascript">
				ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")		
			</script>			
			<!--Fim Menu-->
			<div id="conteudo">
				<div id ="informacao">
	 <!-- Desconsiderar... estão assim só pra testes -->
					<h3><span>The Road to Enlightenment</span></h3>
					<p class="p1">
							<span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span>
					</p>
					<p class="p2">
							<span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators.
							</span>
					</p>
					<p class="p1">
							<span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span>
					</p>
					<p class="p2">
							<span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators.
							</span>
					</p>					<p class="p1">
							<span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span>
					</p>
					<p class="p2">
							<span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators.
							</span>
					</p>					<p class="p1">
							<span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span>
					</p>
				</div>
			</div>
			<div id="botton"> 	</div>					
		</div> 
		<div id="lateral">
		</div>
		<div id="rodape">
			<p align="center">Site melhor visualizado em 1280x1024</p>
		</div>		
	</div> <!-- Fim da div#container -->


	<!--Top Drop Down Menu 1 HTML-->	
	
	<ul id="ddsubmenu1" class="ddsubmenustyle">
		<li><a href="#">Item 1a</a></li>
		<li><a href="#">Item 2a</a></li>
		<li><a href="#">Item Folder 3a</a></li>
		<li><a href="#">Item 6a</a></li>
	</ul> 				
</body>
</html>

Este é o código do style.css.

 

@charset "windows-1252";

body {
	background-image:url("../001.gif");
	color:#333;
	margin: 0; 
	padding: 0;
	font: 12px/1.4 Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	}
#container { 
	position:absolute;
	top:25%;
	left:50%;
	bottom: 15%;
	width:670px;
	height:840px;
	margin-left:-335px;
	margin-top:-97px;
	text-align:left;
	}
#corpo {			
	position: relative;
	width:520px;
	height:800px;
	float:left;
	background-image: url("../fundo02.jpg");
} 
#topo {
	position: relative;
	float: left;
	width: 100%;
	height: 50px; 
	background-image: url("../topo01.png");
}
#botton {
	position: relative;
	float: left;
	width: 100%;
	height: 50px; 
	background-image: url("../botton01.png");
	margin-top:34px;	
} 
#ddtopmenubar {
	position: relative;
	float: left;
	width: 100%;
	height: 40px;
}
#banner {
	position: relative;
	float: left;
	width: 100%;
	height: 115px;	
	background-image: url("../banner.png"); 
}

#conteudo {
	position: relative;
	float: left;
	width: 100%;
	height: 511px;
}			
#informacao {
	position: relative;
	float: left;
	padding: 15px 15px 15px 15px;
	width: auto;
	height: 570px; 
	max-height: 496px;
	background-image: url("../branco.jpg"); 
	margin-top:10px;
	margin-bottom:10px;
	margin-left:10px;
	margin-right:10px;
	overflow: auto;	
} 

#rodape {
	position: relative;
	float: left;
	width: 100%;
	height: 30px; 
}
#lateral {
	width:55px;
	height:800px;	
	float:left; 
	background-image: url("../esquerda.jpg");
	} 
	
p {width:100%}

.image_spot_tn {
width:99%; 
margin-top: 20px;
padding-left:9px;
padding-right:9px;
}
.image_spot_tn img{
margin-top:7px;
margin-right:7px;
margin-left:7px;
float:left;
margin-bottom:5px;
border:1px #666 solid;
} 

Este é o código no style-ie.css.

 

body {
	background-image:url("../001.gif");
	color:#333;
	margin: 0; 
	padding: 0;
	font: 12px/1.4 Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	}
#container { 
	position:absolute;
	top:30%;
	left:50%;
	bottom: 15%;
	width:670px;
	height:800px;
	margin-left:-335px;
	margin-top:-97px;
	text-align:left;
	}
#corpo {			
	position: relative;
	width:520px;
	height:460px;
	float:left;
	background-image: url("../fundo02.jpg");
} 
#topo {
	position: relative;
	float: left;
	width: 100%;
	height: 50px; 
	background-image: url("../topo01.png");
} 

#botton {
	position: relative; 
	float: left;
	top : 19px;
	width: 100%;
	height: 50px; 
	background-image: url("../botton01.png");	
	background-position: bottom;
} 
#ddtopmenubar {
	position: relative;
	float: left;
	width: 100%;
	height: 40px;
}
#banner {
	position: relative;
	float: left;
	width: 100%;
	height: 115px;	
	background-image: url("../banner.png"); 
}

#conteudo {
	position: relative;
	float: left;
	width: 100%;
	height: 447px;
}			
#informacao {
	position: relative;
	float: left;
	width: 500px;
	height: 447px; 
	background-image: url("../branco-ie.png"); 
	margin-top:10px;
	margin-left:5px;
	margin-right:5px; 
	overflow: auto;	
} 
#rodape {
	position: relative;
	float: left;
	width: 100%;
	height: 30px; 
}
#lateral {
	width:55px;
	height:800px;	
	float:left; 
	background-image: url("../esquerda.jpg");
	} 
	
p {width:100%}

.image_spot_tn { 
width:500px; 
margin-top: 20px;
}
.image_spot_tn img{
margin-top:7px;
margin-right:7px;
margin-left:7px;
float:left;
margin-bottom:5px;
border:1px #666 solid;
} 

E este trecho é onde está a diferença entre os dois styles....

 

#container { 
	top:30%;
	}
 
#botton {
	margin-top : 0;
	background-position: bottom;
} 
#conteudo {
	height: 447px;
}			
#informacao {
	position: relative;
	float: left;
	width: 500px;
	height: 447px; 
	background-image: url("../branco-ie.png"); 
	margin-top:10px;
	margin-left:5px;
	margin-right:5px; 
	overflow: auto;	
} 
.image_spot_tn { 
width:500px; 
margin-top: 20px; 
padding-left:0;
padding-right:0;
}

Para visualização, segue abaixo as imagens de como está a visualização deste código no FF e no IEca 6.

 

Firefox

 

Imagem Postada

 

IE 6

 

Imagem Postada

 

Agradeço pela ajuda e pelas dicas que forem possíveis para ajustar o CSS para uniformizar a sua visualização nos browser's.

 

[]'s

Share this post


Link to post
Share on other sites

Vamos lá:

 

Acrescente o Reset CSS, pode ser simples mesmo, tal como:

 

*{
margin:0;
padding:0;
}

Não utilize position para estruturar sua página. Trabalhe mais com float e margin. Para entender melhor essas propriedades, passe no laboratório de scripts e veja alguns artigos lá. É bem explicado. ;)

 

Depois de dar uma limpada no CSS, posta aê o novo.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

P.S.: É mais fácil trabalhar com float e margin do que CSS. ;)

Share this post


Link to post
Share on other sites

Amigos, agradeço as dicas e pretendo até dar uma lida e ver os vídeos assim que o tempo deixar, mas o fato é que não pretendo investir no momento na área de webdesigner, só estou tentando ajudar um conhecido a montar seu site... será que os amigos não poderiam me mostrar onde está errado os CSS's que postei e como corrigí-los? Será tão complexo assim o erro que estou cometendo que vai me obrigar a ter que refazer tudo o que fiz para tentar reencaixar as divs que agora já estão como eu quero em navegadores atuais como o Chrome, Safari e FF, só porque o IE 6 tem vários bugs?

 

[]'s

Share this post


Link to post
Share on other sites

Chrnos,

 

nós mostramos o que pode estar te atrapalhando - o position - e o Rick passou uma série de vídeo aulas para você entender melhor como funciona o Box Model de um browser. Tente trabalhar menos com o position e mais com o float e você notará diferença.

 

Poste o link para sua página - pode ser em uma hospedagem grátis - para vermos melhor.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Share this post


Link to post
Share on other sites

Thiago, eu entendo seu ponto de vista... mas entenda o meu: eu não tenho tempo de refazer todo o CSS para tirar o position e reordenar tudo por float e margin como sugere. E meu problema no IE se resolveria se eu só usasse o style-ie.css do jeito que ele está agora... tudo o que eu quero saber é se tem um modo de eu carregar ou o style.css ou o style-ie.css ao invés de ter que remontar todo o CSS só por causa do IE 6, ou que me apontem as falhas no atual CSS, só isso.

 

Considere isto: se eu por o style.css, o site carrega normal em todos os navegadores atuais, só no IE 6 para baixo que não... se eu por o style-ie.css, eu resolvo o problema do IE 6, mas nos outros sai distorcido. Sei que meu CSS não está provavelmente nas melhores práticas, mas complica ler que tenho que refazer tudo porque segui dicas que peguei na net de posicionar as divs usando o position. Se não tem como eu controlar qual CSS adicionar pelo browser, então só me diz como eu posso capturar o browser e carregar uma página de entrada por redirecionamento de acordo com o browser para usar o CSS que eu desejo que já resolve meu problema por hora.

 

E me desculpe a franqueza mas, com excessão do seu último post, que você citou de forma clara o que poderia ser o erro (e aproveito agora para dizer que sem o position as divs estavam saindo todas malucas pela página), os anteriores não deixam claro onde está o problema do CSS que montei. Mas agradeço a ajuda e vou dar um jeito aqui de fazer isso funcionar.

 

Grato pela atenção.

 

Chrnos

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.