Prosim pomoc problem v IE – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Prosim pomoc problem v IE – CSS – Fórum – Programujte.comProsim pomoc problem v IE – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
froo+0
Newbie
13. 6. 2007   #1
-
0
-

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/

Nahlásit jako SPAM
IP: ...–
Reklama
Reklama
Jan Říha0
Newbie
14. 6. 2007   #2
-
0
-

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.

Nahlásit jako SPAM
IP: ...–
The 17th Cohort
froo+
~ Anonymní uživatel
23 příspěvků
16. 6. 2007   #3
-
0
-

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.

Nahlásit jako SPAM
IP: ...–
Martin Šimko
~ Redaktor
0
Grafoman
17. 6. 2007   #4
-
0
-

tady 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;}


Nahlásit jako SPAM
IP: ...–
Programujte.com redaktor
Sleduj mě na @MartinSimko
Petr Fojtík0
Věrný člen
17. 6. 2007   #5
-
0
-

Dej 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....]

Nahlásit jako SPAM
IP: ...–
Petr Fojtík0
Věrný člen
17. 6. 2007   #6
-
0
-

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]

Nahlásit jako SPAM
IP: ...–
froo+0
Newbie
19. 6. 2007   #7
-
0
-

To Petroff: jedno slovo... super... děkuju moc!

Nahlásit jako SPAM
IP: ...–
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žit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 5 hostů

Podobná vlákna

Prosím o pomoc!! — založil Michal

Prosim o pomoc — založil bbeni

Prosím pomoc — založil Michal

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý