2 svar · 294 visningar · startad av stephan
Har fått gråa hår efter nån timmes meck med den här koden 
Har en bild som jag vill floata left inuti en div tillsammans med en text. Kolla länken:
http://www.comers.se/comers/pages/Untitled-15.html
Bakgrunden följer med texten upp, fast jag vill ju att den ska gå nedanför bilden. Dra ihop och isär fönstret i sidled och se hur bakgrunden beter sig bakom bilden och texten som flödar. I IE försvinner dessutom texten när man breddar fönstret.
Det övre exemplet i sidan funkar inte, det nedre alldeles utmärkt. I det nedre har jag lagt en table runt bilden och texten inuti divven. Känns rätt så fult. Borde det inte gå att göra så att det översta också blir bra utan table?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
<!--
/* -- */
body, td, th {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
/* -- */
table {
border-collapse: collapse;
border-spacing: 0;
}
div.result {
background:#EDEDED;
}
.result div {
clear:both;
}
.result img {
float:left;
margin-right:4px;
}
.result .extra table, .result .product table {
width: 100%;
}
.result .extra table td, .result .product table td, .result .extra table th, .result .product table th {
padding:4px 10px 4px 10px;
text-align:left;
}
.result .extra table th, .result .product table th {
background-color:#999999;
color:#FFFFFF;
}
.result {
padding:10px 10px 10px 10px;
margin-bottom:25px;
}
.title, .descr, .extra, .product {
background:#FFFFFF;
padding:4px;
}
.title {
padding-bottom:0px;
}
.extra, .product {
margin-top:10px;
}
-->
</style>
</head>
<body >
<div class="result">
<div class="title"><a href="#">Hotel Las Madriqueras</a> Teneriffa, Playa de las Américas</div>
<div class="descr"><img src="peralada_mini.jpg">Här bor du i en avkopplande och vacker miljö. Du kan välja mellan att spela en riktigt bra golfbana, spela bort dina pengar på stadens Casino eller njuta av ett kurbad i vin. Allt detta och mycket annat kan du uppleva om du bor på exklusiva Hotel Golf Peralada.</div>
<div class="extra">
<table>
<tr>
<th class="class">Paketinnehåll</th>
<th class="class">Speltid</th>
<th class="size">Spelare</th>
</tr>
<tr class="row1">
<td class="class"><nobr>grand Hotel1 natt dubbelru </nobr></td>
<td class="class"><nobr>06-01-08</nobr></td>
<td class="size">2</td>
</tr>
<tr class="row2">
<td class="class"><nobr>Middab</nobr></td>
<td class="class"><nobr>06-01-07</nobr></td>
<td class="size">2</td>
</tr>
</table>
</div>
<div class="product">
<table>
<tr>
<th class="class">Klass</th>
<th class="size">Storlek</th>
<th class="totalPrice">Totalpris</th>
<th class="book"> </th>
</tr>
<tr class="row1">
<td class="class">parkett</td>
<td class="size">2</td>
<td class="totalPrice">1000.00</td>
<td class="book"><input type="submit" name="Submit" value=" Boka " class="bookButton"></td>
</tr>
</table>
</div>
</div>
<div class="result">
<div class="title"><a href="#">Hotel Las Madriqueras</a> Teneriffa, Playa de las Américas</div>
<div class="descr"><table><tr><td><img src="peralada_mini.jpg">Här bor du i en avkopplande och vacker miljö. Du kan välja mellan att spela en riktigt bra golfbana, spela bort dina pengar på stadens Casino eller njuta av ett kurbad i vin. Allt detta och mycket annat kan du uppleva om du bor på exklusiva Hotel Golf Peralada.</td></tr></table></div>
<div class="extra">
<table>
<tr>
<th class="class">Paketinnehåll</th>
<th class="class">Speltid</th>
<th class="size">Spelare</th>
</tr>
<tr class="row1">
<td class="class"><nobr>grand Hotel1 natt dubbelru </nobr></td>
<td class="class"><nobr>06-01-08</nobr></td>
<td class="size">2</td>
</tr>
<tr class="row2">
<td class="class"><nobr>Middab</nobr></td>
<td class="class"><nobr>06-01-07</nobr></td>
<td class="size">2</td>
</tr>
</table>
</div>
<div class="product">
<table>
<tr>
<th class="class">Klass</th>
<th class="size">Storlek</th>
<th class="totalPrice">Totalpris</th>
<th class="book"> </th>
</tr>
<tr class="row1">
<td class="class">parkett</td>
<td class="size">2</td>
<td class="totalPrice">1000.00</td>
<td class="book"><input type="submit" name="Submit" value=" Boka " class="bookButton"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Du skulle kunna prova med att lägga in en tom div med style="clear: both;" direkt efter texten och innan du stänger den div där bild och text finns. Alltså:
<div style="clear: both;"> </div>
</div>
Vet inget annat säkert sätt, som skulle fungera i både IE och Gecko-läsare.
Jäkligt smart "workaround". Tack!
