TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Newbie
rozdělal sem stránky a kontroloval je jen ve firefoxu kde běhaly dobře ale v IE mi dělají css malinký problém v menu... dělají mi tam takové čáry navíc... prosim projeďte si to někdo a poraďte... http://www.froo00.own.cz/
Fórum › CSS
Prosim pomoc problem v IE
Nahlásit jako SPAM
IP: ...–
Mě se zas stávalo, že mi řada věcí nefungovala ve Firefoxu i přesto, že jsem stránky měl validní v XHTML 1.1 strict. Firefox je velice závádějící. Stránky bych v něm vůbec nezobrazoval. Kdyby si sem hodil zdroják, tak bych ti st im poradim. dělám CSS už několik let.
Ymemgirei píše:#
# Mě se zas stávalo, že mi řada věcí nefungovala ve Firefoxu i přesto, že jsem stránky měl validní v XHTML 1.1 strict. Firefox je velice závádějící. Stránky bych v něm vůbec nezobrazoval. Kdyby si sem hodil zdroják, tak bych ti st im poradim. dělám CSS už několik let.
To bych ti byl vdecnej, ted sem zrovna u nasich nemeckych bratru ve treti risi, ale az prijedu poslu kod a pokud neco vykoumas bude to zupa! Ale to vo tom firefoxu sem nevedel, ja sem na nej asi moc fixovanej.
Grafomantady by měl být zdroják, teď v noci už nemám sílu na to, hledat kde je chyba, zítra se na to kdyžtak mrknu...
*
{
margin: 0;
padding: 0;
}
body
{
background-color: #d9d9d9;
}
#base
{
text-align: left;
width: 1100px;
min-height: 100%;
height: 100%;
}
#obsah
{
width: 899px;
float: right;
text-align: left;
border-left:1px solid #949494;
min-height:530px;
}
#hlavicka
{
width: 1100px;
height: 120px;
background-image: url('header.png');
}
#levy
{
float: left;
width: 200px;
height: 500px;
text-align: left;
background-image: url('levy.png');
background-repeat:repeat-x;
}
#patka
{
clear: both;
float: right;
display:block;
width: 900px;
height: 50px;
background-image:url('patka.png');
}
#hlavicka h1
{
text-align: center;
color: #bfbfbf;
}
#patka span
{
float:right;
font-size:10pt;
}
#patka a
{
color:Black;
}
.menu
{
position:relative;
font-size:90%;
height:235px;
margin:55px 0 0 10px;
}
/* style menu */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:175px;
position:relative;
border:1px solid gray;
border-width:1px 1px 0 1px;
background:#a1a1cf;
}
.menu li
{
background:transparent;
height:26px;
}
* html .menu li
{
margin-left:-16px;
margin-left:0;
}
/* table */
.menu table
{
position:absolute;
border-collapse:collapse;
top:0; left:0;
z-index:100;
font-size:1em;
width:0;
height:0;
}
/* style links */
.menu a, a:visited
{
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:175px;
color:#000;
text-indent:5px;
border-bottom:1px solid gray;
background:transparent;
}
/* style link hoover */
* html .menu a:hover
{
color:#fff;
background:#999;
}
.menu :hover > a
{
color:#fff;
background:#999;
}
/* posun vyskakovaciho panelu */
.menu ul ul
{
visibility:hidden;
position:absolute;
top:-1px;
left:140px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul
{
visibility:visible;
background:#ddddee;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul
{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul
{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul
{
visibility:visible;
background:#efeff8;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul
{
visibility:visible;
background:#ffffff;
}
.menu ul.top2 {top:25px;}
.menu ul.top3 {top:51px;}
.menu ul.top4 {top:77px;}
.menu ul.top5 {top:103px;}
.menu ul.top6 {top:129px;}
.menu ul.top7 {top:155px;}
Programujte.com redaktor
Sleduj mě na @MartinSimko
Sleduj mě na @MartinSimko
Věrný členDej nejen styly, ale celou stránku = DOCTYPE až /HTML.
Případně ji zkrať vypuštěním všeho co nemá vliv na problém (A LAYOUT!) =bloky,reklama,dlouhé texty,skripty....
> I kdyby byla chybka jen v syntaxi/struktuře někde ve stylech, můžu ji dlouho hledat.
> Kdežto po zobrazení stránky v IE Developeru to trvá minutku.
[chápu že za minutku jsou ti s x-letými zkušenostmi schopni prolétnout definice a HIT INTO BLACK]
[bohužel u většiny z nich je ta minutka taky maximum....]
Jde o bug v IE7:
....po vložení <a> do <li> způsobí a:hover "vyrobení" malého dolního marginu u <a>, čímž vzniklá skulina rozhodí formát u zbytku sloupce....
K odstranění stačí prvkům <li> nastavit float:left ....a IE7 je OK.
Pro změnu nastane zase chyba v FF - nezobrazí se modrá barva základního seznamu (vnořené seznamy jsou OK) ,
takže ještě nastavíme modrý background u <li> pro tento jediný <ul>.
Hotové menu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MENU funguje v FF i IE</title>
</head>
<style type="text/css">
* { margin: 0; padding: 0 }
body { background-color: #d9d9d9 }
.menu
{
position:relative;
font-size:90%;
height:235px;
margin:55px 0 0 10px;
}
.menu ul
{
padding:0;
margin:0;
list-style-type:none;
width:175px;
position:relative;
border:1px solid gray;
border-width:1px 1px 0 1px;
}
.menu li
{
float:left;
background:transparent;
height:26px;
}
* html .menu li
{
margin-left:-16px;
margin-left:0;
}
.menu table
{
position:absolute;
border-collapse:collapse;
top:0; left:0;
z-index:100;
font-size:1em;
width:0;
height:0;
}
.menu a, a:visited
{
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:175px;
color:#000;
text-indent:5px;
border-bottom:1px solid gray;
background:transparent;
}
* html .menu a:hover
{
color:#fff;
background:#999;
}
.menu :hover > a
{
color:#fff;
background:#999;
}
.menu > ul > li
{
background:#a1a1cf;
}
.menu ul ul
{
visibility:hidden;
position:absolute;
top:-1px;
left:140px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul
{
visibility:visible;
background:#ddddee;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul
{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul
{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul
{
visibility:visible;
background:#efeff8;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul
{
visibility:visible;
background:#ffffff;
}
.menu ul.top2 {top:25px;}
.menu ul.top3 {top:51px;}
.menu ul.top4 {top:77px;}
.menu ul.top5 {top:103px;}
.menu ul.top6 {top:129px;}
.menu ul.top7 {top:155px;}
</style>
<body>
<a name="#H"></a>
<div class="menu">
<ul id="menufix">
<li><a href="#H">Top Level 1</a></li>
<li><a href="#H">Top Level 2</a></li>
<li><a href="#H">Top Level 3 »</a>
<ul class="top3">
<li><a href="#H">Sub Level 1a</a></li>
<li><a href="#H">Sub Level 1b</a></li>
<li><a href="#H">Sub Level 1c »</a>
<ul class="top3">
<li><a href="#H">Sub Level 2a</a></li>
<li><a href="#H">Sub Level 2b »</a>
<ul class="top2">
<li><a href="#H">Sub Level 3a</a></li>
<li><a href="#H">Sub Level 3b</a></li>
<li><a href="#H">Sub Level 3c</a></li>
<li><a href="#H">Sub Level 3d</a></li>
</ul>
</li>
<li><a href="#H">Sub Level 2c</a></li>
</ul>
</li>
<li><a href="#H">Sub Level 1d</a></li>
<li><a href="#H">Sub Level 1e</a></li>
</ul>
</li>
<li><a href="#H">Top Level 4</a></li>
<li><a href="#H">Top Level 5</a></li>
<li><a href="#H">Top Level 6</a></li>
</ul>
</div>
</body>
</html>Tenhle typ menu vyžaduje zkontrolovat počet vnořených menu (při větším počtu je třeba dopsat další styly)
Taky je nutné pomocí class="top?" ošetřit vert.pozici každého submenu.
Tyhle nevýhody nemá tento jednoduchý typ:
#menufix {width:101px; height:148px;}
#menufix li {
background:#b2ab9b; display:block; width:100px; position:relative; float:left
}
#menufix a, #menu a:visited {
display:block; width:100px; color:#000; height:23px;
font-size:10px; line-height:22px; text-decoration:none; text-indent:5px;
background:transparent; border:1px solid #fff; border-width:0 1px 1px 0;
}
#menufix, #menufix ul { padding:0; margin:0; list-style-type: none }
#menufix :hover > a { background:#dfd7ca; color:#c00 }
#menufix li ul { display: none }
#menufix :hover > ul {
display:block; position:absolute; top:0; left:101px; text-align:left
}<ul id="menufix"> .......takže ho můžeš vyzkoušet na předchozím kódu
[Zdroj: http://www.cssplay.co.uk/ie/ie7bug]
Zjistit počet nových příspěvků
Přidej příspěvek
Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
Uživatelé prohlížející si toto vlákno
Uživatelé on-line: 0 registrovaných, 8 hostů
Podobná vlákna
Problém s Integrály moc prosím o pomoc — založil roubajs
Pomoc.... nějaká chybka prosím pomoc - více v podrobném popisu — založil tkstudent
Prosim o pomoc...... — založil Cassper
Prosim pomoc — založil Ninus
Pomoc prosim — založil Anonymní uživatel
Moderátoři diskuze
