problemi con Dreamweaver e IE

**Shinzo** · 17-07-2014, 12:59

Mi sorgono ulteriori problemi... il sito creato non viene visualizzato bene con Internet Explorer... Le immagini di sfondo risultano sfasate ed il colore di un determinato testo inserito non risulta qper niente simile a quello scelto. Con altri browser non da problemi

**Prill** · 17-07-2014, 13:52

È necessario vedere la pagina (con il codice html e css)

**Shinzo** · 17-07-2014, 19:47

Questo è il codice:

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>
<meta http-equiv="X-UA-Compatible" content="IE=XXX" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>è tempo!</title>
<style type="text/css">




body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #1E90FF;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url(Immagini/Sfondoo.png);
    background-repeat: no-repeat;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}




ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;        padding-right: 15px;
    padding-left: 15px;
}
a img { 
    border: none;
}
a:link {
    color: #FFFF66;
    text-decoration: underline;
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    text-decoration: none;
}


#sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; }




.container {
    width: 960px;
    background-color: #FFF;
    margin: 0 auto; 
}


.header {
    background-color: #1E90FF;
}


.content {


    padding: 10px 0;
    background-color: #58acfa;
}


.footer {
    padding: 10px 0;
    background-color: #1E90FF;
}


.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
} 
ul#menu {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 100;
    list-style: none;
}
  
ul#menu li {
    background-color: #FF9;
    border-bottom: 5px solid #006;
    display: block;
    width: 240px;
    height: 30px;
    margin: 0px;
    float: left; 
}
  
ul#menu li a {
    color: #006;
    display: block;
    font-weight: bold;
    line-height: 30px;
    text-decoration: none;
    width: 240px;
    height: 30px;
    text-align: center;
}
  
ul#menu li.active, ul#menu li:hover {
    background-color: #003;
    border-bottom: 5px solid #FF831C;
}
-->
</style><style type="text/css">
body,td,th {
    font-size: medium;
    color: #000033;
}


{
height: 15px;
#height: 15px;
_height: 21px;
}


a {
[if lte Gecko 1.8] display: -moz-inline-stack;
[if lte Konq 3.1] float: left;
[if IE 5.0] margin-top: -1px;
[if IE] text-decoration: expression(hideFocus='true');
}


</style>


</head>


<body bgcolor="#1E90FF" text="#FFFFCC">
<div class="container">
  <div class="header"><a href="#"><img src="Immagini/logo.png" width="961" height="185" alt="logo" /></a>
    </ul>
    <ul id="menu">
    <li><a href="file:///C:/Users/PC/Desktop/%C3%A8Tempo!/Home.html">Home</a></li>
    <li><a href="file:///C:/Users/PC/Desktop/%C3%A8Tempo!/Liturgia_Domenicale.html">Liturgia domenicale</a></li>
    <li><a href="file:///C:/Users/PC/Desktop/%C3%A8Tempo!/Il_Vangelo.html">Il Vangelo</a></li>
    <li><a href="file:///C:/Users/PC/Desktop/%C3%A8Tempo!/Video.html">Video</a></li>
</ul>


  <!-- end .header --></div>
  <div class="content">
   
   <p>&nbsp;</p>
 <marquee style="font-size: 14pt; font-family:Book Antiqua; color: #ff0041" bgcolor="#09F" scrollamount="5"> Benvenuto.</marquee>
  <p>&nbsp;</p>
   
   <center> 
     <p><img src="Immagini/Senza-titolo-2.png" width="307" height="409" alt="provaa" /></p>
   </center>
   


      <p>&nbsp;</p>
      <p><center><img src="Immagini/under_construction_animated.gif" width="400" height="200" alt="under" /></center></p>
  </center></h1>
  <!-- end .content --></div>
  <div class="footer">
    <p>Piè di pagina</p>
    
       <script type="text/javascript" src="http://counter6.statcounterfree.com/private/counter.js?c=8e200544223c26768224b4bd7fb1cfd5"></script>


    
    <!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>

**Prill** · 17-07-2014, 22:00

Ripartirei da qui:

codice:

<style type="text/css">
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #1e90ff;
                color:#ffffcc;
    background-image: url(Immagini/Sfondoo.png);
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;        padding-right: 15px;
    padding-left: 15px;
}
a img { 
    border: none;
}
a {
    color: #ffff66;
    text-decoration: underline;
}
a:visited {
    color: #6e6c64;
}
a:hover, a:active, a:focus {
    text-decoration: none;
}
#sidebar { float: left; width: 200px; background: #ebebeb; padding: 15px 10px 15px 20px; }

.container {
    width: 960px;
    background-color: #fff;
    margin: 0 auto; 
}
.header {
    background-color: #1e90ff;
}
.content {
    padding: 10px 0;
    background-color: #58acfa;
}
.footer {
    padding: 10px 0;
    background-color: #1E90FF;
}
.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
} 
ul#menu {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin: 0;
    list-style: none;
}
  
ul#menu li {
    display: block;
    width: 240px;
    height: 30px;
    background-color: #ff9;
    border-bottom: 5px solid #006;
    margin: 0;
    float: left; 
}
  
ul#menu li a {
    color: #006;
    display: block;
    font-weight: bold;
    line-height: 30px;
    text-decoration: none;
    width: 240px;
    height: 30px;
    text-align: center;
}
ul#menu li a:hover {
    color: #fff;
}  
ul#menu li.active, ul#menu li:hover {
    background-color: #003;
    border-bottom: 5px solid #ff831c;
}
</style>

</head>

<body>
<div class="container">
  <div class="header"><a href="#"><img src="Immagini/logo.png" width="961" height="185" alt="logo" /></a>
    <ul id="menu">
    <li><a href="Home.html">Home</a></li>
    <li><a href="Liturgia_Domenicale.html">Liturgia domenicale</a></li>
    <li><a href="Il_Vangelo.html">Il Vangelo</a></li>
    <li><a href="Video.html">Video</a></li>
</ul>
  <!-- end .header --></div>
  <div class="content"> 
 <marquee style="font-size: 14pt; font-family:Book Antiqua; color: #ff0041" bgcolor="#09F" scrollamount="5"> Benvenuto.</marquee>
        <p style="text-align:center"><img src="Immagini/Senza-titolo-2.png" width="307" height="409" alt="provaa" /></p>
       <p style="text-align:center"><img src="Immagini/under_construction_animated.gif" width="400" height="200" alt="under" /></p>
  <!-- end .content --></div>
  <div class="footer">
    <p>Piè di pagina</p>   
    <!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>

1. da eliminare il --> prima della chiusura del primo foglio di stile;
2. da eliminare formattazioni contrastanti o ripetute (margini e colori del testo su body, nei css e come attributi in linea);
3. da eliminare il tag center (metterai piuttosto un allineamento centrato sui paragrafi - io l'ho inserito in linea ma meglio portarlo nel css);
4. da eliminare i paragrafi vuoti e per spaziare maggiormente usare i margini;
5. da eliminare chiusure di tag non aperti;
6. evitare percorsi assoluti che fanno riferimento al proprio computer (usare piuttosto percorsi relativi - quelli da me indicati potrebbero non corrispondere);
7. da evitare il tag marquee, io l'ho lasciato ma puoi trovare un javascript che faccia lo stesso;
8. da evitare css fantasiosi (il secondo css, che in realtà dovrebbe appoggiarsi a uno script php, mi pare del tutto privo di senso facendo riferimento a versioni di browser vetuste).

**Shinzo** · 18-07-2014, 13:16

Grazie mille per la risposta ed i consigli

sei stato davvero molto gentile.

Avrai notato che sono un principiante molto molto molto principiante XD

Allora: il tag marquee l'ho trovato in giro su internet e mi è sembrato "carino(?)"... qualche script che abbia la stessa funzione dove potrei trovarlo?
"css fantasiosi" a quale fai riferimento?

Inoltre, mentre ci siamo, per l'immagine di sfondo che risulta sfasata solo su IE come dovrei comportarmi? Modificando il codice come hai detto tu dovrei risolvere?
E se volessi aggiungere delle immagini (modificabili di volta in volta) ai lati del logo principale (esterne però ad esso) si potrebbe fare? Che appaiono come "contorno", diciamo, del sito.

Non so se sono riuscito a spiegarmi ^^

**Prill** · 18-07-2014, 14:21

Per quanto riguarda il marquee, questo è il primo esempio che ho trovato http://www.felgall.com/jstip109.htm
ma altro potrai trovare cercando su google javascript marquee o text scroller o simili

Per quanto riguarda la soluzione del problema in explorer prova il codice corretto ma cancella prima

codice:

<meta http-equiv="X-UA-Compatible" content="IE=XXX" />

quel meta per la compatibilità di Explorer è inutile se una pagina è costruita con tutti i crismi, ma fra l'altro il valore XXX dovrebbe essere sostituito da una versione del browser

Puoi aggiungere altre immagini a fianco del logo, potrebbero andare come sfondo o anche col tag img nell'html, dipende dalla funzione che hanno. Vedi intanto se si risolve il problema di partenza con ie

Discussione: problemi con Dreamweaver e IE

Strumenti discussione

Ricerca discussione

Visualizza

problemi con Dreamweaver e IE

Permessi di invio