Forum PHP.pl > SWFObject i div

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

zibra

17.10.2009, 14:15:06

Witam,

mam taki kod:

[HTML] pobierz, plaintext 
<!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-2">
 
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("menuswf", "9.0.0");
</script>
 
<style type="text/css" media="screen">
#menu { 
background-color: #000000;
margin: 0px;
padding: 0px;    
overflow: hidden;    
vertical-align: top;
display: table-cell;
width: 260px;   
height: 550px;  
}  
</style>
</head>
 
<body>
 
<div id="menu"> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="260" height="550" id="menuswf">
<param name="movie" value="menu.swf">
<param name="menu" value="false">
<param name="quality" value="high">
<param name="scale" value="noscale">
<param name="bgcolor" value="#6D91AE">
<param name="allowscriptaccess" value="sameDomain">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="menu.swf" width="260" height="550">
<param name="menu" value="false">
<param name="quality" value="high">
<param name="scale" value="noscale">
<param name="bgcolor" value="#6D91AE">
<param name="allowscriptaccess" value="sameDomain">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></div>
</body>
</html>
[HTML] pobierz, plaintext

i div "menu" jest częścią grupy div-ów imitujących tabelkę. Gdy w stylach nie ma pogrubionego wiersza (czyli display: table-cell;) wszystko jest ok, gdy jednak jest (a jest chyba konieczny, bo bez niego psują się inne rzeczy) to pod animacją swf tworzy się 5px szpary, która rozsuwa diva i która bierze się nie wiem skąd. Problem występuje tylko w przeglądarce firefox. Czy ktoś ma jakiś pomysł jak to przeskoczyć?

michail_w

20.10.2009, 15:24:23

Ten pasek szarego koloru to podejrzewam jest tło o kolorze #6D91AE, czyli tło twojej animacji flash.
Ale odpowiedź na twoje pytanie jest o wiele prostrza niz myslisz.
Algorytm renederowania tabel
Pod powyższym adresem masz opisany w jaki sposób są renderowane tabele. Przeglądarka IE dostając w css display:table-cell; renderuje każda twoją komórkę podobnie jak element blokowy (np. div). Z kolei FF renderuje każdą komórkę jak element tabeli, to znaczy, że wszystkie elementy mają wysokość elementu zajmującego najwięcej miejsca. Czyli jeżeli masz 3 komórki obok siebie, w pierwszej tekst zajmuje wysokość 10px, w drugiej 30px, a w trzeciej 15px, to mimo wszystko wszystkie komórki będą wyświetlane z wysokością 30px (czyli najwięcej zajmującego elementu).

Aby poradzić sobie z problemem, ze swojej strony polecam użycie float.

Pozdrawiam

mad/

14.11.2009, 00:25:04

Polecam wyjść od tego szablonu i modyfikować go na czuja, będzie łatwiej:
<?xml version=-"1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" dir="ltr">
<head>
<title>tytuł</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset="utf-8""/>
</head>
<body>
<div id="menu">
<object type="application/x-shockwave-flash" data="menu.swf" width="260" height="550">
<param name="menu" value="false"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="bgcolor" value="#6d91ae"/>
<param name="allowscriptaccess" value="sameDomain"/>
<p>Treść alternatywna</p>
</object>
</div>
</body>
</html>
Poza tym menu we flashu to nienajlepszy pomysł, nie będzie dostępne dla osób bez flasha, alternatywna treść też jest niezbędna.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.