margini diversi in IE e FF [era: [AIUTO] - FF Vs Explorer]

**TheBestNeo** · 09-06-2007, 16:19

Sicuramente una questione di margini. Vi posto le immagini.
FF:

Explorer:

Come vedete in basso a destra la mia cornice si interrompe dannatamente. E a sinistra il div del menu non è uguale.

CSS:

body {
font-size: 76%;
font-family: "Bitstream Vera Serif";
font: 12px "Bitstream Vera Sans Mono";
background-color: silver;
color: white;
padding-bottom: 15px;
}
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;
}

li{
list-style: none;
}

div#container{
width: 924px;
background: black;
position:absolute;
left:50%;
margin-left:-462px;
margin-top: 30px;
margin-bottom:30px;
}
div#header{
width: 924px;
height: 90px;
background-image: url(./Images/title.jpg);
background-position: center;
border-bottom: thin solid silver;
border-top: thin solid silver;
}
div#navigation{
float: left;
min-height: 670px;
width: 260px;
background-image: url(./Images/sidebar.jpg);
background-repeat: repeat-y;
border-right: thin solid silver;
border-bottom: thin solid silver;
padding-right: 10px;
}
div#menu{
margin-left: 105px;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 10px;
line-height: 30px;
border-bottom: thin solid silver;
}
div#links{
margin-top: 20px;
margin-left: 105px;
margin-right: auto;
vertical-align: middle;
padding-top: 50px;
line-height: 30px;

}
div#content{
margin-left: 270px;
padding-left: 15px;
padding-right: 105px;
padding-top: 10px;
background-image: url(./Images/sidebar.jpg);
background-position: top right;
background-repeat: repeat-y;
margin-bottom: auto;
margin-right: auto;
margin-top: auto;
}

div#footer{
clear: both;
border-top: thin solid silver;
text-align: center;
height: 50px;
line-height: 2px;
border-bottom: thin solid silver;
vertical-align: middle;
font: 10px "Bitstream Vera Sans Mono";
}
div#fotoscheda{
background-image: url(./Images/photo1.jpg);
width: 200px;
height: 300px;
float: right;
border: medium solid silver;
}
div#back{
float: right;
position: relative;
vertical-align: bottom;
clear: right;
margin-top: 200px;
}
div#gtevent{
margin-top: 460px;
height: 150px;
width: 100%;
text-align: center;
}
div#slide{
position: relative;
width: 500px;
height: 400px;
border: 5px groove silver;
margin: auto;
background-color: silver;
}
/*
a.mini1{background:url(./foto1.jpg);}
a.mini2{background:url(./foto2.jpg);}
a.mini3{background:url(./foto3.jpg);}
a.mini4{background:url(./foto4.jpg);}
a.mini5{background:url(./foto5.jpg);}
a.mini6{background:url(./foto6.jpg);}
*/
a.galleria span {
display:block;
position:absolute;
width:1px;
height:1px;
top: 5px;
left: 5px;
overflow:hidden;
background:#000;
}

a.galleria, a.galleria:visited {
display:block;
color:#4a679f;
font-weight:bold;
text-decoration:none;
border:1px solid #fff;
width:75px;
height:47px;
float:left;
margin:3px;
z-index:100;
}

a.galleria:hover {
border:1px solid #ddd;
}
a.galleria:hover img {
border:1px solid #ddd;
position:relative;
z-index:100;
}
/*Sposta l'immagine selezionata all'interno del contenitore*/
a.galleria:hover span{
display:block;
position:absolute;
width:400px;
height:300px;
top: 80px;
left: 40px;
padding:5px;
background:transparent;
z-index:100;
}

Come devo impostare i margini per farlo venire bene uguale?

PS. In esplorer non mi salta una riga tra le caratteristiche di ogni persona. In ff si... Sapete perchè?

Grazie

**TheBestNeo** · 09-06-2007, 16:55

Devo aver fatto casino con imageshack... Ho solo fatto il resize... Aspe

FF

EXPLORER

**TheBestNeo** · 10-06-2007, 11:11

Ma nessuno???

**TheBestNeo** · 10-06-2007, 18:10

Almeno un link, una dritta... Ma proprio niente?

**TheBestNeo** · 11-06-2007, 10:43

Continuerò a far up. In 60 avete visto il post e nessuno ha una mezza idea?

**Mich_** · 11-06-2007, 11:25

Hai fatto vari errori nel postare la domanda.

1. Hai usato un titolo non chiaro: nessuna delle parole usate ha una relazione con il testo.
2. Hai inserito un codice CSS senza il corrispondente HTML.
3. Hai inserito codice senza usare i tag corretti (e questo diminuisce la leggibilita`): devi usare i tag # ( [ code ] - senza spazi) o PHP.
4. Hai inserito un codice molto lungo: chi si va a spulciare tutto il codice per capire quali margini possono avere il problema?

**TheBestNeo** · 11-06-2007, 11:37

Ok allora correggo.
Bad Illusion Website

Cmq non sono sicuro siano i margini. Lo suppongo solo.
Css [Taglio le parti che non servono]

codice:

body {
font-size: 76%;
font-family: "Bitstream Vera Serif";
font: 12px "Bitstream Vera Sans Mono";
background-color: silver;
color: white;
padding-bottom: 15px;
}
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;
}

li{
list-style: none;
}


div#container{
width: 924px;
background: black;
position:absolute;
left:50%;
margin-left:-462px;
margin-top: 30px;
margin-bottom:30px;
}
div#header{
width: 924px;
height: 90px;
background-image: url(./Images/title.jpg);
background-position: center;
border-bottom: thin solid silver;
border-top: thin solid silver;
}
div#navigation{
float: left;
min-height: 670px;
width: 260px;
background-image: url(./Images/sidebar.jpg);
background-repeat: repeat-y;
border-right: thin solid silver;
border-bottom: thin solid silver;
padding-right: 10px;
}
div#menu{
margin-left: 105px;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 10px;
line-height: 30px;
border-bottom: thin solid silver;
}
div#links{
margin-top: 20px;
margin-left: 105px;
margin-right: auto;
vertical-align: middle;
padding-top: 50px;
line-height: 30px;

}
div#content{
margin-left: 270px;
padding-left: 15px;
padding-right: 105px;
padding-top: 10px;
background-image: url(./Images/sidebar.jpg);
background-position: top right;
background-repeat: repeat-y;
margin-bottom: auto;
margin-right: auto;
margin-top: auto;
}

div#footer{
clear: both;
border-top: thin solid silver;
text-align: center;
height: 50px;
line-height: 2px;
border-bottom: thin solid silver;
vertical-align: middle;
font: 10px "Bitstream Vera Sans Mono";
}
div#fotoscheda{
background-image: url(./Images/photo1.jpg);
width: 200px;
height: 300px;
float: right;
border: medium solid silver;
}
div#back{
float: right;
position: relative;
vertical-align: bottom;
clear: right;
margin-top: 200px;
}
div#gtevent{
margin-top: 460px;
height: 150px;
width: 100%;
text-align: center;
}

E l'html relativo ad una pagina

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="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</p>
        Realizzazione del sito a cura di Gabriele D'Antimi

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

Se sapete cmq darmi l'indirizzo di una buona guida che mi dica come funzionano i margini nei diversi browser vedo di arrangiarmi!

Discussione: margini diversi in IE e FF [era: [AIUTO] - FF Vs Explorer]

Strumenti discussione

Ricerca discussione

Visualizza

[AIUTO] - FF Vs Explorer

Permessi di invio