[html][css]Obrazek jako tło komórki tabeli w Mozilli. Opcje

[neptus]

Mam logo wypełniające jedną komórkę tablicy. Na nim umieszczam różne elementy.

Mam zapis w css:

CODE

.logo
{
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
background-position: bottom left;
background-attachment: fixed;
}

i w html:

CODE

<table cellSpacing='0' cellPadding='0' width='100%' align='center' border='0'>
....
<tr><td class='logo' height=94>..jakieś elementy..</td></tr>
....
</table>

W IE to działa, w Mozilli nie. Najwyraźniej Mozilla każde tło uważa za tło całej strony. Nie cierpię Firefoxa i pokrewnych. Strasznie durna przeglądarka, jakieś zbędne wodotryski, a nie da się jej po ludzku skonfigurować. Dotąd olewałam takie przeglądarki, bo to był margines poniże 1% ale jak już jest tego ponad 21%, to się nie godzi.

Celowo już dałam "bottom", a i tak nie działa. Obrazek wypełnia całą komórkę i top/bottom left/right nie ma znaczenia. Mozilla ignoruje "background-position" i maluje to od góry strony, w efekcie mam widoczne tylko pół loga. Jak ją zmusić do wyświetlenia obrazka poprawnie?

Efekt można obejrzeć pod adresem http://astroalgorytmy.eu - w Firefoxie masakra.

Przeszukałam już całe to forum i pół internetu i gucio.

[chico]

Nie cierpię Firefoxa i pokrewnych. Strasznie durna przeglądarka(...)

'Durna przeglądarka' to taka, która mimo ustalonych ogólnych standardów nie trzyma się ich - mowa oczywiście o IE.

Sprawdź swój kod (html i css) pod kątem ogólnych standardów (w3c) i zobacz czy jest poprawnie zrobiony. Jeżeli nie - validator naprowadzi Cię na to jak kod powinien wyglądać, żeby działał w każdej przeglądarce.

-- edit:

zerknij jeszcze tutaj, jest pełna zgodność z FF. Sprawdź może ustawienia marginesu dolnego?

Ten post edytował chico 17.09.2007, 19:23:51

[neptus]

'Durna przeglądarka' to taka, która mimo ustalonych ogólnych standardów nie trzyma się ich - mowa oczywiście o IE.

Durna, bo niewygodna w obsłudze i toporna, za to z mnóstwem zbędnych wodotrysków. IE nie kocham, wychowałam się na Netszkapie. Niestety, wszystkie kontynuacje powyżej 4.x są do niczego, a stara wersja już, niestety, nie wystarcza. IE z nałożonym Maxthonem może i doskonały nie jest, ale i tak wszystkie inne bije na głowę.

Sprawdź swój kod (html i css) pod kątem ogólnych standardów (w3c) i zobacz czy jest poprawnie zrobiony. Jeżeli nie - validator naprowadzi Cię na to jak kod powinien wyglądać, żeby działał w każdej przeglądarce.

-- edit:

zerknij jeszcze tutaj, jest pełna zgodność z FF. Sprawdź może ustawienia marginesu dolnego?

Niestety, kod jest zgodny, a Firefox, jak widać - nie bardzo jest zgodny i nadal nie wiem, jak to obejść.
Widać wyraźnie, że on to bierze dla strony, a nie dla tabeli. Czyli trzeba chyba zrobić osobny css dla firefoxa i dołożyc mu margines, który zlikwiduje błąd w interpretacji skryptu. Tylko jak odróżnić firefoxa? Jeszcze jakąś inna mozille muszę chyba zainstalować, bo nawet nie wiem, czy wszystkie tak mają.


Żadnych validatorów nie znam, od 35 lat używam tylko edytora tekstowego. Sęk w tym, że nie znam specyfiki Firefoxa i nie mam pojecia, jak do niego podejść. Trzymam to badziewie tylko do podglądania, jak to widzą jego fani. Dotąd to jakoś wychodziło, najwyżej trochę brzydsze. To jest koszmarne.

Dolny margines jest 0.

Ten post edytował neptus 18.09.2007, 02:02:17

[chico]

Durna, bo niewygodna w obsłudze i toporna, za to z mnóstwem zbędnych wodotrysków.

Zgadzam się - to musi być zmowa 'durnych' systemów operacyjnych i 'durnych' przeglądarek! Tylko jak wyjaśnić fakt, że wszystkie przeglądarki, poza IE naturalnie, widzą stronę tak, jak to robi FF?

Służę pomocą:
- Opera 9.23 (Ubuntu 6.06) - Konqueror 3.5 (Ubuntu 6.06)
- Firefox 2.0.0.1 (Mac OS X 10.4)
- Firefox 2.0.0.4 (Windows 2000)
- Safari 3.0.2 (Windows 2000)
- Mozilla 1.7.13 (PLD 2.0)

Tylko jak odróżnić firefoxa?

Warto poczytać

Żadnych validatorów nie znam

Zapraszam więc tutaj

Żadnych validatorów nie znam

Tylko skąd wniosek że kod jest poprawny (nie znając validatora)? No chyba, że się nigdy nie mylisz ;-) Ale w razie czego link masz powyżej.

--
Co do rozwiązanie problemu to łatwiej by było (przynajmniej mi), gdybyś wkleiła większą część kodu, lub wynik jego validacji (o ile będzie niepoprawny)

[neptus]

Warto poczytać

Dzięki za użyteczne linki.

Tylko skąd wniosek że kod jest poprawny (nie znając validatora)? No chyba, że się nigdy nie mylisz ;-) Ale w razie czego link masz powyżej.

Wysokie IQ. Mimo przejrzałego wieku kilka znaczników kodu zwykle jestem w stanie przeanalizować.

Co do rozwiązanie problemu to łatwiej by było (przynajmniej mi), gdybyś wkleiła większą część kodu, lub wynik jego validacji (o ile będzie niepoprawny)

Wyniki walidacji css:

CODE

brak błędów i ostrzeżeń
Informacje na temat poprawnego CSS
.logo {
background-color : #013298;
background-image : url(images/logo.jpg);
background-repeat : no-repeat;
background-position : bottom left;
background-attachment : fixed;
}

I pełny css:

CODE

5 body Właściwość scrollbar-face-color nie istnieje : #dee3e7
6 body Właściwość scrollbar-highlight-color nie istnieje : #ffffff
7 body Właściwość scrollbar-shadow-color nie istnieje : #dee3e7
8 body Właściwość scrollbar-3dlight-color nie istnieje : #d1d7dc
9 body Właściwość scrollbar-arrow-color nie istnieje : #006699
10 body Właściwość scrollbar-track-color nie istnieje : #efefef
11 body Właściwość scrollbar-darkshadow-color nie istnieje : #98aab1
349 .gallery img Właściwość filter nie istnieje : gray
354 .gallery:hover img Właściwość filter nie istnieje : none
359 img.activegallery Właściwość filter nie istnieje : none

"Błędy" są bez związku z tematem. Ntbn. scrolbar i galeria mimo tych zastrzeżeń działa akurat bezproblemowo w każdej przeglądarce, a poprawne wg validatora logo - nie.

Kod html jest nie do testowania w tym cudzie, bo to jest html w php i kod jest mocno wymieszany. Cytuję duży fragment dotyczący m. in. logo.

CODE

<?
$body_text = "#000000";
$body_bg = "#97B9DA";
$theme_width = "100%";
$theme_width_l = "170";
$theme_width_r = "170";

global $theme_width,$settings,$userdata;

echo "<table cellSpacing='0' cellPadding='0' width='100%' align='center' border='0'><tr>";
echo "<td><table cellSpacing='0' cellPadding='0' align='center' border='0'><tr>";
echo "<td><img src='".THEME."images/border_1.gif' width='20' height='20'></td>";
echo "<td width='100%' background='".THEME."images/border_2.gif'> </td>";
echo "<td><img src='".THEME."images/border_3.gif' width='20' height='20'></td></tr></table>";
echo "<table cellSpacing='0' cellPadding='0' align='center' border='0'><tr>";
echo "<td background='".THEME."images/border_4.gif'><img src='".THEME."images/border_4.gif' width='20' height='2'></td>";
echo "<td width='100%' bgColor='#cfdfee' colSpan='2'>";
echo "<table cellSpacing='0' cellPadding='0' width='100%' align='center' border='0'><tr>";
echo "<td><table cellSpacing='0' cellPadding='0' width='100%' border='0'><tr>";
echo "<td class='forumlinemain'>";
echo "<table class='forumline' cellSpacing='1' cellPadding='0' width='100%' border='0'><tr>";
echo "<th class='thCornerL'><table cellSpacing='0' cellPadding='0' width='100%'><tr>";
echo "<th noWrap style='padding-left:4px;' align='left' height='25'>";

$result = dbquery("SELECT * FROM ".DB_PREFIX."site_links WHERE link_position>='2' ORDER BY link_order");
if (dbrows($result) != 0) {
$i = 0;
while($data = dbarray($result)) {
if (checkgroup($data['link_visibility'])) {
if ($data['link_url']!="---") {
if ($i != 0) { echo " <img src='".THEME."images/divider.gif' alt=''> \n"; } else { echo "\n"; }
$link_target = ($data['link_window'] == "1" ? " target='_blank'" : "");
if (strstr($data['link_url'], "http://") || strstr($data['link_url'], "https://")) {
echo "<b><a href='".$data['link_url']."'".$link_target."' class='mainmenu'>".$data['link_name']."</a></b>";
} else {
echo "<b><a href='".BASEDIR.$data['link_url']."'".$link_target."' class='mainmenu'>".$data['link_name']."</a></b>";
}
}
$i++;
}
}
}
echo ($i == 0 ? " " : "")."</th>";

echo "<th style='padding-right:4px;' noWrap align='right' height='25'>".ucwords(showdate("%A, %d-%m-%Y", time()))."</th>";
echo "</tr></table></th></tr>";
echo "<tr><td class='logo' height=94>
<a href='".BASEDIR."index.php' border='0' style='padding:0px 0px 0px 0px'>";
echo "<img title='".$settings[sitename]."' alt='title='".$settings[sitename]."' src='".THEME."images/ss1.gif' align=left border=0></a>";
$faza=faza();
echo "<img title='".$settings[sitename]."' alt='title='".$settings[sitename]."' src='".THEME."images/",$faza,".gif' align=right border=0></a>";

echo "</td></tr>";
echo "<tr><td class='catLeft' align='right' colSpan='2' height='28'>";

if (iMEMBER) {
echo "<span class='menu'> <a class='mainmenu' href='".BASEDIR."profile.php?lookup=".$userdata['user_id']."'>";
echo "<img alt='Twój profil' hspace='3' src='".THEME."images/icon_mini_profile.gif' border='0' width='12' height='13'>Twój profil</a> ";
}else{
echo "<img alt='Register' hspace='3' src='".THEME."images/icon_mini_register.gif' border='0' width='12' height='13'> <span class='welcome'>Witaj serdecznie,</span> <span class='nav'>".(iMEMBER ? $userdata['user_name'] : "Gościu.")."</span>";
}


if (iMEMBER) {
echo " <a class='mainmenu' href='".BASEDIR."messages.php'>";
echo "<img alt='Sprawdź prywatne wiadomości' hspace='3' src='".THEME."images/icon_mini_message.gif' border='0' width='12' height='13'>";
echo "Sprawdż prywatne wiadomości</a>  ";
}else{
echo "";
}
echo "</td></tr></table></td></tr></table></td></tr></table>";
echo "<img src='".THEME."images/blank.gif' width='1' height='3'>";
echo "<table width='100%' cellspacing='0' cellpadding='0'>\n<tr>\n";


?>

----

Mam łobuza! Zamiast

background-position : bottom left;
background-attachment : fixed;

wstawiłam:

background-size: 100%;
background-origin: content

Nie wiem, czemu ale jest dobrze we wszystkich przeglądarkach.

Ten post edytował neptus 21.09.2007, 21:38:21