overflow:hidden; pri display:table-cell;

Zdravim, mam UL s LI polozkami, a v kazdej A.

...

<ul>

<li><a href=# class='n'>text</a></li>

<li><a href=# class='n'>text2</a></li>

<li><a href=# class='n'>text3</a></li>

</ul>

...

LI polozky a UL listy maju fixny width, momentalne 150px:

.mainul li ul, .mainul ul li {

	width: 150px;

}

LI polozky maju fixny height, taky isty ako odkazy v nich, a maju display:table;

.mainul ul li {

	height:35px;

	display:table;

	max-height:35px;

	overflow:hidden;

}

odkazy v nich maju display:table-cell;

a.n, a.inact {

	font-size:10px;

	font-family:Arial, Verdana;

	font-weight:bold;

	color:#FFFFFF;

	display:table-cell;

	_display:block;

	text-align:center;

	padding-left:3px;

	padding-right:3px;

	_padding-top:13px;

	vertical-align:middle;

	height:35px;

	/* \*/

	height:22px;

	/* */

	background-color:transparent;

	overflow:hidden !important;

}

Text v linku chcem vertikalne centrovat v modernych prehliadacoch, ktore to dokazu. Pre internet explorer pouzitim IE hackov centrujem len prvy riadok, pomocou padding-top. Problem nastava, pokial prehliadac rozumie display:table,table-cell a text vo vnutri polozky bud presiahne jej width (150px) alebo jej height(35px). Pri presiahnuti height sa polozka roztiahne, a pri presiahnuti width text bude vytrcat.

Testcase: http://deltaclubba.sk/testing (otvorit v inom prehliadaci ako IE, ukazte na menu "polozka 1")
CSS styl: http://deltaclubba.sk/testing/styl.php

overflow:hidden nema ziadny efekt. Existuje nejaka moznost ako obmedzit width a height elementu s display:table-cell? Dakujem

No taaak, to sa pytam tak tazke veci?? aspon mi niekto napiste ze sa to neda, lepsie ako neodpisat! Prosiimm pomoc

uff, no na jeden riadok to byt nemusi, to menu je administrovatelne, tzn mozes s nim robit pomocou php co chces. Preto musi byt center aj na viac riadkov, aspon v non-IE. Je to maturitna praca a chcem aby to bolo dokonale, nechcem nic riskovat. Trieda n tam je lebo bez nej to neslo. Pre blizsie info mrkni http://hojko.com/viewtopic.php?t=61238 tam to mas podrobnejsie rozpisane.

To asi nebude mozne. Internet explorer nerozumie display:table-cell. Kazde menu urovne 2 a viac ma triedu menupopchild, v ktorej je len pre IE toto:

/* kazde podmenu, uroven 2 a viac */

.mainul li ul.menupopchild{

	position: absolute;

	display: none;

	/* pre IE */

	visibility:hidden;

	background-color:#60B96B;

	background-image: url(gradimg.php?pw=150&ph=35&scol=4953153&ecol=7059808);

	background-repeat: no-repeat;

	background-position: bottom;

	color:#FFFFFF;

	z-index:20;

	_margin-left:150px;

	_margin-top:-35px;

}

jednoducho povedane, v IE treba toto menu "posunut" tak, aby UL vyzeralo ze je to podmenu rodica. Toto predpoklada pevnu sirku a vysku polozky. V normalnych prehliadacoch, ked ma rodiaci odkaz display:table-cell, menu s triedou menupopchild sa nemusi posuvat, pretoze je uz umiestnene ako ma byt - tj lavy horny roh UL je tam, kde je pravy horny roh A.

Preto keby som nechal variabilnu width a height, v IE by som to nevedel napozicovat. Preto by som chcel podobny efekt dosiahnut aj v inych prehliadacoch(fixny width a height), aby to vyzeralo tak isto ako IE. S tym rozdielom, ze chcem vertikalne centrovat text pouzitim display:table-cell a vertical-align:middle. Ak riesim blbosti sa ospravedlnujem :)

ach, neviem preco moje prispevky vzdy zapadnu prachom a nikto na ne neodpovie. prosiiim. DA sa to spravit? Budem vdacny ak aj odpisete "nie neda sa to spravit". Dakujem