[CSS] bordo intorno a miniature e shadowbox [Archivio]

claudio82clod

17-09-2009, 09:57

Sono un principiante del CSS, sto lavorando su questa pagina

http://www.mondoviphoto.com/photogallery.html

in cui sto provando ad usare shadowbox e pare funzioni.

Unico problema intorno alle miniature mi si crea quel bordo blu quando visualizzo il sito con IE7. In IE8 e firefox non si vede.
Avete idea da dove possa saltare fuori?

Altra domanda come faccio ad affiancare le due o più miniature senza che il div contenuto si riduca automaticamente?

Questo l'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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META name="description" content="Sito web dell' Associazione fotografica Mondovì Photo o Mondovì Foto">
<META name="keywords" content="mondovì, foto, photo, concoro, concorsi fotografici, associazione, fotografica, associazione fotografica, cuneo, piemonte">
<title>Associazione Fotografica Mondovì Photo</title>
<link href="css/globalrossigrigi.css" rel="stylesheet" type="text/css" TITLE="Contemporary">

<link rel="stylesheet" type="text/css" href="shadowbox-build-3.0b/shadowbox.css" TITLE="Contemporary">
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>

<body>
<div id="spazioalto"></div>
<div id="container">
<div id="header">
<div id="logo"><img src="immagini/logobianco.gif" width="246" height="105" alt="logo" /></div>
<div id="trafiletto"></div>
<div id="spazioDXpulsanti"></div>
<div id="pulsanti">
<div id="spaziosoprapulsanti"></div>
<div id="linkhome"><a href="index.html">Home</a></div>
<div id="linkchisiamo"><a href="chisiamo.html">Chi siamo</a></div>
<div id="linkdovesiamo"><a href="dovesiamo.html">Dove Siamo</a></div>
<div id="linkconcorsi"><a href="concorsi.html">Concorsi</a></div>
<div id="linkphoto"><a href="photogallery.html">Photo Gallery</a></div>
</div>
</div>
<div id="colonnasinistra">
<div id="collegamentocolonna">
<a href="concorsi.html">16/09/09 20.45<br />
Grazie a tutti i partecipanti per la fiducia dimostrataci...</a>
</div>
<div id="collegamentocolonna"><a href="concorsi.html">15/09/09 20.38<br />Grande successo del concorso fotografico Ritratto Monregalese...</a></div>
</div>
<div id="contenuto">
<div id="immagine"></div>
<p>PAGINA IN COSTRUZIONE </p>
<p>PROVA SHADOWBOX </p>
<div id="immaginishadowbox"><a href="immagini/grandi/garzette.jpg" rel="shadowbox"><img src="immagini/miniature/garzette.jpg" width="240" height="161" alt="Garzette" /></a></div>
<div id="immaginishadowbox"><a href="immagini/grandi/nebbia.jpg" rel="shadowbox"><img src="immagini/miniature/nebbia.jpg" width="240" height="161" alt="Garzette" /></a></div>
</div>
<div id="piepagina">
<p>Associazione Fotografica Mondovì Photo © 2009 Tutti i diritti sono riservati.</p>
<a href="mailto:info@mondoviphoto.com">info@mondoviphoto.com</a>
</div>
</div>
</body>
</html>

E questo il foglio di stile CSS

@charset "utf-8";
/* CSS Document */

html,body{margin: 0;padding:0}
body{
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-align: left;
background-color: #000;
}
#contenuto p {
color: #FFF;
}

p {
margin: 0px;
padding: 0.6em;
}

#container{
width: 800px;
text-align: left;
border: thin solid #FFF;
background-color: #333;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#trafiletto {
background-color: #E73F3A;
height: 5px;
}

#pulsanti {
background-color: #999;
height: 2.2em;
}

#spazioalto {
height: 10px;
}
#collegamentocolonna {
font-size: 0.8em;
font-style: italic;
padding: 5px;
}

a {
color: #B81B16;
text-decoration: none;
font-weight: bold;
}

A:HOVER {
color : #fe2501;
}

A:ACTIVE {
color : #fe2501;
text-decoration: underline
}

#spaziosoprapulsanti {
height: 0.4em;
}

#colonnasinistra {
width: 13em;
float: left;
}
#piepagina a {
color: #00F;
font-weight: normal;
text-decoration: none;
}

#header{
background-color:#333;
color: #FFF
}
#contenuto {
background-color: #1e1e1e;
margin-left: 13em;
}
#immagine {
float: right;
}

#spazioDXpulsanti {
background-color: #999;
float: left;
width: 13em;
height: 2.2em;
}

#piepagina {
background-color: #E73F3A;
clear: left;
text-align: center;
}

#logo {
text-align: center;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 12px;
padding-left: 6px;
}
#linkhome {
width: 8em;
float: left;
}

#linkchisiamo {
width: 8em;
float: left;
}

#linkdovesiamo {
width: 8em;
float: left;
}

#linkconcorsi {
width: 8em;
float: left;
}
#contenuto a {
padding: 0.6em;
}

#linkphoto {
width: 8em;
float: left;
}

#collegamentocolonna A:HOVER {
color : #fe2501;
}

#collegamentocolonna A:ACTIVE {
color : #fe2501;
text-decoration: underline
}
#titolocontenuto {
color: #FFF;
font-size: 1.2em;
font-weight: bold;
padding: 0.3em;
}

#immaginishadowbox {
}
#immaginishadowbox a {
}

#immaginishadowbox a:hover {
}

#immaginishadowbox a:link {
}