ugrás a tartalomhoz

CSS hibák IE kompatibilitási nézettel

Creative · 2011. Már. 27. (V), 13.56
Üdv,

Először is: adott egy weboldal, ahol a fejléces navigációt stilizált listaelemekkel oldom meg, melyek fölé egeret víve a háttere változik, s benne lévő hivatkozás színe is /ez eddig ugye érthető:)/. A stílusfájl elején resetelem a létező legtöbb elemet, majd egy böngésző és oprendszer-detektálással más-más stylusfájlokat hívok be a megjelentetésre. Ez jól működik, hisz mind mac-ről mind pc-ről jól működik, mind Firefox, mind Opera, Safari, Chrome és IE 8 alól is. Viszont ha IE -ben belövöm a kompatibilitási nézetet, két nagy hiba bukkan fel :S ...

A navigációs elemeket <span> tagekkel választottam el, melyeknek adtam fix szélesség értéket s hátteret. Viszont ezek eltűnnek, ledobja őket a navigációs sáv alá :S Akármit próbálok, nem akar rendbe jönni :(
A másik problémám egy unordered list. IE kompatibilitás alatt eltűnik a beállított listajelölése, ami az alapértelmezett satírozott pont. Egyedül inline pozíciónál látható újra, de az nekem nem jó.
Már két álló napja szívok ezzel a két jelenséggel, s szinte minden lehetőséget kipróbáltam a hiba orvoslására, de semmi.
Íme a navigációs menü kódja, alatta pedig a hozzá tartozó css:
				<div id="header_lower">
					<div>
					<div id="main_nav">
						<ul id="navlist">
							<li><a <?php if($url[0] == 'about_us') { echo 'class="selected" '; } ?> href="<?php echo _URL; ?>about_us">about us</a></li>
							<span class="spacer">&nbsp;</span>
							<li><a <?php if($url[0] == 'services') { echo 'class="selected" '; } ?> href="<?php echo _URL; ?>services">services</a></li>
							<span class="spacer">&nbsp;</span>
							<li><a <?php if($url[0] == 'employment') { echo 'class="selected" '; } ?> href="<?php echo _URL; ?>employment">employment</a></li>
							<span class="spacer">&nbsp;</span>
							<li><a <?php if($url[0] == 'contact') { echo 'class="selected" '; } ?> href="<?php echo _URL; ?>contact">contact</a></li>
						</ul>
					</div>
					</div>
				</div>
#header_lower {
	width: 931px;
	height: 52px;
	line-height: 51px;
	background: url('/images/head_nav_bg.png') repeat-x bottom left;
	text-align: center;
}
#header_lower > div {
	margin: 1px auto;
	padding-left: 15%;
}
#header_lower > div > #main_nav ul {
	display: inline;
	width: 931px;
	height: 52px;
}
#header_lower > div > #main_nav ul li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: block;
	float: left;
	height: 52px;
	text-align: center;
	background: url('/images/head_item_bg.png') no-repeat center 0px;
}
#header_lower > div > #main_nav span.spacer {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: block;
	float: left;
	height: 52px;
	width: 34px;
	text-align: center;
	vertical-align: bottom;
	background: url('/images/head_nav_spacer_bg.png') no-repeat center -52px;
}
#header_lower > div > #main_nav ul li:hover {
	background: url('/images/head_item_active_bg.png') no-repeat center 0px;
}
#header_lower > div > #main_nav ul li > a, #header_lower > #main_nav ul li > a:visited,
#header_lower > div > #main_nav ul li > a:active {
	display: block;
	text-decoration: none;
	font-size: 26px;
	font-family: "Tahoma";
	color: #4a5a96;
	letter-spacing: 4.2px;
	vertical-align: bottom;
}
#header_lower > div > #main_nav ul li > a:hover, #header_lower > div > #main_nav ul li > a.selected,
#header_lower > div > #main_nav ul li > a.selected:hover, #header_lower > div > #main_nav ul li > a.selected:visited,
#header_lower > div > #main_nav ul li > a.selected:active {
	color: #e7303e;
}
Ez pedig a bajos listám css-e (forráskód nem szükséges, mert egy sima, osztállyal ellátott ul): 
#inner_right .services_text > div > .tabContainer > div > #left > ul,
#inner_right .services_text > div > .tabContainer > div > #right > ul {
	margin: 0;
	padding: 0;
	list-style-type: disc;
	list-style-image: none;
	list-style-position: outside;
}
#inner_right .services_text > div > .tabContainer > div > #left > ul li,
#inner_right .services_text > div > .tabContainer > div > #right > ul li {
	margin: 0;
    padding-left: 0;
	display: inline-block;
}
Segítségképp még íme a navigáció screenshotja firefox, alatta pedig ie kompatibilitási nézetből:


Köszönöm előre is a hozzászólásokat!

C.
‹ Keresőmezőbe íráskor javaslatok megjelenítése alul jQuery setTimeout $(this) ›
 ■
1

ul

Poetro · 2011. Már. 27. (V), 15.51
Az UL elem csak LI elemeket tartalmazhat. Ezt ne akard elkerülni, így kell csinálni. Pont. Elválasztó vonalakat meg ezer más féleképpen lehet kirakni, például rakhatsz SPAN elemeket az LI elejére, és float: right.
Valamint amennyiben támogatni akarod az IE6-ot, akkor felejtsd el a gyermek kiválasztót, azaz a >-t, valamint IE7 esetében is előfordulnak vele hibák (ha a megjegyzés van a szülő és a gyerek között, akkor előfordulhatnak hibák).

Megjegyzés: Ha már HTML témában írsz, akkor adj meg HTML-t és ne PHP kódot.
2

ul still :)

Creative · 2011. Már. 27. (V), 20.00
Igenis, Poetro mester.

Javítottam a navigáció kódját, most teljesen span megoldással van. Viszont még mindig nem tudok rá jönni (s erre te se írtál még), hogy miért tűnik el az ul listám "pöttyözéses" jelölése, mikor kompatibilitásiba nézem. Mindenhol ott a pötty, a css is berakja az összes kellő tulajdonságot, még se jelenik meg :S Ez a tartalmi felsorolásos listám, nem a menüs :) A CSS fentebb található.

Ui.: elnézést a php colorer -ért ^^

C.
3

float: left;

kodfoso · 2011. Már. 27. (V), 20.47
miért tűnik el az ul listám "pöttyözéses" jelölése, mikor kompatibilitásiba nézem

Hasonlóba belefutottam egyszer, akkor nekem li-nek egy float: left; megadása megoldotta. Egy próbát megér.
8

float volt, van, nem lesz

Creative · 2011. Már. 28. (H), 11.27
Igen, már ezt is kipróbáltam a legelső köröknél... Azért is írtam, hogy egy napja szívok rajta :S
Sajnos ie6-nál egyedül akkor jelenik meg a listaszámozásként szolgáló 'disc', amikor a beállításaim a következők:
#left ul,
#right ul {
	margin: 0;
	padding: 0;
	list-style-type: disc;
	list-style-image: none;
	list-style-position: inside;
}
#left li,
#right li {
	margin: 0;
	padding: 16px; /* benn lévő font alapmérete */
	display: inline-block;
}
A gond az, hogy kis millió fórumot átnéztem már saját tudásom s tapasztalataim legvégső határainak megfeszítése után, és szinte senki se találkozott még így ebben a formában eme hibajelenséggel (értsd: mindenhol jó, kivéve ie6, formázással vagy anélkül).
:(

C.
4

Mivel egy id a HTML-ben csak

Hidvégi Gábor · 2011. Már. 27. (V), 22.04
Mivel egy id a HTML-ben csak egyszer szerepelhet, ezért az ilyen deklarációk fölöslegesen hosszúak:
#inner_right .services_text > div > .tabContainer > div > #left > ul li

Ehelyett tökéletes ez:
#left li

Az ul-t is ki lehet hagyni, mert a li minding ul-en belül van. Így nemcsak átláthatóbb a kódod, hanem az egyszerűbb definíció miatt gyorsabb lesz a feldolgozása is a böngészőben.

Ha vízszintes menüt akarsz, akkor a szülő ul-nek adj egy magasságot (akkorát, mint a li-k magassága), és a li-k legyenek float: left;-ek.

A fenti példában nyugodtan kihagyhatod a spacer spant, és a képet berakhatod a <li> háttérképének. Az utolsó li-nek ilyenkor adok egy class-t, mondjuk így:
<li class="utolso">Utolsó</li>,
és egy ilyen stílusdefiníciót:
#menu li.utolso {
background: none;
}

A > child selector használatát én sem ajánlom, jól megadott classnevekkel simán ki lehet váltani, azaz nulla befektetéssel a lehető legtöbb böngészőn jól fog megjelenni.
5

Ha nem szeretném, hogy

Hidvégi Gábor · 2011. Már. 27. (V), 22.20
Ha nem szeretném, hogy megjelenjen az ul alapértelmezett pöttyözése, a következő css-t használom:

#menu {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}


A kompatibilitási módot pedig nyugodtan felejtsd el. IE6-tól fölfele minimális számú hack-ekkel megoldható, hogy ugyanazzal a CSS-sel ugyanúgy nézzen ki az oldal minden böngészőben.
6

Szintén megoldás

Burnee · 2011. Már. 28. (H), 09.44
Szintén megoldás az egy soroban megjelenő listára a
li {
display: inline;
}
Így automatikusan elveszti a pöttyözést, azonban nem definiálhatsz magasságot, illetve vertikális margókat.

Egyébként a pöttyöknél még érdemes odafigyelni a list-style-position-re.
7

Szerintem ez nem a legjobb,

Hidvégi Gábor · 2011. Már. 28. (H), 10.02
Szerintem ez nem a legjobb, mert display: inline esetén nem adhatsz a li-nek dimenziót, margót és paddingot, azaz a legtöbb esetben plusz spant vagy divet kell ilyenkor belepakolni.