← HTML + CSS

Problema com CSS no CHROME

Lida 16098 vezes

Offline

Cacofb 
Elite
Mensagens 1035 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Boas Pessoal!!

Arranjei ai um menu css já feito, alterei só o código.
No entanto, estou com um problema no Google Chrome.
Ele mostra direito no IE e Firefox, mas no chrome, fica com as restantes secções todas XPTO.

Inclusivé já sei qual é a resolução do problema, são uns DIV's que não são fechados nas diferentes secções, e o chrome não os assume como fechados.

Queria então saber se é possível carregar o CSS para o chrome à parte, tal como podemos fazer no IE 6, etc

Citar
<!--[if IE 6]>
<link href="templates/aaaaa/css/ie6only.css" type="text/css" rel="stylesheet" />
<![endif]-->

Aguardo ajudas urgente :D

Obrigado
Offline

Fernando Augusto 
Membro
Mensagens 922 Gostos 0
Feedback +1

Troféus totais: 30
Trófeus: (Ver todos)
Linux User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Tinha visto isto a uns tempos, confirma se funcionam

These hacks don’t validate, but are 100% safe according to CSS parsing rules.

Código: [Seleccione]
1 /* chrome browser */
2 body:nth-of-type(1) #hackme{ styles for chrome here }

Update Oct 2009: Since the release of Firefox 3.5 the above hack is not targeted by Chrome only anymore. Therefore use the following hack below:

Código: [Seleccione]
1 @media screen and (-webkit-min-device-pixel-ratio:0){
2     #hackme {  styles for chrome here }
3 }
Offline

Cacofb 
Elite
Mensagens 1035 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Não é possível designar um CSS style para o chrome como fazemos com o IE 6 ?

Obrigado
Offline

Cacofb 
Elite
Mensagens 1035 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Basicamente o erro é este..

Funciona no  IE, Firefox:

Código: [Seleccione]
<div class="sub">
  <ul>
     <li>
<a href="conselhos.php" target="_self">Conselhos</a>
    </li>
     <li>
<a href="seguranca.php" target="_self">Segurança</a>
    </li>
  </ul> <---SEM DIV --->


Com div no final de cada sub-secção já funciona no Chrome, mas no IE e Firefox bate mal.

Código: [Seleccione]
<div class="sub">
  <ul>
     <li>
<a href="conselhos.php" target="_self">Conselhos</a>
    </li>
     <li>
<a href="seguranca.php" target="_self">Segurança</a>
    </li>
  </ul> </div>


Existe alguma forma de ter um duplicado do mesmo css, um com essas tag's div e outro sem, e chamá-los de acordo com o browser em questão?

Obrigado
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Coloca aqui a tua CSS também pf, ou manda-me por MP o URL do site.

Em relação à tua questão sobre carregar uma CSS apenas para chrome, infelizmente não, apenas funciona existe para IE, o que podes fazer como killer999 é na própria CSS usar hacks para browsers específicos, mas normalmente isso não passa na validação.
Offline

Cacofb 
Elite
Mensagens 1035 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Aqui vai o CSS:

Código: [Seleccione]
@charset "utf-8";
/* CSS Document */


.wrapper1{
color: #44433f;
font: 14px "Futura Medium", "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
margin: 0;
padding: 4px 0 0;
}
.wrapper1 a{
color: #E5F2FB;
text-decoration: none;
}
.wrapper1 a:hover {
color: #09548B;
}
.wrapper1 p {
margin: 0 0 17px;
padding: 0;
line-height: 18px;
}
.wrapper {
/*width: 710px;*/
margin: 20px auto;
}
.nav {
background: #fff url(images/nav_bg.png) repeat-x;
float: left;
}
.nev-wrapper {
clear: both;
float: left;
}
.nav-left {
background: url(images/nav_left.png) no-repeat top left;
float: left;
width: 11px;
height: 41px;
}
.nav-right {
background: url(images/nav_right.png) no-repeat top right;
float: left;
width: 11px;
height: 41px;
}
.nav ul {
/*width: 648px;*/
height: 38px;
float: left;
margin: 0;
padding-top: 3px;
list-style: none;
font-size: 15px;
}
.nav li {
float: left;
padding: 0 7px;
background: url(images/split.png) no-repeat right center;
position: relative;
z-index: 1;
}
.nav li.last {
background:none;
}
.nav li:hover {
z-index:2;
}
.nav li a {
display: block;
line-height: 38px;
overflow: hidden;
float: left;
}
a .menu-left {
background: url(images/menu_left.gif) no-repeat left top;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-mid {
background: url(images/menu_mid.gif) repeat-x top left;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-right {
background: url(images/menu_right.gif) no-repeat top left;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
background-position: 0 -37px;
line-height: 35px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
display:block;
}
.nav li .sub {
display: none;
position: absolute;
top: 27px;
left: 6px;
background: url(images/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;
}
.nav li ul {
background: url(images/submenu_bg.png) repeat-y;
width: 162px;
height: auto;
margin: 0;
padding: 0 12px 10px;
list-style: none;
font-size: 14px;
}

.nav li:hover li,
.nav li.active li {
width: 100%;
padding: 1px 0 2px;
border-bottom: 1px #C1D9F0 dashed;
background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
color: #09548B;
background: none !important;
line-height: normal;
width: 156px;
padding: 8px 3px 3px;
text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/**/
.nav .btm-bg {
background: url(images/submenu_bottom.png) no-repeat;
width: 205px;
height: 9px;
overflow: hidden;
clear: both;
}
.content {
width: 670px;
background: transparent url(images/content_bg.png) repeat-y;
float: left;
padding: 10px 20px;
}
.content h1 {
color: #333;
font-weight: 400;
text-transform: uppercase;
font-size: 18px;
border-bottom: 1px dashed #C1D9F0;
}
.content h2 {
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
padding-left: 10px;
margin-bottom: -5px;
}
.content p {
padding: 0 15px;
text-align: justify;
}
.content-bottom {
width: 710px;
background: transparent url(images/content_bottom.png) no-repeat;
height: 13px;
float: left;
}


E aqui o menu:

Código: [Seleccione]
<link rel="stylesheet" type="text/css" href="menu/menu_style.css"/>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/menu/includes/ie6.css" media="screen"/>
<![endif]-->
<div class="wrapper1">
<div class="wrapper"  style="width:1050px;">
<div class="nav-wrapper">
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation" style="width:880px";>
 
<li class="#">
<a href="index.php" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Início</span>
<span class="menu-right"></span>
</a>
</li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Viagem</span>
<span class="menu-right"></span>
</a>
                <div class="sub">
    <ul>
              <li>
<a href="programa_viagem.php" target="_self">Programa Viagem</a>
</li>
              <li>
<a href="programa_detalhado.php" target="_self">Programa Detalhado</a>
</li>
              <li>
<a href="inscricao.php" target="_self">Inscrição</a>
</li>
              <li>
<a href="pre-inscritos.php" target="_self">Pré-Inscritos</a>
</li>
              <li>
<a href="inscritos.php" target="_self">Inscritos</a>
</li>
              <li>
<a href="seguro.php" target="_self">Seguro Neve/Ski</a>
</li>
              <li>
<a href="pagamentos.php" target="_self">Pagamentos</a>
</li>
    </ul>
</li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Informações</span>
<span class="menu-right"></span>
</a>
                <div class="sub">
    <ul>
              <li>
<a href="conselhos.php" target="_self">Conselhos</a>
</li>
              <li>
<a href="seguranca.php" target="_self">Segurança</a>
</li>
    </ul>
</li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Apartamentos</span>
<span class="menu-right"></span>
</a>
                <div class="sub">
    <ul>
              <li>
<a href="apartamentos.php" target="_self">Apartamentos</a>
</li>
              <li>
<a href="condicoes_gerais.php" target="_self">Condições Gerais</a>
</li>
    </ul>
</li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Andorra</span>
<span class="menu-right"></span>
</a>
                <div class="sub">
    <ul>
              <li>
<a href="andorra-lavella.php" target="_self">Andorra la Vella</a>
</li>
              <li>
<a href="soldeu-el-tarter.php" target="_self">Soldeu El Tarter</a>
</li>
              <li>
<a href="pas-de-la-casa.php" target="_self">Pas de la Casa</a>
</li>
    </ul>
</li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Curiosidades</span>
<span class="menu-right"></span>
</a>
                <div class="sub">
    <ul>
              <li>
<a href="mapa-das-pistas.php" target="_self">Mapa das Pistas</a>
</li>
              <li>
<a href="webcams.php" target="_self">Webcams</a>
</li>
    </ul>
</li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Organização</span>
<span class="menu-right"></span>
</a>
                <div class="sub">
    <ul>
              <li>
<a href="quem-somos.php" target="_self">Quem somos</a>
</li>
              <li>
<a href="contactos.php" target="_self">Contactos</a>
</li>
    </ul>
</li>

    </ul>
</div>
<div class="nav-right"></div>
<br><br>
</div>
</div>
</div>

Obrigado!!
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Boas,

Não cheguei a mexer na CSS, bastou fechar as divs no html, cá vai:

Código: [Seleccione]
<link rel="stylesheet" type="text/css" href="menu/menu_style.css"/>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/menu/includes/ie6.css" media="screen"/>
<![endif]-->
<div class="wrapper1">
<div class="wrapper"  style="width:1050px;">
<div class="nav-wrapper">
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation" style="width:880px";>
 
<li class="#">
<a href="index.php" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Início</span>
<span class="menu-right"></span>
</a>
</li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Viagem</span>
<span class="menu-right"></span>
</a>
              <div class="sub">
  <ul>
           <li>
<a href="programa_viagem.php" target="_self">Programa Viagem</a>
</li>
           <li>
<a href="programa_detalhado.php" target="_self">Programa Detalhado</a>
</li>
           <li>
<a href="inscricao.php" target="_self">Inscrição</a>
</li>
           <li>
<a href="pre-inscritos.php" target="_self">Pré-Inscritos</a>
</li>
           <li>
<a href="inscritos.php" target="_self">Inscritos</a>
</li>
           <li>
<a href="seguro.php" target="_self">Seguro Neve/Ski</a>
</li>
           <li>
<a href="pagamentos.php" target="_self">Pagamentos</a>
</li>
  </ul>
                     </div><!-- fim div sub -->
</li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Informações</span>
<span class="menu-right"></span>
</a>
              <div class="sub">
  <ul>
           <li>
<a href="conselhos.php" target="_self">Conselhos</a>
</li>
           <li>
<a href="seguranca.php" target="_self">Segurança</a>
</li>
  </ul>
                     </div><!-- fim div sub -->
</li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Apartamentos</span>
<span class="menu-right"></span>
</a>
              <div class="sub">
  <ul>
           <li>
<a href="apartamentos.php" target="_self">Apartamentos</a>
</li>
           <li>
<a href="condicoes_gerais.php" target="_self">Condições Gerais</a>
</li>
  </ul>
</div><!-- fim div sub -->
                    </li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Andorra</span>
<span class="menu-right"></span>
</a>
              <div class="sub">
  <ul>
           <li>
<a href="andorra-lavella.php" target="_self">Andorra la Vella</a>
</li>
           <li>
<a href="soldeu-el-tarter.php" target="_self">Soldeu El Tarter</a>
</li>
           <li>
<a href="pas-de-la-casa.php" target="_self">Pas de la Casa</a>
</li>
  </ul>
</div><!-- fim div sub -->
                    </li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Curiosidades</span>
<span class="menu-right"></span>
</a>
              <div class="sub">
  <ul>
           <li>
<a href="mapa-das-pistas.php" target="_self">Mapa das Pistas</a>
</li>
           <li>
<a href="webcams.php" target="_self">Webcams</a>
</li>
  </ul>
</div><!-- fim div sub -->
                    </li>
 
<li class="#">
<a href="" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">Organização</span>
<span class="menu-right"></span>
</a>
              <div class="sub">
  <ul>
           <li>
<a href="quem-somos.php" target="_self">Quem somos</a>
</li>
           <li>
<a href="contactos.php" target="_self">Contactos</a>
</li>
  </ul>
</div><!-- fim div sub -->
                    </li>

  </ul>
</div>
<div class="nav-right"></div>
<br><br>
</div>
</div>
</div>

Testei em Chrome, Firefox, IE8 e Opera, vê se resolve o teu problema.
Offline

Cacofb 
Elite
Mensagens 1035 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Mambey,

Obrigado!! já funciona!! eheh
Era mesmo isso dos div's. já tinha estado a mexer ai, mas devo ter posto antes do ul.

Obrigado
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

De nada, ficou resolvido é o que interessa :)
Offline

dedestell 
Membro
Mensagens 31 Gostos 0
Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Signature

Ola ricardo,
 Então estou com mesmo problema meu site Fica correto no Firefox e IE mas no chrome ele desceu tudo alguns centimetros desalinhando menu e tudo mais. Você poderia me ajudar. O Problema começa no Cabeçalho. SE eu postar aqui o codigo vc poderia me ajudar?...abraço andre
Offline

dedestell 
Membro
Mensagens 31 Gostos 0
Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Signature

identifiquei o problema em uma div

<div id="center">

ao fechar essa div assim

<div id="center"></div>

o site corre todo para o lado esquerdo, mas corrige o problema do topo que havia descido umpouco. Ele retorna a subir.

Nao sei como fazer........
Offline

bonsempregos 
Membro
Mensagens 2008 Gostos 7
Feedback +3

Troféus totais: 29
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

Coloca aqui a tua CSS também pf, ou manda-me por MP o URL do site.

Em relação à tua questão sobre carregar uma CSS apenas para chrome, infelizmente não, apenas funciona existe para IE, o que podes fazer como killer999 é na própria CSS usar hacks para browsers específicos, mas normalmente isso não passa na validação.

Podem usar css's para cada browser, isto talvez vos possa ajudar:

http://www.conditional-css.com/
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Podem usar css's para cada browser, isto talvez vos possa ajudar:

http://www.conditional-css.com/

Errado, podes usar CSS para motores específicos, mas não foi isso que pediram ;)

De qualquer das formas, obrigado pela partilha, não conhecia essa tool.
Offline

bonsempregos 
Membro
Mensagens 2008 Gostos 7
Feedback +3

Troféus totais: 29
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

Errado, podes usar CSS para motores específicos, mas não foi isso que pediram ;)

De qualquer das formas, obrigado pela partilha, não conhecia essa tool.

Errado, http://www.websiteoptimization.com/speed/tweak/xssi/

podes o fazer por browser, basta usares o user agent..., mas é a tal coisa, para quê estar a colocar tecnicas avançadas se as mesmas podem ser encontradas facilmente no google e só iriam confundir ainda mais os "novatos".