# Hervorhebung mit <em> oder <strong> funktioniert nicht?



## Steve2010 (2. September 2010)

Servus zusammen, 

habe das Problem, dass ich Text im XHTML hervorheben will. Der Code ist laut W3C valide. Aber irgendwie bewirken weder <em> noch <strong> etwas. Ich steh' hier auf dem Schlauch. Hier der Code ... 


```
<!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="de" lang="de">
	
	<head>
	
	<meta name="language" content="german, de, deutsch" />
	<meta http-equiv="Content-Type" content="text	/html;charset=utf-8" />
	
	<link rel="stylesheet" media="screen" href="CSS/layout.css" />
	
	
	<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="CSS/ie6.css" />
	<![endif]-->


	<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="CSS/ie7.css" />
    <![endif]-->

	
	<!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" 
	type="text/javascript">
	</script>
	<![endif]-->
	
	<script type="text/javascript" src="CSS/javahover.js"></script>
	
	<title>
			Visionfood Gewürze und Extrakte
	</title>
	
	
	
	</head>
	

	
		<body>



	<div id="branding">
		<h1><a href="Qualitaet.htm">Visionfood</a></h1>
	</div>
	
	
		<blockquote class="info">
		<p>Gewürze und Extrakte</p>
		</blockquote>
	<!-- Branding Ende -->
	
	

	

	<div id="navi">
				
			<div id="navbar">
			
			<ul>
				<li><a href="index.htm">home</a></li>
			  	<li><a href="/" id="current">qualität</a></li>
			 	<li><a href="Leistungen.htm">leistungen</a></li>
			 	
			 	<li><a href="Produkte.htm">produkte</a>
			 		<ul><!-- öffnet die Klappnavi von Sortiment -->
			 		
			 			<li><a href="Gewuerze.htm">gewürze</a></li>
	               		<li><a href="Extrakte.htm">extrakte</a></li>
	               		<li><a href="Bio-produkte.htm">bio-produkte</a></li>
	               		<li><a href="Sonstige_produkte.htm">sonstige produkte</a></li>
	                        
	            	</ul><!-- schließt die Klappnavi von Sortiment -->
	            </li>
			 	
			 	<li><a href="Kontakt.htm">kontakt</a></li>
			</ul>
			</div><!--Ende Navbar-->	
			
	</div>
	<!--Ende Navi-->	
	

	<div id="content_subpage">

		<h2>Qualität</h2>
			
			<p>Lebensmittel sind Vertrauenssache. Deshalb setzen wir ausschließlich akkreditierte Labore ein. 
			Das gibt Ihnen und Ihren Kunden die größtmögliche Sicherheit in Bezug auf die Qualität der Ware. 
			Sie haben auch die Möglichkeit nahezu alle Produkte in dampfentkeimter Qualität zu beziehen.</p><br /> 
			<p>Profitieren Sie von rund 20 Jahren Erfahrung innerhalb der Gewürzbranche.</p>
			<br /><br />
			<p><strong>
				&gt; ausschließlich akkreditierte Labore<br />
				&gt; nahezu alle Produkte auch dampfentkeimt<br />
				&gt; rund zwanzigjährige Branchenerfahrung<br />
			</strong></p>
		

	</div><!--Ende content-->
		
	<div id="footer">
			<p>
				<a href="AGB.htm">agb</a>
				 - 
				<a href="Impressum.htm">impressum</a>
			</p>
	</div><!--Ende footer-->

	</body>
	
	</html>
```

Und das zugehörige CSS ... 

```
/*importiert norm.css*/

@import url("norm.css");


body {
	position: relative;
	background: url(../images/Background-Verlauf.jpg) repeat-x;
	background-position: 0px 100px;
	margin: 0 auto;
	text-align:center;
	width: 950px;
	top: 5px;
	font-size: 100.01%;
	font-family: Arial, Tahoma, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	}



#branding {
	background: url(../images/VisionfoodLogo3.jpg) no-repeat;
	text-indent:-9999px;
	position: relative;	
	left: 25px;
	top: 15px;
	width: 950px;
	height: 60px;
	}


blockquote.info {
	text-indent: -9999px;
	height:0;
	}



/*--Definiert den Navi Div--*/
#navi {
	border-left: solid 1px #cbdce4;
	border-right: solid 1px #cbdce4;
	position: relative;
	top: 35px;
	width: 948px;
	height: 230px;
	font-family: Arial, Tahoma, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-variant: small-caps;
	font-size: 0.8em;
	letter-spacing:0.1em;
	}


#navbar {
	background: url(../images/Navbar_Balken.png) no-repeat;
	margin: 0;
	padding: 0;
	height: 27px;
	}
	
#navbar li {
	list-style: none;
	float: left;
	}
	
#navbar li a {
	display: block;
	padding: 4px 0px;
	height: 19px;
	width: 189.6px;
	color: #ffffff; 
	text-decoration: none; 
	}


#navbar li a:hover, #navbar li a#current {
	background-color: #e1ffd2;
	color: #2a6e91;
	font-weight: bold;
	font-size: 1.1em;
	}


#navbar li ul {
	display: none;
	width: 10em;
	}



#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	}
	
#navbar li:hover li, #navbar li.hover li {
	float: none;
	} 


	
#navbar li:hover li a, #navbar li.hover li a {
	background-color: #e1ffd2;
	color: #2a6e91;
	height: 19px; 
	border-top: 1px solid #6ea876;
	}

#navbar li li a:hover {
	font-weight: bold;
	font-size: 1.1em;
	}





div#content {
	clear: both; 
	position: relative;
	background: #ffffff;
	border-left: solid 1px #cbdce4;
	border-right: solid 1px #cbdce4;
	border-top: 1px solid #195098;
	text-align: left;
	top: 35px;
	height: 85px;
	color: #195098;
	padding: 25px 20px 20px 20px;
	line-height:1.0em;
	
	}

#content p {
	line-height:1.2em;
	font-weight:100;
	font-size: 0.8em;
	}

#content h2 {
	font-weight:100;
	font-size: 1.2em;
	word-spacing: 0.1em;
	padding: 0px 0px 20px 0px;
	}





#content_main {
	position: relative;
	background: #ffffff;
	border-left: solid 1px #cbdce4;
	border-right: solid 1px #cbdce4;
	top: 35px;
	height: 340px;
	width: 948px;
	border-top: 1px solid #cbdce4;
	text-align: left;
	color: #195098;
	font-size: 0.7em;
	letter-spacing:0.0em;
	word-spacing:0.0em;
	}

#content_main a:link, a:visited, a:active, a:hover {
	color: #195098;
	text-decoration: none;
	}

#qualitaet {
	background: url(../images/Female_ScientistVIX.jpg) no-repeat;
	background-position: 20px 65px;
	position: relative;
	width: 28%;
	float: left;
	height: 300px;
	padding: 25px 20px 23px 20px;
	color: #195098;
	}

#produkte {
	position: relative;
	background: url(../images/Bild_Sortiment_Chili_PepperXI.jpg) no-repeat left top;
	border-left: solid 1px #cbdce4;
	width: 28%;
	float: right;
	height: 300px;
	padding: 25px 20px 23px 20px;
	}

#leistungen {
	background: url(../images/ContainerschiffVII.jpg) no-repeat;
	background-position: 20px 65px;
	border-left: solid 1px #cbdce4;
	position: relative;
	float: left;
	width: 28%;
	height: 300px;
	left: 15px;
	padding: 25px 20px 23px 20px;
	}

#content_main p {
	line-height:1.2em;
	font-weight:100;
	}

#content_main h3 {
	font-weight: bold;
	padding: 0px 0px 200px 0px;
	line-height: 1.0em;
	font-size: 1.3em;
	}



#content_subpage {
	clear: both; 
	position: relative;
	background: #ffffff;
	border-left: solid 1px #cbdce4;
	border-right: solid 1px #cbdce4;
	border-top: 1px solid #195098;
	text-align: left;
	top: 35px;
	height: 250px;
	color: #195098;
	padding: 50px 50px 30px 75px;
	line-height:1.0em;
	}
	
#content_subpage p {
	line-height:1.2em;
	font-weight:100;
	font-size: 0.8em;
	}

#content_subpage h2 {
	font-weight:100;
	font-size: 1.2em;
	word-spacing: 0.1em;
	padding: 0px 0px 20px 0px;
	}


#content_subpage a {
	color: #195098;
	}



#contact {
	position: relative;
	float: left;
	background: #ffffff;
	text-align: left;
	color: #195098;
	line-height:1.0em;
	padding: 50px 50px 30px 0;
	}


#picture {
	position: relative;
	float: right;
	background: #ffffff;
	padding: 50px 162px 30px 0;
	}


div#footer {
	position: relative; 
	clear: both;
	background: url(../images/Navibalken950T.png) no-repeat center;
	top: 26px;
	width: 950px;
	height: 28px;
	color: #ffffff;	
	}



#footer a:link, #footer a:visited, #footer a:active {
	color: #ffffff;	
	text-decoration:none;
	font-variant: small-caps;
	font-size:0.8em;
	letter-spacing: 0.1em;
	padding: 0px 20px 0px 20px;
	}


#footer a:hover, #footer a#current {
	font-weight:bold;
	color: #e1ffd2;
	}
```

Ich wäre euch wirklich dankbar, wenn ihr mir hier weiterhelfen könntet. 

Beste Grüße
Steve


----------



## dreifragezeichen (2. September 2010)

Was heißt hier, die Hervorhebung mit den genannten Elementen zur logischen Auszeichnung (http://de.selfhtml.org/html/text/logisch.htm#elemente) würde nicht funktionieren? 

Das tut sie sehr wohl, wie es hier an den letzten drei Zeilen deutlich zu erkennen ist, die mit <strong> ausgezeichnet sind:




Wenn dir das derzeitige Erscheinungsbild nicht zusagt, mußt du entweder die Formatierung des CSS-Selektors *#content_subpage p* überarbeiten, oder eine weitere Regelmenge für <strong> definieren.


```
#content_subpage p strong { /* gewünschte Formatierung */ }
```


----------



## Steve2010 (2. September 2010)

Hi, 

vielen Dank für deine Antwort. Allerdings bin ich jetzt überrascht. Denn sowohl beim IE, wie auch bei FF und Opera wird es nicht hervorgehoben, sonder hat die gleiche Schriftstärke wie der vorhergehende Text. 

Viele Grüße
Steve


----------



## SpiceLab (2. September 2010)

Funktioniert bei mir auch 

Ist das irgendwo online?


----------



## Steve2010 (2. September 2010)

spicelab hat gesagt.:


> Funktioniert bei mir auch
> 
> Ist das irgendwo online?


 
Hi spicelab, 

habe ich gerade mal hochgeladen: 

http://www.foto-solutions.de/Visionfood/Website2/Qualitaet.htm

Aber auch in unterschiedlichen Browsern bleibt die Schrift gleich. Echt ein Phänomen. 

Viele Grüße
Steve


----------



## SpiceLab (2. September 2010)

Steve2010 hat gesagt.:


> Aber auch in unterschiedlichen Browsern bleibt die Schrift gleich. Echt ein Phänomen.


Überhaupt kein Phänomen, bei deiner angewandten CSS-Formatierung 

Die FF-Erweiterungen Firebug u. Web Developer entblößen solch ein Phänomen noch immer mit wenigen Klicks als ordinären "Fehler im System"  ;-)



			
				norm.css hat gesagt.:
			
		

> ```
> .
> .
> .
> ...



Fazit: Zumindest deine angesprochenen Elemente *em* u. *strong* aus diesem gruppierten Selektor entfernen, damit sie ihr typisches logisches Erscheinungsbild zurückerhalten.


----------



## Steve2010 (2. September 2010)

spicelab hat gesagt.:


> Überhaupt kein Phänomen, bei deiner angewandten CSS-Formatierung
> 
> Die FF-Erweiterungen Web Developer und Firebug entblößen solch ein Phänomen noch immer mit wenigen Klicks als ordinären "Fehler im System"  ;-)
> 
> ...


 

Danke dir spicelab, Problem gelöst!

Und wieder etwas gelernt. Ich hatte die "norm.css" aus dem ansonsten sehr guten Buch "CSS PUR!". Allerdings werde ich die wohl nochmal genau unter die Lupe nehmen. Damit ich hier keine weiteren Überraschungen erlebe. 

Schönen Abend noch. 
Steve


----------

