Problema CSS

piazzeus

Problema CSS

Ragazzi sono alle prese con una landing page, e questa non vuole saperne di mettersi a posto.. in particolare mi pare che non risponda ad alcune regole che imposto nel css..
Ad esempio cerco di impostare il font-size, ma il documento se ne infischia, e lascia sempre la stessa dimensione, o il testo che nella UL a volte va a capo a metà riga e a volte continua..
E poi non riesco ad aggiustare il float della form e dell'immagine.. Per ora ho risolto il problema dell'immagine spostandola dandogli una posizione assoluta, ma da browser a browser c'è differenza perchè interpretano i pixels in maniera diversa.
Non so come farmi capire meglio, l'unica cosa che posso fare è postare il codice (non se se posso a dire il vero, casomai cancellate..):

CODICE XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=".w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>punto ONE - Run Time Solutions</title>
<link href="runtime.css" rel="stylesheet" type="text/css" />
</head>

<body><div id="wrapper">
<div id="header">
<div id="punto-one">
<a href=".xxxxxxx.it" target="_blank"><img src="puntoone_logo.gif" width="180" height="41" border="0" alt="punto one logo" />
</a>
</div>
<div id="titles">
<h1>RTS-CRM</h1>
<h4>La nuova soluzione verticale integrata a Sap Business One</h4>
</div>
<div id="contattaci"><p><strong>Contattaci:</strong></p>
<img src="mailorange.gif" width="27" height="20" alt="mailto" />
<a href="mailto [email protected]">[email protected]</a></div>
<div id="runtime">
<a href=".xxxxxxx.it" target="_blank"><img src="runtime_logodx.gif" width="136" height="80" border="0" alt="Run Time Logo" />
</a>
</div>
</div>
<br class="clearer" />
<div id="content">
<p class="red"><strong>Compila il modulo sottostante...<br />
I nostri consulenti ti contatteranno al più presto!</strong></p>

    <p><form method="get" action=".xxxxxxx.it/cgi-bin/FormMail.pl">
    <input type="hidden" name="recipient" value="[email protected]" />
    <input type="hidden" name="subject" value="Richiesta informazioni RTS-CRM (Landing RuntTime)" />
    <input type="hidden" name="redirect" value=".xxxxxxx.it/partner/conferma_runtime.htm" />
    <input type="hidden" name="required" value="nome,telefono,email" />
    <p>Nome*
                        <input type="text" name="nome" size="20" />                 
    Telefono*
                        <input name="telefono" type="text" id="telefono2" size="12" />
                     
    E-Mail*
                          <input type="text" name="email" size="25" /></p>
    <p>* Dato obbligatorio - Trattamento dati personali a norma dell'art. 13 della Legge 196/03</p>
    <input type="submit" value="Invio Modulo" name="submit" />
                        
                          <input type="reset" value="Cancella" name="reset" />
                      
                  </form></p>
                          <img src="img_int.jpg" width="240" height="320" alt="businness" />
                  
                 <!--<div id="contenuto"> --><p><strong>Stai cercando uno strumento che ti permetta, ovunque tu sia, di scambiare in trasparenza e semplicit&agrave; dati e informazioni con Clienti, Fornitori e Partner esterni?</strong></p>
              <p><b>Run Time Solution</b> ha la soluzione per te.</p>
              <p><b>IL MONDO DEI TUOI AFFARI SEMPRE INTORNO A TE!</b><br />
                  <b>In ufficio o fuori sede, tutte le informazioni di cui 
                necessiti, facilmente e rapidamente con:</b></p>
              <p><b>RTS-CRM</b> La soluzione per la gestione delle attivit&agrave; di Marketing e Vendita.<br />

Permette di gestire tutte le informazioni relative a clienti, fornitori, prospect,
monitorare le opportunità di vendita e processare ordini via web.</p></div>
<div id="prodotto">

 <ul>
 <li>Web-based e 100% java: tutti i dati sono disponibili attraverso una semplice connessione remota.</li>
 <li>Sicura: l&rsquo;accesso alle informazioni &egrave; garantito dall&rsquo;utilizzo di strumenti di autenticazione.</li>
 <li>Completamente integrata con SAP Business One. Architettura di rete modulare disponibile sia in modalit&agrave; on site che on demand.</li>
 <li>E&rsquo; integrato con Sap Business One, l&rsquo;ERP appositamente pensato per le Piccole e Medie Imprese</li>
 <li>Rende immediate e proficue le relazioni con il mondo esterno alla tua azienda </li>
 <li>Permette di controllare tutti i processi aziendali e prendere cos&igrave; decisioni vincenti</li>
 </ul>

<p>Vuoi avere maggiori informazioni sulla nostra soluzione RTS-CRM?</p>
<img src="download.gif" width="19" height="17" /><a href="crm-web.pdf" target="_blank"><p>Scarica la brochure RTS-CRM »</p></a></font></div></td>
</tr>
</div>
</div>
</body>
</html>

CODICE CSS

.clearer {
clear:both; line-height:0;}

.clearright {
clear:right;
line-height:0;
}

.clearright {
clear:left;
line-height:0;
}

.left {
float:left;
}

.right {
float:right;
}

body {
color: #01588E;
font-family: verdana, arial, sans-serif;
font-size: 0.8 em;
background: #E39904;
}

#wrapper {
background:#CCCCCC;
width:1000px;
margin:0 auto;
text-align:left;
}

#header {
height:90px;
width:1000px;
float:left;
background:#FFFFFF;
margin:0 auto;
text-align:left;}

h1 {
font-size: 3 em;
color:#CC0000;
padding:0;
margin:0;
}

#punto-one {
float:left;
width:19%;
margin:1;
padding:1;
}

#titles {
float:left;
width:49%;
}

#contattaci {
float:left;
width:14%;
}

padding:0;
margin: 0;
}

#runtime {
float:right;
width:14%;
}

h4 {
color:#01588E;
font-size:1.2 em;
padding:0;
margin:0;
}

.red {
color:CC0000;
}

#content img {
float:right;
position:relative;
top: -160px;
}

#prodotto img {
float:left;
}

ul {
list-style-image:url(frecciadx_grey.gif);
}

Grazie in anticipo per l'aiuto!

ivan88

Ciao pizzazeus,

Anchio col mio sito ne ho passate delle belle per farlo adattare ai diversi browser, quindi penso di poterti dare qualche consiglio:

Lascia stare in modo assoluto il position:absolute (scusa il gioco di parole). Come hai già detto tu crea solo problemi.
Eviterei anche il position relative nelle immagini con il float, io col mio sito mi trovo benissimo usando solo i margin.

3)Eviterei sempre anche il padding, IE e FF lo vedono in modo diverso.
Anzi se ti ricordi di metterlo sempre = 0 è meglio (vedo che lo hai già fatto con l' h1).
Imposta sempre anche il valore di margin, metti 0 se non ti serve.

Ti consiglio di impostare il font dell' elenco ul sotto l' immagine del punto. Meglio se usi il menu a cascata ul li
Le classi .clearer sono inutili secondo me. Ti conviene giocare sui margini anche lì e assegnare il clear direttamente ai div.

Spero che questi piccoli consigli ti semplifichino un po' la vita

Ciao

piazzeus

ciao!
In realtà ho risolto, cmq trovo i tuoi consigli molto utili e li terrò sicuramente in considerazione!
Quanto al posizionamento absolute sono d'accordissimo con te, l'ho fatto solo per disperazione e non ne ero per niente soddisfatto!

Grazie ancora!