problema di layout Crossbrowser

**nicodemus** · 10-08-2008, 15:22

Salve a tutti.

Mi serve realizzare delle semplici box di informazioni contenenti, titolo, un'icona flottante a sinistra e una tabella con i dati al suo fianco.

Ecco il codice html:

<!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" >
<head>
<title>Untitled Page</title>
<link href="style2.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h4>Info Box</h4>
<div class="box">

<div class = "box_header">
Info Box
</div>

[img]immagine.jpg[/img]

<table class="innerInfoTable">
<tr>
<td>
Info 1
</td>
<td>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</td>
</tr>
<tr>
<td>
Info 2
</td>
<td>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</td>
</tr>
<tr>
<td>
Info 3
</td>
<td>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</td>
</tr>
<tr>
<td>
Info 4
</td>
<td>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</td>
</tr>
<tr>
<td>
Info 5
</td>
<td>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</td>
</tr>
<tr>
<td>
Info 6
</td>
<td>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</td>
</tr>
<tr>
<td>
Info 4
</td>
<td>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</td>
</tr>
</table>

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

e qua il foglio di stile

body
{
width:800px;
}
h4
{
margin:0 0 2px 0;
font-size:17px;
}

.tooltips
{
margin-bottom:3px;
}

span.Description
{
font-size:10pt;
font-style:italic;
}

.box
{
display:inline-block;
border-width:1px;
border-style:solid;
font-size:10pt;
border-color:#AAAAAA;
}

.box_header
{
text-align:center;
vertical-align:middle;
font-size:12pt;
font-weight:bold;
height:16pt;
background-color:#A377B5;
margin:2px 2px 2px 2px;
}

img.icon
{
position:relative;
float:left;
width:64px;
margin:2px 2px 0 4px;
background-color:Black;
}

table.innerInfoTable
{
height:auto;
}

table.innerInfoTable td
{
padding:3px 5px 3px 5px;
vertical-align:Top;
white-space:nowrap;
}

questo è il link all'esempio: http://http://provehtml.awardspace.com/

Allego un'immagine con i risultati per opera 9.51, firefox 3, IE 7
http://img193.imagevenue.com/img.php..._122_421lo.jpg

Come si può vedere per 3 browser ho 3 visualizzazioni differenti...
A me servirebbe un risultato finale uguale a quello visuallizato da Opera 9.51, ma non son riuscito a ottenre lo stesso risultato sugli altri 2 browser.

Ma non so più che pesci pigliare...

**gabar-el** · 13-08-2008, 12:37

potresti semplicemente mettere l'immagine dentro una cella della tabella....

Discussione: problema di layout Crossbrowser

Strumenti discussione

Ricerca discussione

Visualizza

problema di layout Crossbrowser

Permessi di invio