Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css]Obrazek jako tło komórki tabeli w Mozilli.
Forum PHP.pl > Forum > Przedszkole
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. mad.gif 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. sad.gif

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. wacko.gif

Przeszukałam już całe to forum i pół internetu i gucio. sadsmiley02.gif
chico
Cytat(neptus @ 17.09.2007, 18:51:37 ) *
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?
neptus
Cytat(chico @ 17.09.2007, 20:16:24 ) *
'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ę.

Cytat(chico @ 17.09.2007, 20:16:24 ) *
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ść. sadsmiley02.gif
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.
chico
Cytat(neptus @ 18.09.2007, 02:57:55 ) *
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)

Cytat
Tylko jak odróżnić firefoxa?

Warto poczytać

Cytat
Żadnych validatorów nie znam

Zapraszam więc tutaj

Cytat
Ż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
Cytat(chico @ 18.09.2007, 11:48:00 ) *

Dzięki za użyteczne linki. smile.gif

Cytat(chico @ 18.09.2007, 11:48:00 ) *
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. wstydnis.gif Mimo przejrzałego wieku kilka znaczników kodu zwykle jestem w stanie przeanalizować. winksmiley.jpg

Cytat(chico @ 18.09.2007, 11:48:00 ) *
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. worriedsmiley.gif

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. thumbsupsmileyanim.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.