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

S

Steve2010

Grünschnabel
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 ...

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="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 ...
Code: 
/*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
 
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:

strong.png

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.

CSS: 
#content_subpage p strong { /* gewünschte Formatierung */ }
 
Zuletzt bearbeitet:
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
 
Steve2010 hat gesagt.:
Aber auch in unterschiedlichen Browsern bleibt die Schrift gleich. Echt ein Phänomen.
Zum Vergrößern anklicken....
Überhaupt kein Phänomen, bei deiner angewandten CSS-Formatierung :D

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.:
CSS: 
.
.
.

/*normalisiert font-style und font-weight auf normal*/


address, caption, cite, code, dfn, em, strong, th, var
{
font-style:normal; /* im Falle von <em> wäre "italic" anstelle "normal" gewünscht */
font-weight: normal; /* im Falle von <strong> wäre "bold" anstelle "normal" gewünscht */
}
Zum Vergrößern anklicken....

Fazit: Zumindest deine angesprochenen Elemente em u. strong aus diesem gruppierten Selektor entfernen, damit sie ihr typisches logisches Erscheinungsbild zurückerhalten.
 
Zuletzt bearbeitet:
spicelab hat gesagt.:
Überhaupt kein Phänomen, bei deiner angewandten CSS-Formatierung :D

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



Fazit: Zumindest deine angesprochenen Elemente em u. strong aus diesem gruppierten Selektor entfernen, damit sie ihr typisches logisches Erscheinungsbild zurückerhalten.
Zum Vergrößern anklicken....


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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück