Autor Zpráva
hellboy
Profil *
#1 · Zasláno: 15. 2. 2008, 20:50:00
Odpovědět Citovat
Mam problem, ze se mi v IE6 zobrazi mezera mezi divy, tam kde ji nechci(je to pod logem) Kdyz mam pouze obrazek na pozadi, je vsechno v poradku, ale kdyz pridam obrazek jeste normalne do HTML, tak se tam vytvori ta mezera. Muzete to sledovat tady: http://mattes.undernet.cz/1/2/

CSS:
* {
margin: 0;
padding: 0;
border: 0;
}

body, html {
background-color: #0A4C12;
font-family: "verdana";
}

body, html a {
text-decoration: none;
}

.wrapping {
width: 747px;
margin: 20px auto 0 auto;
}

.shadow_left {
height: 547px;
width: 9px;
background: url('shadow_left_2.png') repeat-y;
float: left;
}

.logo {
width: 254px;
height: 195px;
background: url('logo.png') no-repeat;
float: left;
}

.logo2 {
width: 493px;
height: 195px;
background: url('logo2.png') no-repeat;
float: left;
}

.logo img {
margin: 0;
padding: 0;
border: 0;
}

.logo2 img {
margin: 0;
padding: 0;
border: 0;
}

.logo2 h2{
color: white;
font-family: "Tahoma";
font-size: 14px;
margin-top: 170px;
margin-left: 10px;
}

.menu {
width: 252px;
height: 145px;
float: left;
}

.menu span {
position: relative;
top: 7px;
margin-left: 30px;
font-size: 15px;
color: black;
}

.menu_item_1 a {
width: 252px;
height: 29px;
background: url('menu_item_1.png') no-repeat;
float: left;
}

.menu_item_1 a:hover {
background-position: -252px 0;
}

.menu_item_2 a {
width: 252px;
height: 29px;
background: url('menu_item_2.png') no-repeat;
float: left;
}

.menu_item_2 a:hover {
background-position: -252px 0;
}

.menu_item_3 a {
width: 252px;
height: 29px;
background: url('menu_item_3.png') no-repeat;
float: left;
}

.menu_item_3 a:hover {
background-position: -252px 0;
}

.menu_item_4 a {
width: 252px;
height: 29px;
background: url('menu_item_4.png') no-repeat;
float: left;
}

.menu_item_4 a:hover {
background-position: -252px 0;
}

.menu_item_5 a {
width: 252px;
height: 29px;
background: url('menu_item_5.png') no-repeat;
float: left;
}

.menu_item_5 a:hover {
background-position: -252px 0;
}

.wrapping_2 {
width: 252px;
height: 547px;
float: left;
background-color: white;
}

.news {
width: 252px;
height: 402px;
float: left;
background: url('news.png') no-repeat;
background-color: white;
}

.first_new {
height: 86px;
padding: 110px 2em 0 1em;
float: left;
}

.second_new {
height: 63px;
padding: 3px 2em 0 1em;
float: left;
}

.date {
padding: 0 0 0 1.5em;
letter-spacing: 1px;
font-size: 16px;
}

.new {
padding: 5px 2em 0 0;
font-size: 13px;
}

.main_content {
width: 477px;
min-height: 547px;
_height: 547px;
float: left;
background: url('main_content_background.png') repeat-x #FFFFFF;
font-size: 15px;
}

.main_content p {
padding: 0 25px 2em 17px;
clear: left;
text-align: justify;
letter-spacing: 0.4px;
line-height: 18px;
font-size: 15px;
}

.main_content a {
color: green;
text-decoration: underline;
}

.main_content h2 {
color:#108421;
font-size: 17px;
padding: 1em 0 0 15px;
float: left;
}

.wrapping_3 {
width: 747px;
background: url('wrapping_3_background.png') repeat-y;
}

.shadow_right_2 {
width: 9px;
height: 532px;
float: left;
background: url('shadow_right_2.png') no-repeat;
}

.footer {
width: 747px;
height: 38px;
float: left;
background: url('footer.png') no-repeat;
}

.footerpa {
font-size: 13px;
float: right;
padding: 5px 32px 0 0;
}

.footer p {
color: black;
}

.footer a {
color: green;
text-decoration: underline;
}

hr.cleaner {
clear:both;
height:1px;
margin: -1px 0 0 0; padding:0;
border:none;
visibility: hidden;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<meta name="description" content="Place your page description here." />
<meta name="keywords" content="put,your,key words,phrases,here" />
<title>
XXBXX
</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="wrapping">
<div class="logo"><a href="#"><img src="logo.png" title="" alt="" /></a></div>
<div class="logo2">
<a href="#"><img src="logo2.png" title="" alt="" />
</a>
</div>
<div class="wrapping_3">
<div class="shadow_left"></div>
<div class="wrapping_2">
<div class="menu">
<div class="menu_item_1">
<a href="#"><span>Police</span></a>
</div>
<div class="menu_item_2">
<a href="#"><span>Police</span></a>
</div>
<div class="menu_item_3">
<a href="#"><span>Police</span></a>
</div>
<div class="menu_item_4">
<a href="#"><span>Police</span></a>
</div>
<div class="menu_item_5">
<a href="#"><span>Police</span></a>
</div>
</div>
<div class="news"><div class="first_new"><p class="date">12.2.2008</p>
<p class="new">Slavnostně spuštěn nový web.</p>
</div>
<div class="second_new">
<p class="date">22.12.2007</p>
<p class="new">Vytvořen nový design webu.</p>
</div>
</div>
</div>
<div class="main_content"><h2>Nadpis</h2><p>Lorem ipsum dolor sit amet consectetuer vel pellentesque pellentesque tellus et. Vestibulum tellus Nulla sem nulla mauris id justo Nulla nascetur neque. Nec Aenean ipsum Sed nunc fringilla ac hendrerit ut massa ligula. Faucibus Pellentesque non ipsum leo id suscipit Sed urna Nullam congue. In orci mi tellus Curabitur rhoncus quis consectetuer et.

Ipsum Vestibulum elit tortor parturient Quisque et Phasellus pede Vestibulum consectetuer. Rhoncus sit fringilla ante sem a Nunc In pede libero eget. Dolor odio Lorem facilisi leo orci eget Phasellus consectetuer neque interdum. Urna non velit pede id In dui Maecenas mauris natoque tincidunt. Ut justo id tellus vel amet.

Eleifend neque eget condimentum id orci consectetuer vel neque sem tincidunt. Orci vel laoreet Curabitur sed Vestibulum porta dignissim vitae ut odio. Sit id sagittis est wisi Ut convallis nunc porttitor pulvinar pulvinar. Tincidunt sem tincidunt sagittis tincidunt at Curabitur mollis hendrerit pretium nulla. Felis dignissim nec suscipit ligula turpis tellus et Morbi diam lacus. Tempor dui parturient id a nibh semper leo.

Aliquet congue tellus non Phasellus Cum Phasellus quis Integer Nullam justo. Tortor Integer Ut sagittis mauris at montes Phasellus orci at tincidunt. Quis orci nisl risus Aenean sed Aenean consequat sed malesuada nec. At Curabitur tristique tortor magna netus ipsum adipiscing dui Phasellus orci. Et ac quis leo sem Nam risus Curabitur ac ac odio. Ac odio urna fames Vestibulum fringilla Phasellus velit wisi ipsum Sed.
</p></div>
<div class="shadow_right_2"></div>
<hr class="cleaner" />
<div class="footer"><div class="footerpa"><p><a href="#">ABABABC</a> 2008, správce <a href="#">AXAXAXX</a></p></div></div>
</div>
</div>
</body>
</html>
Trejpa
Profil
#2 · Zasláno: 15. 2. 2008, 21:13:54
Odpovědět Citovat
hellboy
A je to tu zase. Klíčová slova: mezera pod obrázkem v IE. Příště hledej:
http://diskuse.jakpsatweb.cz/index.php?action=vthread&topic=66436&foru m=4&page=-1

<img ... align=middle> nebo
<img ... style="vertical-align: middle;">
Davex
Profil
#3 · Zasláno: 15. 2. 2008, 21:15:08 · Upravil/a: Davex
Odpovědět Citovat
hellboy
Jelikož mají obrázky v hlavičce definovány rozměry, tak jim dej display: block.
hellboy
Profil *
#4 · Zasláno: 16. 2. 2008, 08:05:36
Odpovědět Citovat
Dekuju Vam. :-*
Časová prodleva: 3 měsíce
Dranel
Profil
#5 · Zasláno: 8. 5. 2008, 12:42:46
Odpovědět Citovat
Trejpa
Nejlepší řešení je tedy přidat si img {vertical-align: middle;} do CSS resetu?
Trejpa
Profil
#6 · Zasláno: 8. 5. 2008, 23:26:38
Odpovědět Citovat
Dranel
Ano. Jak jsi napsal, toto řešení lze s úspěchem přidat do základního nastavení všech obrázků, protože i malí smajlíci v textu vypadají lépe ve stejné výšce s textem (se stejným svislým středem). Velké obrázky se přímo na řádek s textem obvykle stejně nedávají (když už, tak se floatují na kraj). V převážné většině případů je toto řešení přínosné, nebo alespoň neškodné.

Výhody oproti nastavení obrázkům display: block; jsou zřejmé: není nutno znát a zadávat rozměry obrázku (obrázků) a ty se i nadále chovají jako obrázky, takže je lze přirozeně skládat vedle sebe bez floatu i se zarovnáním na vodorovný střed. Další výhodou je to, že se to nadefinuje jednou pro všechny obrázky a nemusíš si lámat hlavu, který obrázek má být blokový a který normální.

V probíraných dotazech (tj. se samotnými obrázky) je toto řešení použitelné téměř vždy. Problém pochopitelně nastane, je-li obrázek nižší, než je výška řádku (obvykle pod cca 15 px). Tady začne řádek (rozuměj nechtěná mezera) vylézat shora i zdola. Protože takové obrázky, třeba v menu, bývají obvykle obaleny nějakým blokem (není problém nějaký přidat), je řešení nasnadě: snížit tomuto bloku (protože neobsahuje text) velikost písma, respektive řádkování.
Časová prodleva: 16 let

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0