ugrás a tartalomhoz

CSS hiba: Float-olt Flash mellett Számozott Lista

Eirun · 2009. Szep. 5. (Szo), 16.05
Üdv mindenkinek!

Kellemetlen CSS hibába botlottam egy weboldal fejlesztése közben, és nem találtam rá neten magyarázatot. :(

Valamiért IE alatt és Firefox alatt is a flash thumbnail mindig betakar a lista sorszámozásába, viszont szeretném a sorszámokat kiemelve hagyni. Azt szeretném, hogy a szöveggel egyvonalban kezdje a listát is, és onnan tolja még beljebb.

Tudna valaki segíteni? Előre is köszönöm!

CSS:
  1. body {  
  2.   background: black;  
  3.   color: #654;  
  4.   font: 10pt "Georgia","Times New Roman","Times",Serif;  
  5.   text-align: justify;  
  6. }  
  7.   
  8. #main {  
  9.   margin: auto;  
  10.   width: 1000px;  
  11.   padding: 0;  
  12.   border: 0;  
  13. }  
  14.   
  15. .context {  
  16.   color: #987;  
  17.   font: 12pt;  
  18.   margin: 0;  
  19.   padding: 15px;  
  20.   border: 0;  
  21. }  
  22.   
  23. h1 {  
  24.   margin: auto auto 0.25em;  
  25.   padding: 0.5em 0 0.25em;  
  26.   color: #900;  
  27.   font: 36pt;  
  28.   font-variant: small-caps;  
  29.   border-bottom: #654 1px solid;  
  30. }  
  31.   
  32. h2 {  
  33.   margin: auto auto 0.5em;  
  34.   padding: 1em 0 0.5em;  
  35.   font: 24pt;  
  36.   border-bottom: #654 1px dashed;  
  37. }  
  38.   
  39. p {  
  40.   margin: auto;  
  41.   padding: 0 0 0.75em;  
  42. }  
  43.   
  44. object {  
  45.   margin: 0;  
  46.   padding: 0 20px 0 0;  
  47.   border: 0;  
  48.   float: left;  
  49. }  
  50.   
  51. em {  
  52.   color: #900;  
  53.   font-style: normal;  
  54. }  
  55.   
  56. a, a:visited {  
  57.   color: #987;  
  58.   text-decoration: underlined;  
  59. }  
  60.   
  61. a:hover, a:active {  
  62.   color: #fed;  
  63.   text-decoration: underlined;  
  64. }  
  65.   
  66. ol {  
  67.   list-style: upper-roman outside;  
  68.   padding-left: 5em;  
  69. }  
HTML kivonat:
  1. <html>  
  2.   <body>  
  3.     <div id="main">  
  4.       <div class="context">  
  5.         <h1>Főcím</h1>  
  6.       </div>  
  7.       <div class="context">  
  8.         <h2>Alcím</h2>  
  9.         <object width="200" height="200">  
  10.           <embed />  
  11.         </object>  
  12.         <p>Szöveg  
  13.         <ol>  
  14.           <li>Szöveg</li>  
  15.           <li>Szöveg</li>  
  16.           <li>Szöveg  
  17.             <ol>  
  18.               <li>Szöveg</li>  
  19.             </ol>  
  20.           </li>  
  21.           <li>Szöveg</li>  
  22.         </ol>  
  23.         </p>  
  24.       </div>  
  25.     </div>  
  26.   </body>  
  27. </html>  
‹ Inaktív text form jAlert, jConfirm probléma ie7 és ie 8on ›
 ■
1

"Nem hiba"

Eirun · 2009. Szep. 8. (K), 21.20
E szerint a cikk szerint egyszerűen maga a modell nyomorult. Azt hiszem, egy display: block; megoldja a dolgot. (de megölheti a float wrapping-et... ami talán nem is baj ilyen esetben)

Forrás:
List Next to a Floating Block - HTML / CSS answers

Viszont generált tartalomhoz úgy vélem, nincs biztonságosabb megoldás. (Esetleg DHTML tudna még segíteni rajta, némi böngészőfelismeréssel. (AJAX-alapú Try-Catch monstrum)