Autor Zpráva
drobt
Profil
#1 · Zasláno: 12. 1. 2009, 15:14:34 · Upravil/a: Moderátor (editace znemožněna)
Odpovědět Citovat
Zdravím,
jsem začátečník a udělal jsem si základní stránky pomocí css. Klikací tlačítka v menu, která se při najetí myší změní fungují bezproblému ve Firefoxu, ale v IE se obrázky vůbec nezobrazí. Obrázek např. loga se zobrazí správně. Jen ty tlačítka ne. Netušíte proč? 

html, body {
	height: 100%;
}

body {
	text-align: center;
	background-color: #999999;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5;
}
#stranka_obal {
	width: 800px;
	background-color: #fff;
	margin: 0px auto;
}
#hlavicka {
	width: 100%;
	height: 130px;
	background-image: url("horni.jpg")
}

#menu {
	width:200px; 
	height:400px; 
	float:left; 
	background-color: #9FAECD;
}

#menu il tl{
	width:258px; 
	height:177px; 
	float:left; 
	margin: 3px auto; 
	padding: 5px 0px 0px 30px;
}

#menu il tl.home{
	width:140px; 
	height:21px;
}

#menu il tl.home a{
	width:140px; 
	height:21px; 
	display:block; 
	background:url(001.gif) 0 0 no-repeat; 
	text-indent:-20000px;
}

#menu il tl.home a:hover{
	width:140px; 
	height:21px; 
	background:url(002.gif) 0 0 no-repeat;
}

#menu il tl.contact a{
	width:140px; 
	height:21px; 
	display:block; 
	background:url(001.gif) 0 0 no-repeat; 
	text-indent:-20000px;
}
#menu il tl.contact a:hover{
	width:140px; 
	height:21px; 
	background:url(002.gif) 0 0 no-repeat;
}


#text {
	padding: 5px 5px 5px 230px;
	text-align: left;
}

#reset
{
	border:  0px none;
	margin:  0px;
	padding: 0px;
	float: none;
	clear: both;
	width: 0px;
	height: 0px;
	line-height: 0px;
	font-size: 0px;
}


#paticka {
	width: 100%;
	height: 50px;
	padding: 5px 0 0 0;
	background-color: #006699;
}
Joker
Profil
#2 · Zasláno: 12. 1. 2009, 15:52:42
Odpovědět Citovat
drobt
Jakou třídu mají ty obrázky? Jak vypadá kód?
Co jsou prvky IL a TL? O těch jsem neslyšel.
drobt
Profil
#3 · Zasláno: 13. 1. 2009, 09:05:02
Odpovědět Citovat
Zdravím,
přikládám kód. TL by měla být třída obrázků (IL tam nějak nepatřilo).
Mám v menu tři odkazy. První je jen textový a dva jako obrázky. Obrázky se ale v IE nezobrazí.

Předem děkuji za pomoc.



"index.php"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta name="robots" content="all, follow">
<link rel="stylesheet" type="text/css" href="img/pozadi.css">
<title>Pokus</title>

</head>



<body>

<div id="hlavni">
<div id="stranka_obal">
<div>


<div id="hlavicka">
</div>


<div class="obsah_text">


<div id="menu">
<a href="?page=uvod">Úvod</a><br>
<tl class="home"><a href="?page=prvni">První</a></tl>
<tl class="contact"><a href="?page=druha"></a></tl>
</div>



<div id="text">
<?php
$page=$_GET["page"];
$dir="url/";
$uvodni="uvod.php";
if ($page) {
if (file_exists($dir.$page.".php"))
include($dir.$page.".php");
else { include $dir."404.php"; }
}
else {
include ($dir.$uvodni);
}
?>
</div>


<div id="reset">&nbsp;</div>


</div>


<div id="paticka">
</div>


</div>

</div>

</body>

</html>


---------------------------------------

"pozadi.css"

html, body {
height: 100%;
}

body {
text-align: center;
background-color: #999999;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
}
#stranka_obal {
width: 800px;
background-color: #fff;
margin: 0px auto;
}
#hlavicka {
width: 100%;
height: 130px;
background-image: url("horni.jpg")
}

#menu {
width:200px;
height:400px;
float:left;
background-color: #9FAECD;
}

#menu tl{
width:258px;
height:177px;
float:left;
margin: 3px auto;
padding: 5px 0px 0px 30px;
}

#menu tl.home{
width:140px;
height:21px;
}

#menu tl.home a{
width:140px;
height:21px;
display:block;
background:url(001.gif) 0 0 no-repeat;
text-indent:-20000px;
}

#menu tl.home a:hover{
width:140px;
height:21px;
background:url(002.gif) 0 0 no-repeat;
}

#menu tl.contact a{
width:140px;
height:21px;
display:block;
background:url(001.gif) 0 0 no-repeat;
text-indent:-20000px;
}
#menu tl.contact a:hover{
width:140px;
height:21px;
background:url(002.gif) 0 0 no-repeat;
}


#text {
padding: 5px 5px 5px 230px;
text-align: left;
}

#reset
{
border: 0px none;
margin: 0px;
padding: 0px;
float: none;
clear: both;
width: 0px;
height: 0px;
line-height: 0px;
font-size: 0px;
}


#paticka {
width: 100%;
height: 50px;
padding: 5px 0 0 0;
background-color: #006699;
}
Chamurappi
Profil
#4 · Zasláno: 13. 1. 2009, 09:12:41 · Upravil/a: Chamurappi
Odpovědět Citovat
Reaguji na drobta:
Explorer v HTML nedovoluje stylovat neznámé elementy. Použij místo vlastního vynálezu „<tl>“ něco normálního, co zná.
Joker
Profil
#5 · Zasláno: 13. 1. 2009, 09:23:41
Odpovědět Citovat
drobt
přikládám kód. TL by měla být třída obrázků (IL tam nějak nepatřilo).
Jestli to je CSS třída, musí mít na začátku tečku.
#menu tl = prvek <tl> uvnitř prvku s id "menu"
#menu .tl = prvek s třídou "tl" uvnitř prvku s id "menu"

Ovšem pak by zas nedávalo smysl tohle:
#menu tl.home a{
drobt
Profil
#6 · Zasláno: 13. 1. 2009, 11:21:09
Odpovědět Citovat
Díky, použil jsem tam místo <tl> elementy <ul> a <li> a funguje to :)
Časová prodleva: 15 let

Vaše odpověď

Mohlo by se hodit

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

Prosím používejte diakritiku a interpunkci.

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

0