problema con IMG

**goxpix** · 22-08-2008, 11:36

Ciao a tutti, io ho un problema con IE.

Descrivo cosa ho fatto:
io mi sono creato un header di 1000px per 225 px con GIMP. In seguito ho usato Image map tool per mappare l'header per fare in modo che il logo sia cliccabile e punti alla HOME PAGE.
riporto il codice CSS

#header {
width: 1000px;
height: 225px;
padding: 0;
margin: 0;
margin-left: auto; margin-right: auto;
margin-top:50px;}

#nav {
clear: both;
padding: 0; margin: 0;
width: 1000px;
height: 50px;
background: url(../images/nav.png) no-repeat;
margin-left: auto; margin-right: auto;
}

Riporto il codice HTML da me utilizzato con la mappatura dell'header:

[img]./images/header.png[/img]

<map name="map">

<area shape="rect" coords="272,111,894,173" href="home.html" />
</map>

Con mozilla firefox funziona bene, mentre con IE mi succede quello che si vede nell'immagine allegata, mi lascia uno spazio tra l'header e la barra di navigazione NAV. Ho provato ad azzerare i bordi (margin) dell'immagine ma nulla.
Ho provato anche ad azzerare i margini della MAP, ma nulla, non riesco a capire come mai.

Se qualcuno ha una dritta. Grazie a tutti dell'attenzione

**Raccoon29** · 24-08-2008, 01:25

Ciao,

umm, non so davvero...
è possibile avere un link, o semmai il codice completo da poter testare?
Faciliterebbe di molto le cose!

Un'altra cosa, con quale IE lo stai testando?

resto in attesa
ciauz

**goxpix** · 25-08-2008, 08:30

Ciao, lo sto testando con IE 7.

Ti posto il codice CSS:

body {
background-color: #EEEEEE;
font: 14px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: #666666;
text-align: center;
}

#header {
width: 1000px;
height: 225px;
padding: 0;
margin: 0;
margin-left: auto; margin-right: auto;
margin-top:50px;
}

#nav {
clear: both;
padding: 0; margin: 0;
width: 1000px;
height: 50px;
background: url(../images/nav.png) no-repeat; /*nav.gif*/
margin-left: auto; margin-right: auto;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0 0 0 40px;
height: 50px;
}
#nav ul li {
display: inline;
margin: 0; padding: 0;
}
#nav ul li a {
display: block;
float: left;
width: auto;
margin: 0;
padding: 0 14px;
color: #000000;
font: bold 15px/50px Arial, sans-serif; /*16*/
text-decoration: none;
letter-spacing: -0.5px;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #edf8c7;
background-color:#0c4e80;
}
#nav ul li#current a {
background: #0c4e80 url(../images/pointer.gif) no-repeat center bottom;
color: #93DAFF;
}

#content-wrap {
clear: both;
padding:0;
margin: 0 auto;
width: 1000px;
background: url(../images/content.png) repeat-y;
}

#content {
width: 1000px;
padding: 0;
margin: 0 auto;
}

#footer-wrap {
clear: both;
width: 1000px;
height:150px;
text-align: center;
padding: 0;
margin: 0;
background: url(../images/footer2.png) no-repeat left bottom;
margin-left: auto;
margin-right: auto;
margin-bottom:50px;
}

#image img {
background: #fafafa;
border: 1px solid #dcdcdc;
padding: 7px;
}
#image img.float-right {
margin: 5px 0px 10px 10px;
}
#image img.float-left {
margin: 5px 10px 10px 0px;
}

p {
margin-top: 0px;
margin-bottom: 0px;
margin-right:30px;
margin-left:30px;
padding: 12px 10px;
}

blockquote {
margin: 0px 0px 0px 0px;
margin: 0 auto;
width:800px;
padding: 5px 7px 5px 40px;
font-weight: normal;
font-size: 17px;
line-height: 1.6em;
font-style: italic;
font-family: Georgia, 'Times New Roman', Times, serif;
color: #80614D;
border: 1px solid #DFF4B5;
background: #F0FFD2 url(../images/quote.gif) no-repeat 7px 10px;
}

a.link, a.link:visited {
color: #306495;
text-decoration: none;
font: bold 11px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif; /*16*/
}
a.link:hover {
color: #ffffff;
background-color: #CDEB8B;

font: bold 11px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif; /*16*/
}
h1 {
color:#006E2E;
}

e il codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>
<TITLE>PIOVONO GIORNATE DI SOLE (Edizioni Libreria Croce) - Valentino Odorico == HOME</TITLE>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<link rel="stylesheet" href="css/style.css" type="text/css" >
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" >
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

</head>

<body>

<div id="header">

[img]./images/header3.png[/img]

<map name="map">

<area shape="rect" coords="272,111,894,173" href="home.html" />

</div>

<div id="nav">
<ul>
<li id="current">Home
[*]Biografia
[*]Critica ufficiale
[*]Stampa
[*]Appuntamenti
[*]Incipit
[*]Link e contatti
[/list]
</div>

<div id="content-wrap">
<div id="content">

<div id="image" align="center">
<a href="images/copertina.jpg" rel="lightbox" title="Copertina">
[img]images/copertina.jpg[/img]</a>
</div>

<blockquote>

Benvenuti su HOME:

qua ci sarà da divertirsi.
</p>
</blockquote>

</div>
</div>

<div id="footer-wrap">

Home|
Biografia|
Critica ufficiale|
Stampa|
Appuntamenti|
Incipit|
Link e contatti

© 2008

</div>

</BODY>
</HTML>

Grazie per l'aiuto, io le ho provate tutte

**Raccoon29** · 25-08-2008, 17:29

Scusa di nuovo, sarebbe possibile avere l'immagine da inserire nello spazio dell'header, per capire qual è la posizione giusta, di quanto si sposta e così via...?
Per intenderci mi serve l'immagine "images/header3.png".

resto in attesa (di nuovo

)
ciauz

**goxpix** · 26-08-2008, 10:30

ciao, ti ho contattato in Skype
a presto
e grazie

**goxpix** · 26-08-2008, 15:28

ecco la foto

**goxpix** · 26-08-2008, 16:52

Grazie alla PREZIOSA COLLABORAZIONE DI Raccoon29, il problema si risolve scrivendo su una riga sola nell'HTML il seguente codice:

<div id="header">[img]header3b.png[/img]<map name="map"><area shape="rect" coords="272,111,894,173" href="home.html" ></map></div>

Tutto deve essere su una sola riga, altrimenti in IE 7 non funziona.

Grazie di tutto a Raccoon29

Discussione: problema con IMG

Strumenti discussione

Ricerca discussione

Visualizza

problema con IMG

Sono disponibili risorse?

L'immagine aiuterebbe pure

Permessi di invio