| Autor | Zpráva | ||
|---|---|---|---|
| Mufna Profil |
#1 · Zasláno: 9. 4. 2009, 17:08:48 · Upravil/a: Mufna
Zdravím Vás. Po úpravě jedné stránky webu se mi začal v browserech zobrazovat dolní vodorovný posuvník. Nezobrazuje se pouze v IE 6, v IE 7 ano a v dalších browserech taky. Deklaraci DOCTYPE mám postavenou tak, že IE6 je v quirku, vše ostatní by mělo být ve standardu. Takže problém tedy vzniká při zobrazování ve standardním módu.
Stalo se to v okamžiku, kdy jsem vyměnil obsahovou část. Původně to byly 2 bloky bez floatu, teď jsem je vyměnil za 3 floatované bloky. Struktura mé stránky a CSS-ko:
<div id="page"> {width:100%;text-align:center;}
<div id="mainBlock"> {width:996px;margin:auto;}
> následují 2 nefloatované bloky pod sebou na plnou šířku, s nimiž nebyly žádné problémy
a pak 3 floatované bloky A, B, C
<div id="mainPageBoxA">
<h1 class="headline">Nadpis 1<span id="obrazkovy_headline"> </span></h1>
<p class="mainPage">
<img src="./images/bullet_triangle.jpg" width="14" height="14" alt="" />
Text Text Text
</p>
</div>
<div id="mainPageBoxB">
<h1 class="headline">Nadpis 2<span id="obrazkovy_headline"> </span></h1>
<p class="mainPage">
<img src="./images/bullet_triangle.jpg" width="14" height="14" alt="" />
Text Text Text
</p>
</div>
<div id="mainPageBoxC">
<h1 class="headline">Nadpis 3<span id="obrazkovy_headline"> </span></h1>
<p class="mainPage">
<img src="./images/bullet_triangle.jpg" width="14" height="14" alt="" />
Text Text Text
</p>
</div>
</div>
<div id="footer"> {clear:both;}
Footer
</div>
</div>
#mainPageBoxA, #mainPageBoxB, #mainPageBoxC {
float:left;
position:relative;
width:331px;
margin-bottom:4px;}
#mainPageBoxB, #mainPageBoxC p {
margin-left:3px;}
p.mainPage {
margin-left:0;
padding:15px 30px 10px 30px;
min-height:164px;
_height:180px;
border:1px solid #1b306d;}
h1 {font-size:1.2em;
text-align:left;
padding-left:30px;}
.headline {position:relative;
overflow:hidden;}
.headline, .headline span {
width:330px;
height:30px;
_height:35px;
padding-top:5px;}
Nevíte čím by to mohlo být ? |
||
| zvěřiňák Profil * |
#2 · Zasláno: 9. 4. 2009, 20:35:16
Dělá to nastavení pevné šířky 996px v "mainBlock". Při rozlišení 800x600, 1024x768 je vodorovný posuvník, při větším rozlišení už není.
|
||
| Zdeněk Košťál Profil |
#3 · Zasláno: 9. 4. 2009, 20:45:27
Mufna
Max doporučené je 970px, ideální 960px. |
||
| Mufna Profil |
#4 · Zasláno: 9. 4. 2009, 22:47:22
Tak jsem upravil CSS:
#mainPageBoxA, #mainPageBoxB, #mainPageBoxC {
float:left;
position:relative;
overflow:hidden;
width:330px; tady jsem chtěl použít jednoduše procenta - takže když mám 3 bloky, tak 33.33%, ale Opera ty boxy udělala menší (což dost dobře nechápu) , ostatní browsery byly OK
margin-bottom:4px;}
a zmizelo to v FF a IE7, jenom Opera pořád protestuje (a navíc mrcha neudělá ty procenta, takže musím width dávat chtě nechtě napevno). |
||
| Mufna Profil |
#5 · Zasláno: 9. 4. 2009, 22:50:20 · Upravil/a: Mufna
zvěřinák
Dělá to nastavení pevné šířky 996px v "mainBlock" S tím v mém případě momentálně bohužel nic dělat nemůžu, takže to musím řešit tak jak to je - pro "width:996px" Možná jsem se nevyjádřil dostatečně jasně. Chápu, že když se započítají lišty atd. některých prohlížečů apod., tak již mohu překročit 1024px a tím pádem se zobrazí posuvník. V mém případě se ale zobrazoval jakoby "navíc", tzn. na to, jak mám nastavený browser a jaké mám rozlišení monitoru se zobrazovat nemusel, ale on se zobrazil, a to proto, že se mi tou vloženou konstrukcí s 3 floatovanými bloky zřejmě nějak natáhl obsahu webu doprava - a vzniklo mi tam nějakých 30-40px bílého místa. I když nechápu proč se ten obsah takto natáhl. A jak jsem napsal, jediný IE6, který dle mého kódu zobrazuje ve quirku, tam to bílý místo neudělal a tím pádem se nezobrazil ani posuvník. |
||
| zvěřiňák Profil * |
#6 · Zasláno: 9. 4. 2009, 23:27:33
Já to zkoušel v PSPadu a i když vymažu ty tři vložené floatované bloky, tak tam pořád vadí ta šířka 996px v "mainBlock".
|
||
| zvěřiňák Profil * |
#7 · Zasláno: 9. 4. 2009, 23:52:45
Když zkusím tohle,
#mainBlock {width:996px;margin:0 -6px 0 -6px;}tak vodorovný posuvník zmizí i v IE při rozlišení 1024x768. |
||
| Chamurappi Profil |
#8 · Zasláno: 10. 4. 2009, 00:08:04
Reaguji na Mufnu:
Máš vynulovaný padding a margin u <body>? Pomohl by odkaz na živou ukázku. Výpisy kódů odrazují, obzvláště, když jsou v nich nezakomentované komentáře, které si případný řešitel musí nejprve ručně odmazat, chce-li problém vidět. |
||
|
Časová prodleva: 4 dny
|
|||
| Mufna Profil |
#9 · Zasláno: 13. 4. 2009, 22:59:27 · Upravil/a: Mufna
všichni
Díky, díky. Už jsem to vyřešil. to Chamurappi Máš vynulovaný padding a margin u <body>? Mám. Ale částečně si uhodil hřebíček na hlavičku. V <body> to mám sice ošetřené, ale bylo to skutečně paddingem, v mém případě tím u H1
h1 {
font-size:1.2em;
text-align:left;
padding-left:30px;}
Zrušil jsem ho a vše je OK. Naštěstí jsem si to zrušení mohl dovolit, jelikož text v <h1> mám pojatý jako skrytý (v klasickém browseru se mi přes něj zobrazuje obrázek). Čistý text tam je jen tehdy, pokud jsou vypnuté styly nebo obrázky. Kdybych tam ten padding chtěl nutně mít, tak ale nevím, co bych s tím jinak dělal. Overflow:hidden pomohlo všude, ale v IE 7 (a asi i IE 8, zatím jsem ho neinstaloval) ne. |
||
|
Časová prodleva: 15 let
|
|||
0