Problemy s ruznyma prohlizeci (CSS)

[Nidzo]

Mam vodorovne menu, s urcenou velikosti - 150x20px - 5x vedle sebe, s pozadim jako prechod (no proste aby to vytvorilo dojem tlacitka) a porad mi to blbne v IE6 (FF a Opera je ok)...

Kod stranky (uryvek):

Kód: Vybrat vše

<div class="upmenu">
<a href="" class="upmenu-item">Blog</a>
<a href="" class="upmenu-item">Galerie</a>
atd...

a v CSS mam na upmenu-item nastavene:

Kód: Vybrat vše

.upmenu-item:link, .upmenu-item:visited
{
	background-image: url("./Images/upmenu.gif");
	background-repeat: repeat-x;
	border-right: 1px solid #989898;
	color: #A00000;
	display: table-cell;
	font-size: 12px;
	font-weight: bold;
	height: 20px;
	padding-top: 2px;
	text-align: center;
	text-decoration: none;
	width: 150px;	
}

Pokud dam display: block; tak se nahazou pod sebe...uz nevim co s tim, zkousel jsem snad vse, kdyz nekdo poradi budu vdecny...

Funkcni ukazka je na: http://nidzo.aspweb.cz

EDIT: Jelikoz se mi rozmnozilo vice problemu, doslo k prejmenovani threadu.

[k23]

Jsi na dobré cestě, mrkni na tohle, vykuchej si z toho co potřebuješ, tohle funguje v IE/FF/Opeře.

Kód: Vybrat vše

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Browse</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Forums</a></li>
    <li><a href="#">Upload</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Rules</a></li>
  </ul>
  <div class="cleaner">&nbsp;</div>
</div>

Kód: Vybrat vše

.menu {
  width: 100%;
  background-color: white;
  border-bottom: 3px solid gray;
  border-top: 3px solid orange;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.menu li {
  float: left;
  font-size: 12px;
  text-align: center;
  width: 6em;
  margin-top: -3px;
  margin-bottom: -4px;
  _margin-bottom: -5px;
}

.menu a {
  padding: 4px 0;
  display: block;
  width: 100%;
  background: white;
  text-decoration: none;
  font-weight: bold;
  color: black;
  border-top: 3px solid orange;
  border-bottom: 3px solid gray;
}

.menu a:hover {
  background-color: #696969;
  color: White;
}

.cleaner {
  clear: both;
}

[karf]

nepomohla by tabulka?

btw: po různých úvahách na téma menu jsem vsadil na černou skříňku by xara a neni to špatný www.karf.wz.cz

[k23]

nepomohla by tabulka?

btw: po různých úvahách na téma menu jsem vsadil na černou skříňku by xara a neni to špatný www.karf.wz.cz

Dělej jak myslíš, ale tímto způsobem nebudeš umět menu dělat nidky Černé skříňky jsou fajn do doby, kdy to začne zlobit.

Nidzo je na dobré cestě, navíc nechtěl nějakej paskvil ale je moderní a chtěl CSS

[Nidzo]

2k23: Thx, uz to zkousim nejak prekopat...
2karf: Nevim, v Xare jsem si delal menu pred 5 lety, kdyz mi to prislo hezky, ted nad tim radsi stravim chvili v Photoshopu a nad CSS...Tabulkou by to asi slo, ale nemam je rad Kazdopadne diky...

[Nidzo]

Tak uz sem vyresil jak to zobrazit vodorovne, ale ted mi to v IE dela pro zmenu jinou chybu look: http://nidzo.aspweb.cz/

EDIT: Vypoctene je to spravne, tento problem v IE zmizi kdyz nastavim sirku posledniho odkazu na 146px, jenze pak je tam 2px dira a vypada to osklive

[Nidzo]

Mam to! Oóóó, jak jsem stastny, po nekolikahodinovem trapeni jsem nakonec ze zoufalstvi za poslednim tlacitkem odradkoval (<br />) a najednou koukam, ono to funguje jak ma. A to sem to tam puvodne napsal za ucelem, jestli mi to neco neprozradi...

Takze vysledny kod vypada takle (treba to nekomu v budoucnu ulehci praci):

Kód: Vybrat vše

<div class="upmenu">
        <a href="" class="upmenu-item">Blog</a>
        <a href="" class="upmenu-item">Galerie</a>
        <a href="" class="upmenu-item">Portfolio</a>
        <a href="" class="upmenu-item">Download</a>
        <a href="" class="upmenu-item" style="width: 150px; border-right: none;">O mně</a><br />
    </div>

CSS:

Kód: Vybrat vše

.upmenu
{
	border-right: 1px solid #989898;
	border-left: 1px solid #989898;
	height: 20px;
	margin: 0 auto;
	text-align: center;
	width: 750px;
}

.upmenu-item:link, .upmenu-item:visited
{
	background-image: url("./Images/upmenu.gif");
	background-repeat: repeat-x;
	border-right: 1px solid #989898;
	border-bottom: 1px solid #989898;
	color: #A00000;
	display: block;
	float: left;
	font-size: 12px;
	font-weight: bold;
	height: 18px;
	padding-top: 2px;
	text-align: center;
	text-decoration: none;
	width: 149px;	
}

.upmenu-item:hover, .upmenu-item:active
{
	background-image: url("./Images/upmenu-click.gif");
	background-repeat: repeat-x;
	color: #D00000;	
}

Vsem moc dekuju. Doufam ze uz se dalsi problemy nevyskytnou

[Nidzo]

Tak bohuzel ted se vyskytly...a to s Operou. V IE a FF to jede, v Opere nikoli. Kdyz se podivate pod logo a ten informacni "panylek", je tam 2px mezera a ta tam nema byt

Reseni znam, ze napisu u wrapperu margin-top: -2px; ale pote se to rozhodi v IE a FF...nejaky napady? Predem thx
EDIT: link at nemusite zbytecne rolovat...

[Axis]

Tak bohuzel ted se vyskytly...a to s Operou. V IE a FF to jede, v Opere nikoli. Kdyz se podivate pod logo a ten informacni "panylek", je tam 2px mezera a ta tam nema byt

Reseni znam, ze napisu u wrapperu margin-top: -2px; ale pote se to rozhodi v IE a FF...nejaky napady? Predem thx
EDIT: link at nemusite zbytecne rolovat...

Mal som podobný problém, kde mi v IE a FF šlo dobre, a v Opere nie...
Musel som inak navrhnúť tabuľku... A použiť IE hack? Že by si spravil aby vo FF a v Opere šlo narovnako, a na IE by si si nastavil vlastnú hodnotu...
--
Ja viem veľmi všeobecná rada, ale mne pomohla

[Nidzo]

2Axis: IE hack mi nic neresi, v IE to funguje paradne ale ta Opera zlobi...ono by to slo pres ASP.NET, ze bych pro Operu udelal specialni, ale nechce se mi kvuli 2px to resit takle slozite.
Navic tady je to opravdu jen zalezitost, kde je pouzit 4x <div>. div nahore (info), wrapper a uvnitr neho jeden nalevo (content) a napravo (menu). Urcite tam mam nejakou kravinu, kterou porad prehlizim...