Hej sitter här och skriver en css-fil för ett forum. Nästan allt blir som jag vill i FF men som vanligt gillar inte IE det jag har gjort. Jag har bifogat en bild för att visa hur jag vill att det ska se ut. Både användarinfo och själva meddelandet ska vara inneslutet av en ram, det är här som det blir problem i IE. Den röda rutan i bilden flyter utanför den blå ramen då meddelandet är kort. Jag kan inte få båda att stanna innanför ramen utan måste välja en, men eftersom det beror på det enskilda inlägget vilken ruta som är störst så måste båda fallen täckas.
Det här var tydligt inte helt lätt. Kanske någon som i alla fall har en länk till ett forum som är skrivet med XHTML strict så att man kan få se hur de har gjort.
Du kan ge en illusion av att de är lika långa genom att leka med borders.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<title>Forum test</title>
<style type="text/css">
.thread { margin:0; padding:0; }
.message { margin:.5em 0; padding:0; clear:left; list-style:none; background:white; color:black; border:solid gray; border-width:.5em .5em .5em 10em; }
.message::after { content:""; display:block; clear:left; }
.title { float:left; background:transparent; color:white; width:9em; margin-left:-9.5em; }
.title img { display:block; }
* html .message { zoom:1; /* hasLayout */ }
* html .title { position:relative; /* universal buggfix */ }
</style>
</head>
<body>
<h1>Trådens titel</h1>
<ol class="thread">
<li class="message">
<p class="title">Igår kl 17:52 <img src="http://www.webforum.nu/image.php?u=247&dateline=1046732540" width="46" height="70" alt=""> Simon Medlem</p>
<p>Ett kort meddelande.</p>
</li>
<li class="message">
<p class="title">Igår kl 17:52 <img src="http://www.webforum.nu/image.php?u=247&dateline=1046732540" width="46" height="70" alt=""> Simon Medlem</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ac lorem sed felis vestibulum rutrum. Etiam ornare tellus sed diam. Suspendisse cursus cursus lacus. Donec vestibulum lacus in purus. Fusce tincidunt justo nec dui. Donec scelerisque ultrices massa. Integer dapibus tincidunt enim. Aenean rutrum, sem quis adipiscing lobortis, libero sem dapibus est, sed porta lorem enim eu enim. Ut non ipsum pulvinar pede sollicitudin aliquam. Sed iaculis, lorem ut vehicula ultrices, massa augue porta metus, id volutpat nibh tellus quis eros. Praesent consectetuer magna eu turpis. Phasellus eu urna. Nullam felis lorem, porta non, cursus quis, pretium at, massa. Aenean feugiat ante eget enim.</p>
<p>Integer ante leo, dictum at, sollicitudin vitae, malesuada eu, lacus. Proin sed mi vitae metus convallis lobortis. Cras enim magna, laoreet nec, auctor sit amet, pharetra ut, purus. Aliquam placerat est sed ligula. Praesent ornare, odio in auctor malesuada, nisi urna varius massa, vitae dapibus purus odio sed leo. Integer risus eros, cursus imperdiet, tincidunt et, semper vitae, nisi. Duis porttitor turpis quis nunc. Sed porta porttitor turpis. Sed non sem. Pellentesque a diam.</p>
</li>
</ol>
</body>
</html>
Det fungerar i FF men i IE får jag ändå inte båda rutorna att stanna innanför ramen.
zcorpan skrev:
Du kan ge en illusion av att de är lika långa genom att leka med borders.
Tack, din lösning gav vad jag behövde plus lite mer. Det är inte nödvändigt att båda "rutorna" är lika höga även om det blir snyggare så. Problemet var att jag inte fick både den röda och den gröna rutan att stanna innanför den blåa ramen i IE. Det är lite synd bara att de man inte kan ha någon annan borde när de används till designen.
Kanske finns något mer förslag om det inte är ett krav att båda rutorna är lika höga, bara att de stannar innanför den blå ramen.
