CSS - IE vs. FF

atlox

Servuste chalani

Poradte mi ako vyriešiť moj problemik. Spočíva v tom, že v IE funguje štýl na odkaz v menu tak ako má... problém nastáva ako vždy vo FireFoxe a je to dosť nechutné. Štýl je nasledovný:

Kód: Vybrať všetko

A.menu {
   color: #FFFFFF;
   font-size: 11px;
   font-family: Verdana;
   font-weight: bold;
   background-color: #333333;
   padding: 3px;
   text-decoration: none;
   width: 100%;
   border-bottom: 1px dashed #000000;
}

Hover efekt mení len farbu pozadia a textu čiže v tom problém nie je. Ale jedná sa mi o toto: menu mám v tabuľke a to tak, že tabuľka má jeden stĺpec a x-riadkov (na tom nezáleží). Cellpadding aj cellspacing tabuľku maju hodnoty 0, width má 150. No a mňa trápi:

a) prečo vo FF nechce zobraziť odkaz na 100% teda na celú šírku bunky tabuľky
b) prečo prekrýva jeden odkaz ten druhý aj keď sú v rozdielnych bunkách

Poradte, lebo neviem si s tým rady a viem, že viac hláv, viac rozumu

Vopred vďaka!!!

zupanok

skús dať pre bunky TD background a nie pre A, potom bude vyfarbená celá bunka nielen tam kde je text,
a to prekrývanie, to je nezvyklé, nerobíš niekde chybu?
alebo skús zadať pre TD aj height (dostatočne veľký vzhľadom k font-size a padding)

atlox

Lenže farba pozadia odkazu sa mi zmení keď na neho prídem myškou... ako to urobiť aby sa zmenila farba pozadia bunky?

zupanok

tak to ti pôjde asi len za pomoci JS, IE hover okrem A nepodporuje, takže nemôžeš to dať napr. pre TD
a keby som videl celý zápis lepšie by sa mi radilo, takto si to ani nemôžem odskúšať

alebo ešte skús tak ako si to písal prv ale zadaj width aj height pre to A ale v PX a nie v %

atlox

Nech sa páči:

Kód: Vybrať všetko

<html>
<head>
<style type="text/css">
A.menu {
   color: #FFFFFF;
   font-size: 11px;
   font-family: Verdana;
   font-weight: bold;
   background-color: #333333;
   padding: 3px;
   text-decoration: none;
   width: 100%;
   border-bottom: 1px dashed #000000;
}
A.menu:hover {
   color: #CCCCCC;
   background-color: #000000;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="150">
<tr><td><a href="#" class="menu">link_1</a></td></tr>
<tr><td><a href="#" class="menu">link_2</a></td></tr>
<tr><td><a href="#" class="menu">link_3</a></td></tr>
<tr><td><a href="#" class="menu">link_4</a></td></tr>
</table>
</body>
</html>

Tag <a> je inline, takže zaberie iba toľko miesta, koľko treba. To, že sa to v IE zobrazuje inak je chyba toho, že IE funguje nesprávne.
Mohol by si zmeniť typ na block, ale neviem, ako sa to bude správať v IE (kvôli chybnému box modelu).

Kód: Vybrať všetko

A.menu {
   color: #FFFFFF;
   font-size: 11px;
   font-family: Verdana;
   font-weight: bold;
   background-color: #333333;
   padding: 3px;
   text-decoration: none;
   border-bottom: 1px dashed #000000;
   width: 150px;
   display: block;
}

wasil · Príspevok od používateľa **wasil** » 28 nov 2007, 9:28

chrono napísal:Tag <a> je inline, takže zaberie iba toľko miesta, koľko treba. To, že sa to v IE zobrazuje inak je chyba toho, že IE funguje nesprávne.
Mohol by si zmeniť typ na block, ale neviem, ako sa to bude správať v IE (kvôli chybnému box modelu).

IE/Win neumí selektor potomků takže stačí určit minimální šířku odkazu

Kód: Vybrať všetko

width: .1em;

a protože tak dlouhý není žádný odkaz tak si to (akorát jen ie) prohlížeč natáhne na svojí délku, jakou potřebuje. Byl by zase problém u FF ale IE/Win neumí selektory takže

Kód: Vybrať všetko

html>body a.menu {width: 150px;}

akorát ten jeden odkaz v IE bude "kratší" takže to celé změnit a každý odkaz obalit divem do kterého nadefinujete pouze sirku a

Kód: Vybrať všetko

margin: 0;padding: 0;

snad by to i v IE6 mělo jet v tomto případě

CSS

Kód: Vybrať všetko

div.menu
{
	width: 150px;
	margin :0;
	padding: 0;
}

div.menu a
{
	color: #000;
	background: #FFF;
	padding: 5px;
	border: 1px solid;
	display: block;
}

div.menu a:hover
{
	color: #FFF;
	background: #000;
}

HTML

Kód: Vybrať všetko

<div class="menu"><a href="#">Lorem Ipsum</a></div>
<div class="menu"><a href="#">Lorem</a></div>
<div class="menu"><a href="#">Ipsum</a></div>
<div class="menu"><a href="#">Cu nulla ridens</a></div>
<div class="menu"><a href="#">Falli oportere</a></div>

atlox · Príspevok od používateľa **atlox** » 30 nov 2007, 0:13

Uplne tam stačí pridať to

Kód: Vybrať všetko

display: block;

už to funguje... vďaka vám za rady