Pseudo-element :first-letter no firefox?

sevenumber · 6 Apr 2007

ciao a tutti,

ho utilizzato per la prima volta il pseudo-element :first-letter che ha la proprietà di personalizzare la prima lettera di un parola, ho letto nel web che è compatibile con i nuovi browser, compreso Firefox, ma io riesco a visualizzarlo solo con IE7, sbaglio qlcs?

HTML:

HTML

***

<!DOCTYPE html

 PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 <link rel="stylesheet" type="text/css" href="css.css" media="screen" />

 <title>New Body Gym </title>

 <meta name="generator" content="TYPO3 4.1 CMS" />

</head>

<body>

<div id="main-box">

 <div id="header-box">

   <div id="header">HEADER</div>   

</div>

<hr />

 <div id="left-box">menu</div>

 <div id="content-title">

 <h1 class="content-titlepage">New Body Gym </h1>

 <h1 class="content-subtitlepage">PALESTRA</h1>

 </div>

<hr />

 <div id="bottom-box">

             <p>

               FOOTER

            </p>

</div>

</div>

</body>

</html>



CSS

***

BODY {

    text-align: center;   /*centra in IE 5.x */

}

/* GENERAL fonts */

P, OL, UL, DIV, H1, H2 {

 font-family: verdana, arial;

 font-size: 12px;

}

HR { 

 display:none

}

/* contenitore globale */

DIV#main-box { 

 width: 990px;

 text-align: left;

 margin: 0px auto;

}

/* header */

DIV#header-box { 

 background: #ccc; 

 margin: 0px; 

}

/* colonna sinistra */

DIV#left-box { 

 float: left;

 width: 200px;

 vertical-align: top;

 margin-top: 10px;

}

/* colonna destra - TITOLO */

DIV#content-title { 

 float: right;

 width: 780px;

 margin-top: 10px;

}

/* footer */

DIV#bottom-box { 

 clear: both;

 border-top: dotted 1px #999;

 margin-top: 10px; 

}

DIV#bottom-box P { 

 margin-top: 10px;

 font-size: 10px;

 text-align: center;

}

/* contenuto destra */

/* CONTENT-TILE - TITOLO */

DIV#content-title H1.content-titlepage { 

 color: #000;

 font-size: 28px;

    font-style: italic;

 font-weight: normal;

 text-transform: capitalize;

 height: 18px;

 margin-top: 0px;

 display: inline;

}

DIV#content-title H1.content-titlepage:first-letter { 

   font-size: 40px; 

 font-weight: bold;

   margin:-5px 0px 0px 0px; 

}

DIV#content-title H1.content-subtitlepage { 

 color: #000;

 font-size: 14px;

    font-style: italic;

 font-weight: normal;

 text-transform: uppercase;

 height: 18px; 

 margin-top: 0px;

 margin-left: 8px;

 display: inline;

}

ciao

Sevenumber

dead · 6 Apr 2007

è colpa di questa istruzione:

DIV#content-title H1.content-titlepage {
color: #000;
font-size: 28px;
font-style: italic;
font-weight: normal;
text-transform: capitalize;
height: 18px;
margin-top: 0px;
display: inline;
}

Quando metti l'inline, l'elemento perde le proprietà di block e Firefox giustamente lo tratta come parte dell'elemento precedente, e quindi la "N" non è una first-letter.

togli display:inline e modifica l'html cosi:
<h1 class="content-titlepage">New Body Gym <span class="content-subtitlepage">PALESTRA</span></h1>

P.S.
usare la DTD 4.1 transitional è attuale come usare windows 3.1 usa piuttosto la 1.0 Strict. :gun:

ciao.

sevenumber · 10 Apr 2007

ok sistemato ma si c'è un ulteriore problema, IE7 si crea un'altezza del DIV#content-title che con Firefox (correttamente) non viene fuori... why?

questo il codice corretto:

HTML:

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 <link rel="stylesheet" type="text/css" href="css.css" media="screen" />

 <title>New Body Gym </title>
<style type="text/css">BODY {

    text-align: center;   /*centra in IE 5.x */

}

/* GENERAL fonts */

P, OL, UL, DIV, H1, H2 {

 font-family: verdana, arial;

 font-size: 12px;

}

HR { 

 display:none

}

/* contenitore globale */

DIV#main-box { 

 width: 990px;

 text-align: left;

 margin: 0px auto;

}

/* header */

DIV#header-box { 

 background: #ccc; 

 margin: 0px; 

}

/* colonna sinistra */

DIV#left-box { 

 float: left;

 width: 200px;

 vertical-align: top;

 margin-top: 10px;

}

/* colonna destra - TITOLO */

DIV#content-title { 

 float: right;

 width: 780px;

 margin-top: 10px;
 
 background-color:#FF6633;

}

/* footer */

DIV#bottom-box { 

 clear: both;

 border-top: dotted 1px #999;

 margin-top: 10px; 

}

DIV#bottom-box P { 

 margin-top: 10px;

 font-size: 10px;

 text-align: center;

}

div#content-title h1.content-titlepage { 
	color: #000;
	font-size: 28px;
    font-style: italic;
	font-weight: normal;
	text-transform: capitalize;
	height: 18px;
	margin-top: 0px;
	background-color: #FFFF99;
}
div#content-title h1.content-titlepage:first-letter { 
  	font-size: 40px; 
	font-weight: bold;
  	margin:-5px 0px 0px 0px; 
	background-color: #FFCC66;
}
div#content-title span.content-subtitlepage { 
	color: #000;
	font-size: 14px;
    font-style: italic;
	font-weight: normal;
	text-transform: uppercase;
	height: 18px; 
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 8px;
	background-color:#66CCFF;
}

</style>

 <meta name="generator" content="TYPO3 4.1 CMS" />

</head>

<body>

<div id="main-box">

 <div id="header-box">

   <div id="header">HEADER</div>   

</div>

<hr />

 <div id="left-box">menu</div>

 <div id="content-title">

 <h1 class="content-titlepage">New Body Gym

 <span class="content-subtitlepage">PALESTRA</span></h1>

 </div>

<hr />

 <div id="bottom-box">

             <p>

               FOOTER

            </p>

</div>

</div>

</body>

</html>

dead · 10 Apr 2007

Non ho controllato nel dettaglio il codice, ma in genere quando ci sono delle "altezza nascoste" è dovuto alle impostazioni del css di default del browser.

per esempio l'elemento P, se non specifichi niente ha un padding e/o un margin di default, lo stesso potrebbe essere per i div, ora non ricordo esattamente.

Prova ad impostare esplicitamente nel tuo CSS tutte le direttive che potrebbero influenzare tale comportamento, es:
padding:0; margin:0, line-height, ecc.

P.S. comunque se usi il DOM inspector, puoi vedere per ogni elemento sia le direttive del tuo foglio di stile, sia quelle automaticamente applicate dal browser.

ciao.

sevenumber · 11 Apr 2007

quindi mi consigli per avere un risultato più standard possibile assegnare cmq anche istruzioni vuote... ad es:

padding: 0px 0px;
margin: 0px 0px;

?

dead · 11 Apr 2007

Da una parte meno ne metti, più il tuo CSS sarà leggero, dall'altra mettendole eviti che i vari browser utilizzino i loro default.
Devi trovare il giusto compromesso in base alle tue esigenze.

PS, se e solo se usi come valore "zero", puoi evitare l'unita di misura:
margin:0; ha lo stesso effetto di margin: 0px 0px 0px 0px;

sevenumber · 11 Apr 2007

grazie del consglio, ma mi hanno anche detto che sarebbe meglio scrivere 0px poichè certi browser fanno casino ...

cmq ho eseguito tutti i tuoi consigli ma il problema si presenta sempre ... tra content-title e content-box con IE7 è ok (vede correttamente il margine top di content-box) mentre Firefox "attacca" i due contenitori!!!! why?

HTML:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title>New Body Gym </title>
	<meta name="generator" content="TYPO3 4.1 CMS" />
	<style type="text/css">body {
    text-align: center;   /*centra in IE 5.x */
}
/* GENERAL fonts */
p, ol, ul, div, h1, h2 {
	font-family: verdana, arial;
	font-size: 12px;
	padding: 0px 0px;
	margin: 0px 0px;
}
/* contenitore globale */
div#main-box { 
	width: 990px;
	text-align: left;
	margin: 0px auto;
}
/* colonna destra - TITOLO */
div#content-title { 
	float: right;
	width: 780px;
	padding: 0px 0px;
	margin: 10px 0px 0px 0px;
}
/* colonna destra - PLUGINS */
div#content-box { 
	float: right;
	width: 780px;
	padding: 0px 0px;
	margin: 10px 0px 0px 0px;
}
/* contenuto destra */
/* CONTENT-TILE - TITOLO */
div#content-title h1.content-titlepage { 
	color: #000;
	font-size: 28px;
    font-style: italic;
	font-weight: normal;
	text-transform: capitalize;
	height: 18px;
	padding: 0px 0px;
	margin: 0px 0px;
}
div#content-title h1.content-titlepage:first-letter { 
  	font-size: 40px; 
	font-weight: bold;
  	margin:-5px 0px 0px 0px; 
	padding: 0px 0px;
}
div#content-title span.content-subtitlepage { 
	color: #000;
	font-size: 14px;
    font-style: italic;
	font-weight: normal;
	text-transform: uppercase;
	height: 18px; 
	display: inline;
	margin: 0px 8px 0px 0px;
	padding: 0px 0px;
}
/* CONTENT-BOX */
div.tx-gdmesercenti-pi1 { 
	float: left;
	width: 180px;
	padding: 0px 0px;
	margin: 0px 0px;
}
div.tx-gdmesercenti-pi1 { 
	padding: 0px 0px;
	margin: 0px 19px 0px 0px;
}
dl.tx-gdmesercenti-pi1-listrow { 
	padding: 0px 0px;
	margin: 0px 0px;
	font-size: 10px;
}
h1.tx-gdmesercenti-pi1-listrowField-title { 
	width: 180px;
	color: #999;
	text-align: right;
	font-size: 14px;
	font-weight: normal;
	height/**/: 18px; /* Dimensioni per Explorer */
	height: 13px!important; /* Dimensioni per browser standard compliant */
	border-bottom: 1px solid #999;
	background-color: #FFFFFF;
	padding: 0px 0px 4px 0px;
	margin: 0px 0px 4px 0px;
}
dt.tx-gdmesercenti-pi1-listrowField-indirizzo { 
	height: 18px; 
	font-weight: bold; 
	padding: 0px 0px 0px 26px;
	margin: 0px 0px;
}
dt.tx-gdmesercenti-pi1-listrowField-indirizzo { 
	background: url(../images/address.gif) 0 0 no-repeat;
}

dd.tx-gdmesercenti-pi1-listrowField-data { 
	background-color: #EEE;
	height: 18px;
	padding: 0px 0px 0px 26px;
	margin: 0px 0px;	
}
</style>

</head>
<body>
<div id="main-box">

	<div id="content-title">
	<h1 class="content-titlepage">Titolo 
	<span class="content-subtitlepage">sotto titolo</span></h1>
	</div>
	
	<div id="content-box">

	<div class="tx-gdmesercenti-pi1">
		<dl class="tx-gdmesercenti-pi1-listrow">
			<h1 class="tx-gdmesercenti-pi1-listrowField-title">titolo</h1><dt class="tx-gdmesercenti-pi1-listrowField-indirizzo">title</dt>
			</dl>
	</div>

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

dead · 11 Apr 2007

sevenumber ha scritto:
grazie del consglio, ma mi hanno anche detto che sarebbe meglio scrivere 0px poichè certi browser fanno casino ...

cmq ho eseguito tutti i tuoi consigli ma il problema si presenta sempre ... tra content-title e content-box con IE7 è ok (vede correttamente il margine top di content-box) mentre Firefox "attacca" i due contenitori!!!! why?

allora:

primo inghippo qui:

div#main-box {
width: 990px;
text-align: left;
margin: 0px auto;
float:right;
border:1px solid red;
}

se i tuoi div sono float, anche il loro contenitore deve essere float.

secondo inghippo qui:

div#content-title h1.content-titlepage {
color: #000;
font-size: 28px;
font-style: italic;
font-weight: normal;
text-transform: capitalize;
height: 18px;
padding: 0px 0px;
margin: 0px 0px;
}

Se dai altezza testo 28 e altezza div 18, firefox, come al solito fa proprio quello che gli dici. Dagli 28px almeno.

NOTA: in generale, una volta stabilita la grandezza del font di base nel body, è meglio lavorare in em negli elementi, questo perchè permetterà ai tasti di ingrandimento dei caratteri (Ctrl+ in firefox, nonmiricordo in IE) di lavorare correttamente.

ciao.

sevenumber · 11 Apr 2007

tutto chiaro ...però se il main-box è con float:right come faccio a centrarlo nel browser??

dead · 11 Apr 2007

sevenumber ha scritto:
tutto chiaro ...però se il main-box è con float:right come faccio a centrarlo nel browser??

puoi centrare il body, oppure togliere il float al mainbox. Ti succederà solo che il tuo main-box diventa di altezza zero poichè non conterrà più niente. Oppure prova ad assegnargli float:none. Non ho provato quindi non so se funziona.

Io di solito preferisco centrare il body, ma non c'è una regola ferrea.

sevenumber · 11 Apr 2007

thanks

:byebye:

Cerca

Cerca

Pseudo-element :first-letter no firefox?

sevenumber

Nuovo Utente

dead

Utente Attivo

sevenumber

Nuovo Utente

dead

Utente Attivo

sevenumber

Nuovo Utente

dead

Utente Attivo

sevenumber

Nuovo Utente

dead

Utente Attivo

sevenumber

Nuovo Utente

dead

Utente Attivo

sevenumber

Nuovo Utente

Discussioni simili