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?


codice:
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">

             



               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