Nel contenitore ho messo il seguente codice:
Che serve a rendere elastico il contenitore.codice:min-height: 10px; /* per i browser standard */ height: auto !important; /* questo sovrascrive la riga successiva, sempre sui browser standard */ height: 10px; /* min-height su IE6 */
Questo è lo scherzo che mi fa:
E' la sola pagina che fa così. Le altre sono perfette. Su IE7
Vi prego se avete idee ditemi... Con questo avrei finito il sito...
Niente è tutta la mattina che faccio prove... Ma niente... Explorer che fa 2 cose diverse con lo stesso codice... Non capisco davvero.
MMmm.... devi decisamente imparare ad essere più preciso.... altrimenti non ti risponderà nessuno (è già la seconda volta mi pare).
Devi darci gli elementi per capire cosa vuoi ottenere.....
Ora come ora non ho idea di cosa sia il container, non coosco la struttura HTML, non so come si vede sugli altri browser e non so che cosa vuoi fare.
Ho molta immaginazione ma non sono così bravo :rollo:
Hai ragione. Cmq il problema non riguarda la compatibilità TRA i browser, bensì 2 pagine con lo stesso CSS si vedono in maniera differente in explorer.
CSS
HTML Pagina incriminatabody {
font-family: "Bitstream Vera Serif";
font: 76% "Bitstream Vera Sans Mono";
background-color: silver;
color: white;
}
div#banner{
position: absolute;
left: 50%;
margin-left: -364px;
}
p.special:first-letter {
float:left;
font-size: 20px;
color: white;
border:groove;
}
p.intro{
text-align: center;
font-style: oblique;
line-height: 20px;
}
h1{
font-size: larger;
text-align: center;
border: groove;
}
a{
color: white;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:visited{
color: #C1C1C1;
}
dt{
font-weight:bold;
}
dd{
margin-left: 0px;
}
dd.blank{
margin-top:20px;
}
ul{
list-style: none;
list-style-position: outside;
margin-left: -20px;
}
li{
list-style: none;
list-style-position: outside;
}
div#container{
width: 924px;
position: absolute;
left: 50%;
margin-left: -462px;
margin-top: 120px;
background-image: url(./Images/background3.jpg);
}
div#header{
width: 924px;
height: 90px;
background-image: url(./Images/title.jpg);
background-position: center;
border-bottom: 1px solid silver;
border-top: 1px solid silver;
}
div#navigation{
float: left;
width: 170px;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
margin-left: 90px;
}
div#menu{
margin: 10px;
line-height: 30px;
border-bottom: 1px solid silver;
}
div#links{
margin-top: 20px;
margin-left: 10px;
margin-right: auto;
vertical-align: middle;
line-height: 30px;
}
div#content{
height: auto !important; /* questo sovrascrive la riga successiva, sempre sui browser standard */
height: 1%; /* min-height su IE6 */
min-height: 1%; /* per i browser standard */
margin-left: 275px;
margin-right: 105px;
margin-bottom: 30px;
border-left: 1px solid silver;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
padding: 10px;
}
div#footer{
position: relative;
bottom: 0px;
background-color: black;
clear: both;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
padding-top:1%;
text-align: center;
height: 50px;
width: auto;
font: 10px "Bitstream Vera Sans Mono";
}
div#containerfoto{
width: 206px;
margin-left:20px;
float:right;
clear:right;
}
div#fotoscheda{
border: 3px solid silver;
margin-bottom: 20px;
}
div#back{
width: 40px;
position: relative;
bottom: auto;
left: 480px;
clear: both;
border: 1px solid silver;
}
div#gtevent{
height: 150px;
width: 100%;
text-align: center;
}
La pagina si vede cosi:codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> Bad Illusion Website </title> <meta name="description" content="Bad Illusion Website - Sito ufficiale della cover band di Genova"> <meta name="Keywords" content="Gabriele D'Antimi, Stefano Morchio, Marco Garbarino, Ivan Biancardi, Morena Fiore, Genova, Rock, Hard Rock, Cover Band, Bad Illusion, Musica, Gruppo, Gruppo Genovese, Genovese, Anni 70, Anni 80, Date"> <link rel="stylesheet" type="text/css" href="./badsite.css"> </head> <body> <div id="banner"> <script type="text/javascript"> //<![CDATA[ document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/r='+new Date().getTime()+'"><\/s'+'cript>'); //]]> </script> </div> <div id="container"> <div id="header"></div> <div id="navigation"> <div id="menu"> [*]Home [*]News [*]Date [*]Gruppo [*]Foto [*]Forum [*]Contatti </div> <div id="links"> [*][*][img]./Images/cssimage.jpg[/img] [*]<a href="http://validator.w3.org//">[img]./Images/w3c.gif[/img] [*]
[*]
[*][img]./Images/genovatune150.gif[/img] [*]
[*] <script type="text/javascript" language="JavaScript" SRC="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=badillusion"></script> <noscript> <A HREF="http://www.shinystat.com" target="_top">
</A> </noscript> </div> </div> <div id="content"> <h1>Introduzione</h1> <p class="special intro">Bad Illusion è un gruppo che fa per lo più cover anni '70, '80. Questo perchè ci piace ricordare musicalmente quel periodo. Il boom del rock in tutte le sue derivazioni e forme, il periodo degli eccessi, della fama e della gloria, dei talenti mancati ma soprattutto dei sogni. Il sogno americano dove la storia è sempre la stessa, la solita, con pochi cambiamenti, dove un gruppo di ragazzi spesso disadattati e che passano le giornate a suonare e drogarsi diventano da un giorno all'altro delle star di fama mondiale. Migliaia di persone li adorano e vanno ai loro concerti. Alcuni diventano delle leggende, degli dèi. Per questo riproponiamo quelle canzoni che hanno segnato la storia del rock. Perchè le leggende vanno ricordate...</p> <p align="right">Bad Illusion</p> </div> <div id="footer">Copyright© Bad Illusion Tutti i contenuti di proprietà dei rispettivi autori Realizzazione del sito a cura di Gabriele D'Antimi </div> </div> </body> </html>
Un'altra così:
In quella errata si sposta verso il basso alla stessa altezza di dove finisce il menu. E non riesco a capire il perchè.
Mmmm non capisco perchè hai creato due div, per #menu e #navigation.
Non potevi usarne uno solo?
Poi ti faccio notare che gli elementi delle liste da soli non bastano.
Ci vuole anche un 'raggruppatore' e identificatore della lista.
Senza <ul> è un discreto errore di sintassi...... correggilo!!codice:<ul>[*]content[*]content[*]content[*]content[*]content[/list]
Sennò chi legge il bollino "W3C Css Valid!" non ti prende sul serio
Ad ogni modo non capisco che criteri hai usato per creare il template e posizionare il menu e il contenuto.
Perchè metti quei margini al #content?
A cosa servono?
Hai una larghezza fissa. Impostale manualmente ad entrambi e ad uno metti float: left (al menu) e float: right (al content).
Ti va a sotto perchè la larghezza non è specificata e probabilmente il contenuto del #content lo influenza, redimensionandolo e (siccome non ha abbastanza spazio in larghezza) mandandolo a capo.
Dai una larghezza fissa (in pixel o percentuale) e dovresti essere a posto.
Ciao
Il div menu ho preferito separarlo in 2 con una parte per la navigazione e una parte per i links...
Gli[*] devo aggiustarli ma non sono un problema!
Il mio template è fatto pensando ai sidebar:
il contenuto non deve andarci sopra. Sono larghi 90. Quindi i margini servono per non coprirli.
Come dici te funziona, però ora il div content non riesco più a centrarlo in entrambi i browser!
Ho risolto con un calcolo più accutato delle misure... Grazie cmq per le risposte!
Permessi di invio
Rispondi quotando