problema con :hover

**torrone** · 10-02-2010, 23:07

non capisco proprio dove sta il problema... -_- ho due stili pressochè identici.. idem del template.. sto facendo dei test.. e ora non capisco perchè il primo funziona correttamente su explorer mentre il secondo no

primo CSS, ve lo posto tutto, ma la parte importante è .menu li:hover

codice:

html,body {
margin:0;
padding:0;
}
body {
font-size: 12px;
font-family: arial, helvetica ;
text-align:center;
background: #ffffff;
}

div#header h1 {
height:80px;
line-height:80px;
margin:0;
padding-left:10px;
color: #B9CAFF;
}
div#contenuto p {
line-height:1.4;
}

div#corpo {
background: #FFFFFF;
text-align:left;
border: 1px solid #CCCCCC;
width:800px;
margin:0 auto 0 auto;
}
div#contenuto {
float:right;
width:600px;
}
div#bloccosx {
float:left;
width:200px;
}
div#extra {
background:#808080;
color: #eaeaea;
width: 100%;
clear:both;
margin: 0;
}
div#footer {
background: #eaeaea;
color: #808080;
padding: 5px 5px 5px 5px;
margin: 0;
}
div#copyright {
clear:both;
text-align: center;
margin: 0;
padding: 0;
}
.menu {
text-align:left;
margin-top: 20px;
color: #333333;
}
.menu h1 {
font-size: 15px;
text-align:left;
margin:3px 15px 0 4px;
padding:0;
}
.menu p {
margin: 0;
padding: 2px 2px 2px 2px;
}
.menu ul {
width:100%;
text-align:left;
margin:0px 0px 4px;
padding:0px;
}
.menu ul li {
list-style:none;
text-align:left;
margin:0px 5px 0px 5px;
padding:5px;
border-bottom: 1px solid #cccccc;
}
.menu li:hover {
background-color: #eaeaea;
}
.box_pagina {
margin: 10px;
color: #474747;
}
.box_pagina h1 {
font-size: 20px;
margin: 0 0 10px 0;
padding: 0;
}

TEMPLATE

codice:

<html> 
<head> 
</head> 
<body> 
<div id="corpo"> 
<div id="header">AA</div> 
<div id="wrapper"> 
<div id="contenuto"> 
<div class="box_pagina"> 
<h1>Home page</h1> 


testo home</p> 
</div> 
</div> 
</div> 
<div id="bloccosx"> 
<div class="menu">
<h1>Menu 1</h1>
<ul>[*]link 1[*]link 2[/list]


prova testo</p>
</div>
<div class="menu">
<h1>Menu 2</h1>
<ul>[*]link 1[*]link 2[/list]


prova testo</p>
</div></div> 
<div id="extra"> 


aaaaaaaaa</p>
</div> 
<div id="footer"> 
	<div id="copyright">copyright 2009</div> 
</div> 
</div> 
</body> 
</html>

Mentre questo è il template incriminato che su IE non va il menu la parte del li:hover

CSS

codice:

body, html {
margin: 0 auto;
padding 0;
}

body {
background: #EFEFEF;
font-size: 12px;
font-family: arial, helvetica ;
text-align: center;
}
#corpo {
background: #FFFFFF;
text-align:left;
border: 1px solid #CCCCCC;
width:760px;
margin:0 auto 0 auto;
}
#header {
background-image:url('http://localhost/errecitisas/temi/nuovo/images/erreciti_sas_logo.jpg');
height: 100px;
}
#contenuto {
float:right;
width:560px;
}
#bloccosx {
float:left;
width:198px;
}
#extra {
width: 100%;
clear:both;
margin: 0;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
#footer {
color: #808080;
padding: 5px;
margin: 0;
}
.copyright {
margin: 0;
padding: 2px;
text-align: center;
background: #CCCCCC;
}
.menu {
text-align: left;
border: 1px solid #CCCCCC;
margin: 5px;
background: #EFEFEF;
}
.menu h1 {
font-size: 12px;
background: #CCCCCC;
margin: 2px;
text-align: center;
color: #333333;
}
.menu ul {
width:100%;
text-align:left;
margin:0px 0px 4px;
padding:0px;
}
.menu ul li {
list-style:none;
text-align:left;
margin:0px 5px 0px 5px;
padding:5px;
border-bottom: 1px solid #cccccc;
}
.menu li:hover {
background-color: #FF0000;
}
.box_pagina {
text-align: left;
border: 1px solid #CCCCCC;
margin: 5px;
background: #EFEFEF;
}
.box_pagina h1 {
font-size: 12px;
background: #CCCCCC;
margin: 2px;
text-align: center;
color: #333333;
}
.box_pagina p {
margin: 2px 2px 5px 2px;;
}

TEMPLATE

codice:

<html>
<head>
</head>
<body>
<div id="corpo">
<div id="header"></div>
<div id="wrapper">
<div id="contenuto">
<div class="box_pagina">
<h1>Pagina</h1>


prova testo nmas d as as das dsas as da sd as dasdasdahsdhjashjd  asd  asd as dasdasdasd  as das dasd asd as das dasdsadssad</p>


prova testo as d asdasdasd</p>
</div>
</div>
</div>
<div id="bloccosx">
<div class="menu">
<h1>Menu 1</h1>
<ul>[*]link 1[*]link 2[/list]


prova testo</p>
</div>
<div class="menu">
<h1>Menu 2</h1>
<ul>[*]link 1[*]link 2[/list]


prova testo</p>
</div>
</div>
<div id="extra">
extra
</div>
<div id="footer">
<div class="copyright">Sito progettato da Andrea Torrone</div>
</div>
</div>
</body>
</html>

qualcuno può aiutarmi??

**torrone** · 10-02-2010, 23:29

penso di aver trovato l'errore ... mancava

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

**torrone** · 12-02-2010, 17:23

.. il problema invece continua...

Su explorer il tag :hover nel menu (ul) non funziona.. come mai??

codice:

<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css"> 
body, html {
margin: 5px auto;
padding 0;
}
body {
background: #EFEFEF;
font-size: 12px;
font-family: arial, helvetica ;
text-align: center;
}
#corpo {
background: #FFFFFF;
text-align:left;
border: 1px solid #CCCCCC;
width:760px;
margin:0 auto 0 auto;
}
#header {
background-image:url('/temi/nuovo/images/erreciti_sas_logo.jpg');
height: 100px;
}
#contenuto {
float:right;
width:560px;
}
#bloccosx {
float:left;
width:198px;
}
#extra {
width: 100%;
clear:both;
margin: 0;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
#footer {
padding: 5px;
margin: 0;
}
.copyright {
color: #808080;
margin: 0;
padding: 2px;
text-align: center;
background: #CCCCCC;
}
.menu {
text-align: left;
border: 1px solid #CCCCCC;
margin: 5px;
background: #EFEFEF;
}
.menu h1 {
font-size: 12px;
background: #CCCCCC;
margin: 2px;
text-align: center;
color: #666666;
}
.menu ul {
width:100%;
text-align:left;
margin:0px 0px 4px;
padding:0px;
}
.menu ul li {
list-style:none;
text-align:left;
margin:0px 5px 0px 5px;
padding:5px;
border-bottom: 1px solid #cccccc;
}
.menu li:hover {
background-color: #CCCCCC;
}
.menu a {
color: #FF6600;
}
.menu a:hover {
color: #FF6600;
}
.menu p {
margin: 15px 10px;
}
 
 
.box_pagina {
text-align: left;
border: 1px solid #CCCCCC;
margin: 5px;
background: #EFEFEF;
color: #666666
}
.box_pagina h1 {
font-size: 12px;
background: #CCCCCC;
margin: 2px;
text-align: center;
color: #666666;
}
.box_pagina p {
margin: 2px 2px 5px 2px;;
}
</style>
</head>
<body>
<div id="corpo">
<div id="header"></div>
<div id="wrapper">
<div id="contenuto">

<div class="box_pagina">
<h1>Pagina</h1>


prova testo nmas d as as das dsas as da sd as dasdasdahsdhjashjd  asd  asd as dasdasdasd  as das dasd asd as das dasdsadssad</p>
</div>

</div>
</div>
<div id="bloccosx">

<div class="menu">
<h1>Menu</h1>
<ul>[*]link[*]link
[/list]
</div>
<div class="menu">
<p align="center">aaaaaaa</p>
</div>

</div>
<div id="extra">


extra</p>
</div>
<div id="footer">

<div class="copyright">Copyright &copy;</div>

</div>
</div>
</body>
</html>

**torrone** · 13-02-2010, 11:55

Non lo sapevo.. Ma inserendo un commento prima del doctype IE fa sballare tutto ... E interpreta male la pagina e i fogli di stile...

Discussione: problema con :hover

Strumenti discussione

Ricerca discussione

Visualizza

problema con :hover

Permessi di invio