Newbie del CSS... non so che pesci pigliare

**naoto84** · 21-02-2006, 19:51

Ciao a tutti...

Sono diverse ore che tento di venire a capo (anch con le guide che ci sono su questo sito) del mio problema, solo che mi mancano davvero le conoscenze.
Ho scaricato da wordpress-theme un template per blogspot e ho cominciato a modificarlo (poco alla volta.. io non sono un esperto di HTML e CSS) per adattarlo alle mie esigenze.

Finito il breve lavoro vado per fare un test con IExplorer (che io non uso)... e non va! Layout completamente sbagliato!

Vi allego l'intero template e metto il link a quello che sarà il mio blog... se mai riuscirò a risolvere il problema.

http://redatribune.blogspot.com

Potrete vedere da voi le differenze tra FF e IE.

Bè... chiaramente se avessi studiato il CSS da cima a fondo saprei forse trovare da solo il problema. Solo che non avevo questa velleità... non per niente mi ero preso un template già pronto!
Quindi chiedo proprio un aiuto-consulenza...

Ciao a tutti, e grazie!

codice:

<!--//
// 05/11/2005
// Template by V4NY
// http://v4ny.net
// admin@layoutstudios.com
//
//  Don't remove the credits from the themes or templates.
//   * Creative commons by-nc-nd license.
// * But you have the permision to change images and colors of my templates and themes.
//
//-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xh<!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" xml:lang="en" lang="en">
<head>
  <title><$BlogPageTitle$></title>

  <$BlogMetaData$>
<style type="text/css">
body{
	background-color: #5696B1;
	color: #FFFFFF;
	margin: 0px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        background-image: url(http://img75.imageshack.us/img75/2412/uc68a16bx.jpg);
        background-repeat: repeat;
 
}

#wrap{
  width: 810px;
  margin: 0 auto;
text-align: left;
  }

#container{
        float: left;
	width: 600px;
	color: #ffffff;
	border-left: 1px solid #264551;
	border-right:  1px solid #264551;
	border-bottom:   1px solid #264551;
	background-color: #034D7A;
}
#head{
	background-image: url(http://img50.imageshack.us/img50/2662/testata1hn.jpg);
	height: 352px;
	background-repeat: no-repeat;
	background-position: center;
}
#content{
	padding: 15px;
	font-size: 11px;
        line-height: 140%;
}
#contentright{
	margin-left: 610px;
	background-color: #F37022;
	width: 200px;
	padding: 5px;
	border-left:1px solid #A9460A;
	border-right: 1px solid #A9460A;
	border-bottom:  1px solid #A9460A;
	color: #034D7A;
	font-size: 11px;
}
.entriEs{
	margin-bottom: 15px;
}
h2.sectiontitle{
	border-bottom:1px solid  #9B3D09;
	border-top: 1px solid  #9B3D09;
border-left: 1px solid #033F66;
border-right: 1px solid #033F66;
	background-color: #F9BC0B;
	font-size: 11px;
	letter-spacing: 3px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	color: #034D7A;
	margin-bottom: 10px;
}
.pside{
	font-weight: bold;
}
ul{
	list-style: square;
	font-size: 11px;
	color: #034D7A;
  	padding-left: 20px;
 	margin-left: 5px; 
}
.postmetadata{
	color: #69A3BA;
}
h2.itemtitle{
 	background-color: #5696B1;
	border-bottom: 1px solid #033F66;
	border-top: 1px solid #033F66;
	font-size: 11px;
	letter-spacing: 3px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: #FFFFFF;
	padding: 2px 0 2px 0;
 }

#content a:link, #content a:visited{
 	color: #FABF0D;
	text-decoration: none;
 }
#content a:hover{

	color: #FEEFC2;
	text-decoration: none;
}
#contentright a:link,#contentright a:visited{
	color:  #034D7A;
	text-decoration: underline;
}
#contentright a:hover{
	color: #D5E5EB;
	text-decoration: underline;
}
.dateheader{
	color: #F8BC0C;
	text-align: right;
	margin-right: 10px;
	letter-spacing: 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
}
blockquote{
	background-image: url(http://img15.imgspot.com/u/05/324/11...1132589529.jpg);
	background-repeat: no-repeat;
	background-position: bottom right;
	color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding: 5px 5px 20px 5px;
	border: 1px solid #F9BB0E;
	background-color: #034D7A;
}

textarea{
	background-color: #5696B1;
	border: 1px solid #F9BC0C;
	padding: 2px;
	color: #FFFFFF;
	font-size: 11px;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	width:470px;
}
input,select{
	background-color: #5696B1;
	border: 0px solid #F9BC0C;
	padding: 0px;
	color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 2px;
}
td,th{
	font-size: 11px;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	color:#ffffff;
}
b{
	color: #C3DAE3;
}
.itemPost{
	margin: 10px 0px 10px 0px;
}
/* Profile */
.profile-datablock {
  margin:.5em 0 .5em;
  }
.profile-img {
  display:inline;
  }
.profile-img img {
  float:left;
  padding:4px;
  border:1px solid #EA9900;
  margin:0 8px 3px 0;
  }
.profile-data {
  margin:0;
  font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
.profile-data strong {
  display:none;
  }
.profile-textblock {
  margin:0 0 .5em;
  }
.profile-link {
  margin:0;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
 /*  comments */
.comments{
	margin: 10px 0px 10px 0px;
	border-bottom: 1px solid #EA9900;
	border-top: 1px solid #EA9900;
	color: #FFFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: lowercase;
	padding:2px;
 }
.commentsbody{
	border-bottom: 1px solid #EA9900;
	margin-bottom: 10px;
	color: #FFFFFF;
	padding: 5px;
 }
.commentsData{
 	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #EA9900;
	text-align: left;
 }
 .delete{
 	text-align: right;
 }
 .sidebar-title{
 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #972A00;
	text-align: center;
 }
</style>
</head>

<body>
<div id="wrap">
<div id="container">
		<div id="content">
		
		</div>
	</div>
	

	
	
	
	
	
	
	
		<div id="contentright">
		</div>
	
</div>
</body>
</html>

**Mich_** · 22-02-2006, 10:26

Prima di sbattere la testa sui muri, prova a fare in modo che IE legga il DOCTYPE.
Lo ottieni semplicemente spostando il DOCTYPE stesso alla prima riga della pagina.

In realta` non so come si comporti IE6 con una DTD transitional, mentre con la DTD strict dovrebbe comportarsi quasi come gli altri browser.

Il quasi di prima si riferisce al fatto che puo` essere necessario inserire hack e/o stili particolari.
Nella sezione layout dei "link utili" trovi vari riferimenti ad hack per IE.

**naoto84** · 22-02-2006, 11:34

Il tuo suggerimento è arrivato proprio mentre scoprivo la medesima cosa (con tentativi brutali... sono partito da un documento semplice e ho tentato man mano di farlo diventare come il blog... per accorgermi poi che il danno lo faceva quel maledetto commento ad inizio codice

)

Adesso va meglio... guardate!

http://redatribune.blogspot.com/

Ci sono sempre le differenze, ma so che quello è un problema che attanaglia tutti, figuriamoci me che non so quasi niente di CSS...

L'unica cosa che non capisco è perché la side-bar abbia quegli spazi verticali così dilatati in IE... non capisco da cosa siano generati: margine dei titoli, interlinea.. o chissà cosa...

Ma forse è meglio che mi accontenti, visto il mio livello.

Grazie per avermi aiutato... ciao.

Originariamente inviato da Mich_
Prima di sbattere la testa sui muri...

A volte aiuta... :master:

**Mich_** · 22-02-2006, 12:22

Occhio che il commento devi insesrirlo nella pagina: non metterlo e` violazione del copyright. Solo non metterlo prima del DOCTYPE.

Comunque in quella pagina ci sono numerosi JS: a che servono? All'apparenza la pagina e` statica, che ci fai con i JS?

**naoto84** · 22-02-2006, 13:27

Ok, giusto... ora rimetto il commento con il copyright.
No, la pagina non è statica, è un blog di blogspot.com... e i javascript che hai visto sono aggiunti da loro: solamente quello che crea l'avatar l'ho scritto io.

(ergo: non so che cosa facciano..

)

**V4NY** · 22-02-2006, 15:09

In efett visto che il tema l'ho fatto io se rimetti il copy non sono rispetti la licenza della CC che stava nella pagina dove hai scaricato il tema e fai anche una bella figura e ti ringrazio

**naoto84** · 22-02-2006, 15:18

Guarda chi c'èèèè... come è piccolo il web!

Brava, da te ci sono un sacco di temi bellissimi!
All'inizio mi ero orientato su installare da me una piattaforma WordPress... ma ho dovuto constatare che non è così perfetta come dicono: persino il tema di default causa problemi di formattazione e il pannello di amministrazione non lo trovo affatto comodo (non tanto per me ma anche per gli altri, visto che vorrebbe essere un blog collettivo).

Sai, se non lo diceva Mich io nemmeno me ne accorgevo che in quel commento c'era il copyright.. non l'avevo letto.
Però c'è sempre il link nei credits...

ps

Ma tu allora me lo sai dire perché in IE la sidebar è così allungata? Cosa è che inserisce tutto quello spazio? :master:

**V4NY** · 22-02-2006, 15:47

Ok ho capito .. è lo spazio tra le righe che viene calcolato in maniera diversa dai due browser line-height ..

qui trovi un hack per questo problema ^^

**naoto84** · 22-02-2006, 16:18

Ho ricreato alla fine della sidebar la situazione descritta dalla pagina che mi hai linkato (sperando di non aver capito male) ma il problema non compare: l'altezza delle linee è corretta sia in FF che in IE (per questa sezione io l'ho impostata al 140%), anzi è l'unica cosa che funziona! ^^

Lo spazio in più sembra apparire invece sopra e sotto gli elenchi puntati (la parte dei credits infatti è identica nei due browser), oltre che nella sezione "About us", che però è generata da blogger e non scritta da me... e poi anche il padding-top della sezione sidebar è corretto in IE e non in FF...

Questo CSS mi sembra un terreno un po' difficile...

me la passo meglio io che sono studente in ing.informatica e non devo combattere contro browser che mi remano contro...

Discussione: Newbie del CSS... non so che pesci pigliare

Strumenti discussione

Ricerca discussione

Visualizza

Newbie del CSS... un aiutino con la compatibilità

Permessi di invio