ugrás a tartalomhoz

Google Chrome-ban szétcsúszik az oldal

abraham · 2009. Feb. 28. (Szo), 09.10
Üdv mindenkinek!

csináltam egy oldalt (XHTML, CSS), firefox-ban, ie7-ben, operában nagyon frankón jelenik meg, azonban a Chrome teljesen bénán jeleníti meg az oldalt.

kérdés, hogy ezt hogyan lehetne kiküszöbölni? miféle szabványokat használ a Chrome...
esetleg új stílust kell írnom rá?
‹ Adatlap honlapba(olyan ha valaki ki tölti utána azt lássa mindig ha belép) Fejtörő xhtml módra ›
 ■
1

klasszikus

gex · 2009. Feb. 28. (Szo), 14.12
van egy autóm, ami nagyon jól gyorsul az m0-s, m3-as és m7-esen, de az m5-ösön nem akar 50-nél többel menni. miféle aszfalt van ezen az úton? vegyek új autót?
2

Chrome

Poetro · 2009. Feb. 28. (Szo), 15.08
A Chrome, mint a Safari Webkit-et használ, ami az egyik legfejlettebb HTML megjelenítő motor. Többek között a Safari 4 beta, ha jól emléxem, eléggé szépen teljesít Acid teszten, hasonlóan a Chromehoz is, ha emlékeim nem csalnak, még a Firefox-ot is megelőzi a Chrome.

Kicsit több leírás, esetleg link kellene, hogy tudjuk, mit is jelent az, hogy szétesik, mert NAGYON SOKSZOR nem egyértelmű, kinek mit jelent. Amikor a megrendelő azt mondja szétesik neki IE alatt, akkor pl. valószínűleg a 3px gap bug jött elő, és csak egy oszlop lecsúszott az oldal aljára, amit könnyű orvosolni. De hogy nálad mit jelent, azt nem lehet tudni.
3

oldal

abraham · 2009. Már. 1. (V), 00.00
üdv,

köszi a segítséget, itt az oldal: klikk
4

IE alatt

Poetro · 2009. Már. 1. (V), 01.28
IE alatt én annyit látok hogy a fenti kettő csik egy kicsit lejebb van, de semmi mas, Chrome-ban pont úgy néz ki, mint a többiben.
5

kép

abraham · 2009. Már. 1. (V), 09.25
szia,

ie-ben tényleg csak annyi a különbség, viszont nálam Chrome-ban kicsit máshogy jelenik meg.

csatoltam egy képet, hogy nekem hogyan mutat Chrome-ban:
6

IE6

Poetro · 2009. Már. 1. (V), 10.07
Nekem a fenti hiba nem jelenetkezik Chrome alatt, lehet azért mert blokkolom az ad tartalmakat. Ki kellene próbálni valami olyan tárhelyen, ahol nem szemetelik tele az oldalt.

Ami IE6ot illeti ott azért súlyosabb a helyzet:
7

ie6

abraham · 2009. Már. 1. (V), 21.57
hogyan tudom megoldani, hogy egy gépen lássam, hogy mit mutat az ie6, vagy az ie7?
nekem most 7-es van fent, de így hogyan optimalizáljam 6-ra?

ötlet? előre is köszönöm a segítséget!
8

„7 Fresh and Simple Ways to Test Cross-Browser Compatibility ”

Török Gábor · 2009. Már. 1. (V), 22.06
Gábor épp a napokban blogmarkolt egy gyűjtést.
9

Chrome és IE8 hibák

Zeno · 2009. Már. 15. (V), 17.40
Üdv!
Előre bocsátom, hogy most kezdtem honlapot készíteni!
Készítek egy oldalt az egyetemi évfolyamnak. El is jutottam volna már a végére, ha csak a FF-on múlna, de nem így van. És optimalizálni szeretném erre a két böngészőre is. Szóval a hibák.
IE8-nál, egy csík marad a menük és a közép rész között. A Menünek definiálva van a szélessége és a magassága is, margók úgyszint és mégis. A Menü gombjait HTML-ben raktam be, és CSS-el pozicionáltam.


Következő gond a Chrome, ami sokkal nagyobb (Szétcsúszik a lap):


HTML ide vágó kódja:
<div id="menu">
	<ul class="menulink">
		<li><a title="Kezdőlap, hírke" href="index0.5.html" onMouseOver="document.images[0].src='Fejlec/kezdooldal.png';" onMouseOut="document.images[0].src='Fejlec/kezdolap.png';"><img src="Fejlec/kezdolap.png" height=31 width=86></a>
			<a title="6. félév során kiadott anyagok" href="3evfolyam0.5.html"><img src="Fejlec/6felev.png" height=31 width=86></a>
			<a title="Hasznos linkek gyűlyteménye" href="linkek.html"><img src="Fejlec/links.png" height=31 width=86></a>
			<a title="Események időpontja" href="naptar.html" onMouseOver="document.images[3].src='Fejlec/naptar.png';" onMouseOut="document.images[3].src='Fejlec/calendar.png';"><img src="Fejlec/calendar.png" height=31 width=86></a></li>
	</ul>
</div>
CSS ide tartozó része:
#menu {
background-image: url(./Fejlec/menu.png);
background-repeat: no-repeat;
width: 900px;
height: 31px;
}

img {border: 0;}

ul.menulink {
list-style: none;
margin: 0 0 0 0;
padding-left: 3px;
letter-spacing:-2px;
}
10

Nem lehet segíteni

Poetro · 2009. Már. 15. (V), 17.52
Ennyi információ alapján nem lehet megmondani, hogy mi a hiba, valószínűleg a beidézett résznek semmi köze az egészhez.
11

Mi legyen?

Zeno · 2009. Már. 15. (V), 18.29
Akkor beidézem az egészet de hosszú lesz.
CSS
#lap {
width: 900px; 
margin: 10px auto 10px auto;
}

#fent, #kozep, #lent {margin: 0 0 0 0;}

#fejlec {
background-image: url(./Fejlec/fejlec.png);
background-repeat: no-repeat; 
height: 200px;
}

#menu {
background-image: url(./Fejlec/menu.png);
background-repeat: no-repeat;
width: 900px;
height: 31px;
}

#kozep {
float: left; 
width: 900px; 
background-image: url(./Fejlec/kozep.png); 
background-repeat: repeat-y;
}

#jobbsav {
float: right; 
width: 200px; 
margin: 0 0;
}

#savsz {
padding: 2 5 2 5;
}

#fdoboz {
background-image: url(./Fejlec/dobozfent.png);
background-repeat: no-repeat;
margin: 0 0 0 1; 
width: 197px; 
height: 20px;
}

#doboz {
background-image: url(./Fejlec/dobozteto.png); 
background-repeat: no-repeat;
margin: 0 0 0 1; 
width: 197px; 
height: 20px;
}

#tartalom {
float: left; 
width: 700; 
font-family: Calibri, Arial, sans-serif;
}

#bevezeto {margin-top: 10px;}

body {
background-color: #1e173b; 
color: #000000; 
font-family: Arial, sans-serif; 
font-size: 12px;
}

#lent {
background-image: url(./Fejlec/alja.png);
text-align: center; 
font-size: 10px; 
padding: 0 0 0 0; 
font-family: Arial, sans-serif; 
color: white; 
height: 55px;
clear: both;
}

.cimlap{padding: 5px 10px 5px 10px;}

h1.news {
text-align: center; 
font-size: 30px; 
margin: 0 0 0 0; 
color: #194847;
}

h1 {color: #194848;}
h2 {color: #404d8c;}
/*
ul.menulink {display: none;}
*/

img {border: 0;}

ul.menulink {
list-style: none;
margin: 0 0 0 0;
padding-left: 3px;
letter-spacing:-2px;
}
HTML (kiszedtem minden fölösleges szöveget, így rövidebb).
<html>
<head>
<title>SZIE Környezetmérnök 2006 - Hírek</title>
<link rel="stylesheet" href="stilus.css" type="text/css">
<meta http-equiv='Content-Type' content='charset=utf-8'> </meta>
</head>

 <body link="#000066" vlink="#000066" alink="#00006" >
 
<div id="lap">
<div id="fent">
<div id="fejlec">
<!--<object data="./Fejlec/fejlec.png" height="200" width="900">
<param name="image" value="./Fejlec/fejlec.png" /></object>-->
</div>
<div id="menu">
	<ul class="menulink">
		<li><a title="Kezdőlap, hírke" href="index0.5.html" onMouseOver="document.images[0].src='Fejlec/kezdooldal.png';" onMouseOut="document.images[0].src='Fejlec/kezdolap.png';"><img src="Fejlec/kezdolap.png" height=31 width=86></a>
			<a title="6. félév során kiadott anyagok" href="3evfolyam0.5.html"><img src="Fejlec/6felev.png" height=31 width=86></a>
			<a title="Hasznos linkek gyűlyteménye" href="linkek.html"><img src="Fejlec/links.png" height=31 width=86></a>
			<a title="Események időpontja" href="naptar.html" onMouseOver="document.images[3].src='Fejlec/naptar.png';" onMouseOut="document.images[3].src='Fejlec/calendar.png';"><img src="Fejlec/calendar.png" height=31 width=86></a></li>
	</ul>
</div>
</div>
<div id="kozep">

<div id="jobbsav"><div id="fdoboz"></div><div id="savsz">Szöveg</div>
<div id="doboz"></div></div>

<div id="tartalom">
<div class="cimlap">
 <h1 class="news">Tájékoztató a látogatóknak</h1>
 <div id="bevezeto"><font size="3">Szöveg</font></div>
 <p>
 <h1>Friss hírek</h1>
 
 <p><h2>2009.03.09.</h2>
 <p>Szöveg

 <p><h2>2009.03.07</h2>
 <p>Szöveg
 </div>
 </div>
 </div>
 <div id="lent">
 <div align="center"><font size="2"><br><br>SZIE MKK 2006 Környezetmérnök 0.5 béta</font></div>
 </div>
</div>
 </body>
 </html>
12

CHROME

Zeno · 2009. Már. 17. (K), 00.10
Azt mondtátok, hogy néhány px-es hiba is lehet a gond. EI-nél az is volt, meg is oldódott, de Chrome alatt ugyan olyan maradt. Ha a Chrome olyan jó a CSS-ben akkor hogy lehet, hogy a IE7,8; FF3; Safari4 nekem tökéletesen megjeleníti, csak a Chrome nem? Mindegyik böngészőn leteszteltem. Mivel Poetro írta, hogy Chorm és Safari alapjai azonosak, ezért leszedtem a Safarit megnézni azzal és úgy is jó volt. Csak a Chrome nem. :( Pedig azt akartam, hogy jó legyen rá, mert nekem bejött a gyorsasága, de így.

Én gex-el értek egyet.

Ha kirakom a netre az oldalamat akkor küldök a Google-nak egy hibajelentést.
13

Chrome 10 és még mindig

Kérésre törölve 18. · 2011. Már. 29. (K), 17.36
Nekem is hasonló tapasztalatom van: végre nem fagy a Chrome, viszont IE8 és FF4 böngészőben minden ugyan úgy jelenik meg, viszont CH-ban az egyik keresőmező, amibe be kell írni valamit, majd az alatta lévő Keresés gombra kattintani, szóval ez a kis mező 1-2 milliméterrel jobbra tolódik és így baloldalt nincsen egybevágóan a többi elemmel, ami ronda.

Csak a Chrome-ban.

Az oldal Drupal alatt fut, tehát CSS baja lehet, nem?
14

Safari, Opera

Poetro · 2011. Már. 29. (K), 17.39
És kipróbáltad Safari-ban is? Valamint megnézted a kérdéses mező CSS tulajdonságait? Csak azért, mert az egyes böngészőknek más az alapértelmezett stíluslapuk.
15

Elég nekem 3 böngésző :-)

Kérésre törölve 18. · 2011. Már. 29. (K), 17.49
Elég nekem 3 böngésző :-) Ezek a leginkább használtak.

Nem, nem néztem meg, mert eleve nem értem, hogy ha valami szabályosan meg van írva CSS-ben, akkor minek kúrja el egy böngésző, ráadásul az egyik mostanában népszerű böngésző.

Alapértelmezett stíluslap: ezt a Smink CSS felülírja, nem?
16

Változó idők

Poetro · 2011. Már. 29. (K), 17.59
Alapértelmezett stíluslap: ezt a Smink CSS felülírja, nem?

Már amiket felülír. Amiket nem ír felül a smink, azok maradnak alapértelmezett megjelenéssel.

Már csak azért is érdemes Chrome illetve Safari-ra és Operára koncentrálni, mert a legtöbb jelenleg piacon levő, vagy hamarosan megjelenő telefon / tablet mind Webkit alapú böngészőt használ, mint amilyen a Chrome illetve a Safari, vagy Operát (Opera Mini / Mobile). Vagyis pontosan ezen böngészők egy-egy változata fut ezeken az eszközökön.
17

Oké, tehát nem arról van szó,

Kérésre törölve 18. · 2011. Már. 29. (K), 19.10
Oké, tehát nem arról van szó, hogy rosszul értelmezi a CSS-t, hanem hogy ha nincs beállítva semmi, akkor a sajátja lép érvényben.

Azonban úgy tudom, az a helyes CSS eljárás, ha az elején minden beállítást töröltetünk, hogy a sajátjainkat használja.

Az adott modulnak a CSS-ében mindössze 3 sor van:

div.finder-buttons {
  clear: both;
}

div.finder-buttons input.form-submit {
  float: left;
}

div.finder-buttons div.ahah-progress {
  float: right;
}
A többi pedig a Drupal alapbeállításait követi, amely szerint viszont mindne jól jelenik meg.

Tehát akkor hol romlik el a dolog?!
18

Nem feltétlen

Poetro · 2011. Már. 29. (K), 20.38
Mivel nem adsz bővebb támpontot arra, hogy milyen Drupal-ról van szó, valamint milyen sminkről, így nem igazán lehet segíteni. Természetesen egy URL igazán jót tenne, hogy lássuk miről is van szó, így látatlanban nehéz gyógyítani.
19

Kösz az ajánlatot, de még

Kérésre törölve 18. · 2011. Már. 29. (K), 23.34
Kösz az ajánlatot, de még lokálgépen van.

Drupal 6 és Finder modul.

Nehéz fa ez, mert a drupal fórumon több hónap alatt nem tudtak megoldást adni arra sem a Finder modullal kapcsolatban, hogy hol kellene beállítani, hogy a Keres gomb ne a mező alatt, hanem mellett legyen. Hihetetlen mennyit kutattam már, sokszor sikerült is "meghekkelnem" így modulokat, sminkeket már, de nem tudok még php-ban programozni, így nagyon nehéz.