IE7 v H1 nareaguje na color

camo · Príspevok od používateľa **camo** » 24 dec 2011, 21:54

Ja tento týždeň nechápem už asi ničomu. Proste IE7 neberie do úvahy farbu písma ktorú som zadal v css. Skúšal som to aj inline zápisom, ale stále je čierna. Nechápem.
Vie to niekto vysvetliť? Už asi ten počítač dohryziem dneska...

BX · Príspevok od používateľa BX » 24 dec 2011, 22:02

To je pekné, že to nejde. Ďakujeme za oznámenie

Ak chceš pomôcť, pošli ukážky kódov.

camo · Príspevok od používateľa **camo** » 24 dec 2011, 22:14

Mám len zdroják, elbo to neni na nete... Dúfam, že z toho budete múdrejší ako ja

Nech sa páči:

Kód: Vybrať všetko

<style type="text/css">
html, body, div, form, p, img, menu, ul, ol, li, a, h1, h2, h3, table, tr, td{margin:0px; padding:0px; font-family:verdana, tahoma}
html, body {height: 100%;}
body{background:url('./pictures/giankaBG1.jpg') center top;}
#obal{Nborder:1px solid red; margin: 0 auto; min-width:976px; min-height: 100%; height: 100%; position: relative; background:transparent url('./pictures/giankaBG2.png') center top repeat-y;}
body>#obal{height: auto;}/* zrusenie height pre FF a O v predoslom zapise */
/* Opera 9.5+  malý hack  */
*|html[xmlns*=""]  #obal{display: table; height: 100%}
/* end Opera 9.5+  malý hack  */
#vrch{margin:0px auto; display:block}
#header{}
#header #headIMG1{filter:alpha(opacity=100); position:relative; width:942px; height:267px; margin:0px auto;}
#header #headIMG2{filter:alpha(opacity=100)}
#header #headIMG1 h1{position:absolute; bottom:0px; left:0px; width:912px /*+padding*/; padding:11px 15px; color:#552222; font-size:1.5em; background-image:url('./pictures/giankaBGh1.png');}
#header #headIMG1 h1 #h1IE7{color:red}
#headIMG1 #logo{position:absolute; top:25px; left:0px}

#oblucik{display:block; margin:0px auto}

#obsah{Nborder:1px solid red; width:942px; min-height:500px; height:500px; margin:0px auto; padding:0px 0px 7% /* pata */; color:#451212; background:url('./pictures/giankaBG3.jpg') center top repeat-y; }
#obal>#obsah{height: auto;}/* zrusenie height pre FF a O v predoslom zapise */

a{text-decoration:none; color:#451212;}
img{display:inline-block; }
#obsah img{ -moz-box-shadow: -3px 3px 3px #bbb; -webkit-box-shadow: -3px 3px 3px #bbb; box-shadow: -3px 3px 3px #bbb;}
h1, h2{color:#552222;}
h2{background-color:#df9755}
#mainH2{Nborder:1px solid red; margin-left:205px; padding:0px 15px 4px; font-size:1.40em; overflow:visible}
#mainH2 span{position:relative; top:-8px; left:20px; /*font-size:1.2em*/}

#leftSide{Nborder:1px solid red; float:left; width:205px; overflow:hidden}
#leftSide h2{padding:10px 15px; font-size:1.1em; background:#df9755 url('./pictures/giankaBGh2.png') right top repeat-y;}
#leftSide #topH2{/*tj. "Menu"*/Nborder:1px solid red; padding:0px 15px 8px;}

#menu{padding:10px 0px 25px; font-size:0.98em; letter-spacing:1px; font-weight:bold; /*font-family:tahoma*/}
#menu a{display:block; color:#502222 /*#653030*/; text-decoration:none}
#menu ul{Nborder:1px solid red; margin:0px; padding:0px}
#menu li{margin:0px; list-style-type:none}
#menu ul li a{ padding:5px 10px 3px 15px;}
#menu ul li ul li a{padding:5px 10px 3px 30px;}
#menu li a:hover{background-color:#fff0e0}

#content{border:1px solid red; margin-left:205px;}
#content .contentin{border:1px solid green; float:left; padding:20px 30px;} /* exituje koli clearovaniu v .content, lebo clearovalo az za side bar */
#content h2, #content h3, #content h1{clear:both; padding:10px 0px; color:#e09000; background-color:transparent; font-size:1.3em}


#pata{Nborder:1px solid red; position:absolute; bottom:0px; left:0px; padding-top:35px; width:100%;}
#pataBG{display:block; margin:0px auto}
#pataText{Nborder:1px solid green; position:absolute; top:0px; left:50%; margin-left:-461px; width:922px; text-align:right}

.dodatok{font-size:0.7em}
.left{float:left; clear:both; margin:15px 20px 15px 0px;}
.right{float:right; clear:both; margin:15px 0px 15px 20px;}
.clearovac{clear:both}

</style>

<!-- [if gt IE 6]>
<style type="text/css">
#obal{background:transparent url('./pictures/giankaBG2.png') 50% top repeat-y;}
</style>
<![endif] -->

<?php

echo '<script type="text/javascript">
var banerArr=['.$banery.'];
</script>
';

?>

<script src="http://localhost/cukrarengianka.sk/frontend/EventFotogBaner.js"></script>
<script type="text/javascript">
function onloadka(){
          banerStart();
		//onloadGalery();
}
</script>
</head>
<body id="bodyId" onload="onloadka();">
<div id="obal">
     <img src="./pictures/giankaVrch.jpg" id="vrch">
	<div id="header">
		<div id="headIMG1">
			<img src="./pictures/giankaBaner.jpg" id="headIMG2">

   			<h1 id="mainH1" color="#552222" style="color:#552222;">
			<span id="h1IE7">
				<?php echo $h1; ?>
			</span>
			</h1>
               <img src="./pictures/giankaLogo.png" id="logo">

		</div>
	</div><!-- end header -->

Kód: Vybrať všetko

<style type="text/css">
html, body, div, form, p, img, menu, ul, ol, li, a, h1, h2, h3, table, tr, td{margin:0px; padding:0px; font-family:verdana, tahoma}
html, body {height: 100%;}
body{background:url('./pictures/giankaBG1.jpg') center top;}
#obal{Nborder:1px solid red; margin: 0 auto; min-width:976px; min-height: 100%; height: 100%; position: relative; background:transparent url('./pictures/giankaBG2.png') center top repeat-y;}
body>#obal{height: auto;}/* zrusenie height pre FF a O v predoslom zapise */
/* Opera 9.5+  malý hack  */
*|html[xmlns*=""]  #obal{display: table; height: 100%}
/* end Opera 9.5+  malý hack  */
#vrch{margin:0px auto; display:block}
#header{}
#header #headIMG1{filter:alpha(opacity=100); position:relative; width:942px; height:267px; margin:0px auto;}
#header #headIMG2{filter:alpha(opacity=100)}
#header #headIMG1 h1{position:absolute; bottom:0px; left:0px; width:912px /*+padding*/; padding:11px 15px; color:#552222; font-size:1.5em; background-image:url('./pictures/giankaBGh1.png');}
#header #headIMG1 h1 #h1IE7{color:red}
#headIMG1 #logo{position:absolute; top:25px; left:0px}

#oblucik{display:block; margin:0px auto}

#obsah{Nborder:1px solid red; width:942px; min-height:500px; height:500px; margin:0px auto; padding:0px 0px 7% /* pata */; color:#451212; background:url('./pictures/giankaBG3.jpg') center top repeat-y; }
#obal>#obsah{height: auto;}/* zrusenie height pre FF a O v predoslom zapise */

a{text-decoration:none; color:#451212;}
img{display:inline-block; }
#obsah img{ -moz-box-shadow: -3px 3px 3px #bbb; -webkit-box-shadow: -3px 3px 3px #bbb; box-shadow: -3px 3px 3px #bbb;}
[b][color=#FF0000]h1, h2{color:#552222;}[/color][/b] [b]<- chybu máš tu, toto keď vymažeš, začne si všímať nadpisy, ale máš tam hrozný bordel v štruktúre, odporúčam Ti spraviť si extra h1ky globálne, alebo len ako classy, určite ich nevnoruj a nedeď [inherit], v tom sa stratíš.[/b]
h2{background-color:#df9755}
#mainH2{Nborder:1px solid red; margin-left:205px; padding:0px 15px 4px; font-size:1.40em; overflow:visible}
#mainH2 span{position:relative; top:-8px; left:20px; /*font-size:1.2em*/}

#leftSide{Nborder:1px solid red; float:left; width:205px; overflow:hidden}
#leftSide h2{padding:10px 15px; font-size:1.1em; background:#df9755 url('./pictures/giankaBGh2.png') right top repeat-y;}
#leftSide #topH2{/*tj. "Menu"*/Nborder:1px solid red; padding:0px 15px 8px;}

#menu{padding:10px 0px 25px; font-size:0.98em; letter-spacing:1px; font-weight:bold; /*font-family:tahoma*/}
#menu a{display:block; color:#502222 /*#653030*/; text-decoration:none}
#menu ul{Nborder:1px solid red; margin:0px; padding:0px}
#menu li{margin:0px; list-style-type:none}
#menu ul li a{ padding:5px 10px 3px 15px;}
#menu ul li ul li a{padding:5px 10px 3px 30px;}
#menu li a:hover{background-color:#fff0e0}

#content{border:1px solid red; margin-left:205px;}
#content .contentin{border:1px solid green; float:left; padding:20px 30px;} /* exituje koli clearovaniu v .content, lebo clearovalo az za side bar */
#content h2, #content h3, #content h1{clear:both; padding:10px 0px; color:#e09000; background-color:transparent; font-size:1.3em}


#pata{Nborder:1px solid red; position:absolute; bottom:0px; left:0px; padding-top:35px; width:100%;}
#pataBG{display:block; margin:0px auto}
#pataText{Nborder:1px solid green; position:absolute; top:0px; left:50%; margin-left:-461px; width:922px; text-align:right}

.dodatok{font-size:0.7em}
.left{float:left; clear:both; margin:15px 20px 15px 0px;}
.right{float:right; clear:both; margin:15px 0px 15px 20px;}
.clearovac{clear:both}

</style>

<!-- [if gt IE 6]>
<style type="text/css">
#obal{background:transparent url('./pictures/giankaBG2.png') 50% top repeat-y;}
</style>
<![endif] -->

<?php

echo '<script type="text/javascript">
var banerArr=['.$banery.'];
</script>
';

?>

<script src="http://localhost/cukrarengianka.sk/frontend/EventFotogBaner.js"></script>
<script type="text/javascript">
function onloadka(){
          banerStart();
		//onloadGalery();
}
</script>
</head>
<body id="bodyId" onload="onloadka();">
<div id="obal">
     <img src="./pictures/giankaVrch.jpg" id="vrch">
	<div id="header">
		<div id="headIMG1">
			<img src="./pictures/giankaBaner.jpg" id="headIMG2">

   			<h1 id="mainH1" color="#552222" style="color:#552222;">
			<span id="h1IE7">
				<?php echo $h1; ?>
			</span>
			</h1>
               <img src="./pictures/giankaLogo.png" id="logo">

		</div>
	</div><!-- end header -->

camo · Príspevok od používateľa **camo** » 24 dec 2011, 22:37

Skúšal som to vymazať, ale nereaguje.
A prečo mu ten zápis má podľa teba vadiť? Veď na ňom nič nieje. Všetky ostatné vlastnosti pre h1 normálne akceptuje. Nechápem

Skúšal som mu už pridať id, dať to do spanu, inline, už fakt neviem čo to môže byť?

Mne to fungovalo v iE7 keď som to vymazal, spravil som si nový identifikátor h1 priamo na prvej úrovni v style sheete [nie ako podradený atribút] a zmenil som farbu. Každopádne, keď vymažeš všetky h1 z toho stylesheetu, a zadefinuješ len jedno globálne h1 tak si v suchu. Od tiaľ si porob ostatné, hm?

camo · Príspevok od používateľa **camo** » 24 dec 2011, 22:44

Môžeš mi toto prosím ťa preložiť

:

spravil som si nový identifikátor h1 priamo na prvej úrovni v style sheete [nie ako podradený atribút]

ten bordel si nevšímaj, v msie 7 a 8 to funguje tak ako chceš, snáď to pochopíš.

<style type="text/css">
h1 {color: #960} <- h1 definovaný na prvej úrovni [globálne]

html, body, div, form, p, img, menu, ul, ol, li, a, h1, h2, h3, table, tr, td{margin:0px; padding:0px; font-family:verdana, tahoma} <- h1 definovaný "inline" s viacerými atribútmi

#content h2, #content h3, #content h1{clear:both; padding:10px 0px; color:#e09000; background-color:transparent; font-size:1.3em} <- h1 definovaný len pre niektoré identifikátory

Máš vnorenú štruktúru, nadradený identifikátor je podradený tomu čo je v ňom, preto existuje funkcia inherit, ktorá dovoľuje dediť v rámci stylesheetu, alebo v rámci html kódu a teda jeho vlastnej štruktúry.

<div id="level-1"><div id="level-2"></div></div> <- level-2 dokáže inheritovať [dediť] atribúty level-u 1, ak je zadaný atribút povoľujúci dedenie nadradených identifikátorov.

Už chápeš?

camo · Príspevok od používateľa **camo** » 25 dec 2011, 9:01

Ja som teda vymazal tie h1 a vybral som to na prvú úroveň takto(ešte som nevidel tú prílohu...)

Kód: Vybrať všetko

<style type="text/css">
html, body, div, form, p, img, menu, ul, ol, li, a, h2, h3, table, tr, td{margin:0px; padding:0px; font-family:verdana, tahoma}
html, body {height: 100%;}
body{background:url('./pictures/giankaBG1.jpg') center top;}
#obal{Nborder:1px solid red; margin: 0 auto; min-width:976px; min-height: 100%; height: 100%; position: relative; background:transparent url('./pictures/giankaBG2.png') center top repeat-y;}
body>#obal{height: auto;}/* zrusenie height pre FF a O v predoslom zapise */
/* Opera 9.5+  malý hack  */
*|html[xmlns*=""]  #obal{display: table; height: 100%}
/* end Opera 9.5+  malý hack  */
#vrch{margin:0px auto; display:block}
#header{}
#header #headIMG1{filter:alpha(opacity=100); position:relative; width:942px; height:267px; margin:0px auto;}
#header #headIMG2{filter:alpha(opacity=100)}
h1{position:absolute; bottom:0px; left:0px; width:912px /*+padding*/; margin:0px; padding:11px 15px; color:#552222; font-size:1.5em; background-image:url('./pictures/giankaBGh1.png');}
#headIMG1 #logo{position:absolute; top:25px; left:0px}

#oblucik{display:block; margin:0px auto}

#obsah{Nborder:1px solid red; width:942px; min-height:500px; height:500px; margin:0px auto; padding:0px 0px 7% /* pata */; color:#451212; background:url('./pictures/giankaBG3.jpg') center top repeat-y; }
#obal>#obsah{height: auto;}/* zrusenie height pre FF a O v predoslom zapise */

a{text-decoration:none; color:#451212;}
img{display:inline-block; }
#obsah img{ -moz-box-shadow: -3px 3px 3px #bbb; -webkit-box-shadow: -3px 3px 3px #bbb; box-shadow: -3px 3px 3px #bbb;}

.test{color:red}

/*h2{color:#552222;}*/
h2{background-color:#df9755}
#mainH2{Nborder:1px solid red; margin-left:205px; padding:0px 15px 4px; font-size:1.40em; overflow:visible}
#mainH2 span{position:relative; top:-8px; left:20px; /*font-size:1.2em*/}

#leftSide{Nborder:1px solid red; float:left; width:205px; overflow:hidden}
#leftSide h2{padding:10px 15px; font-size:1.1em; background:#df9755 url('./pictures/giankaBGh2.png') right top repeat-y;}
#leftSide #topH2{/*tj. "Menu"*/Nborder:1px solid red; padding:0px 15px 8px;}

#menu{padding:10px 0px 25px; font-size:0.98em; letter-spacing:1px; font-weight:bold; /*font-family:tahoma*/}
#menu a{display:block; color:#502222 /*#653030*/; text-decoration:none}
#menu ul{Nborder:1px solid red; margin:0px; padding:0px}
#menu li{margin:0px; list-style-type:none}
#menu ul li a{ padding:5px 10px 3px 15px;}
#menu ul li ul li a{padding:5px 10px 3px 30px;}
#menu li a:hover{background-color:#fff0e0}

#content{border:1px solid red; margin-left:205px;}
#content .contentin{border:1px solid green; float:left; padding:20px 30px;} /* exituje koli clearovaniu v .content, lebo clearovalo az za side bar */
#content h2, #content h3{clear:both; padding:10px 0px; color:#e09000; background-color:transparent; font-size:1.3em}


#pata{Nborder:1px solid red; position:absolute; bottom:0px; left:0px; padding-top:35px; width:100%;}
#pataBG{display:block; margin:0px auto}
#pataText{Nborder:1px solid green; position:absolute; top:0px; left:50%; margin-left:-461px; width:922px; text-align:right}

.dodatok{font-size:0.7em}
.left{float:left; clear:both; margin:15px 20px 15px 0px;}
.right{float:right; clear:both; margin:15px 0px 15px 20px;}
.clearovac{clear:both}

</style>

//autoeditácia príspevku (24 Dec 2011, 23:29)
No ak h1 nieje vnorený v ničom, tak to má tú farbu akú som zadal. Ale ja ho musím mať vnorený, lebo inak nedosiahnem taký vzhĺad aký potrebujem.
A ak teda color je atribút ktorý sa dedí/nededí, tak prečo nefunguje inline zípis( to je: <h1 style="color:red">). Dedenie je pekna vec, ale inline má mať prednosť pre dedením, pretože je špecifickejší než globálny identifkátor.
To je to čo nechápem a čo nefunguje.

//autoeditácia príspevku (25 Dec 2011, 0:00)
Prosím ťa, ak máš čas a chuť, tak tu je celý súbor a ukáž mi prosím ťa ako to má byť. Je tam teraz pridaná class-rd, id-mainH1, div-inline red. To asi odstrániš.
Napadá ma ešte, ale to sa mi moc nechce, že by som celá ten hedader dal do h1

Čo myslíte?

//autoeditácia príspevku (25 Dec 2011, 9:01)
Môžte sa na to pozrieť tu: http://camo.tym.sk/fora/gianka/TEST2.html

//autoeditácia príspevku (25 Dec 2011, 10:04)
Tak sa to nakoniec vyriešilo. Problém bol v deklarácii filter(alpha:opacity=100). Tu mi jedna dobrá duša poradila: http://diskuse.jakpsatweb.cz/?action=vt ... =133512#10
To sa dá našťastie prepísať inak. Ale zaujímalo by ma, či to uplinkove riešenie naozaj funguje...
Ďakujem za pomoc!

IE7 v H1 nareaguje na color

IE7 v H1 nareaguje na color

Re: IE7 v H1 nareaguje na color

Re: IE7 v H1 nareaguje na color

Re: IE7 v H1 nareaguje na color

Re: IE7 v H1 nareaguje na color

Re: IE7 v H1 nareaguje na color

Re: IE7 v H1 nareaguje na color

Re: IE7 v H1 nareaguje na color

Re: IE7 v H1 nareaguje na color