• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seite in Safari & Firefox Top - im IE ein Flop :)

L

Lisa

Neues Mitglied
Hallo Leute,
ich habe ne Seite fast fertig gestellt, die sieht im Safari und Firefox gut aus.. aber der IE erkennt die Schrift "Trebuchet MS" und die Schrift im Menü gar nicht :/

Habe zum Beispiel eingegeben das die Headlines 50 Punkt gross sein sollen und die werden nicht richtig interpretiert....

Kennt jemand abhilfe? :*

Hier der Code von den 2 Css Dateien:

main.css

Code: 
/* 
  möp
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  


*/
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }

	
/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased; }

 
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

a, a:active, a:visited { color:#607890; }
a:hover { color:#036; }


ul { margin-left:30px; }
ol { margin-left:30px; list-style-type: decimal; }

small { font-size:85%; }
strong, th { font-weight: bold; }

td, td img { vertical-align:top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { 
  padding: 15px; 
  
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }


/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301 
   Also: hot pink. */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; } 

/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FF5E99; } 


/* always force a scrollbar in non-IE */
html { overflow-x: hidden; }

/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }
 
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }


	span.reference{
				font-family:Arial;
				position:fixed;
				top:10px;
				padding-right:10px;
				font-size:10px;
			}
			span.reference a{
				color:#fff;
				text-transform:uppercase;
				text-decoration:none;
				text-shadow:1px 1px 1px #000;
				margin-left:20px;
			}
			span.reference a:hover{
				color:#ddd;
			}
			
	span.menueunten{
				font-family:Arial;
				font-size:10px;
			}
			span.menueunten a{
				color:#fff;
				text-transform:uppercase;
				text-decoration:none;
				text-shadow:1px 1px 1px #000;
				margin-left:20px;
			}
			span.menueunten a:hover{
				color:#ddd;
			}




#top_strip{
	height:4px;
	background:#9ca34e;
	position:fixed;
	width:100%;
	top:0;
	display:block;
	z-index: 100000;
	}
	
#top_strip:after { content: "."; }


#containeralles{
  position: absolute;
  left: 50%;
  width: 1920x;
  height: 11500px;
  margin: 0 0 0 -960px; 
}

	
#container1{
	margin:0 auto;
	width:1920px;
	height:1278px;
	background-image:url(../images/bg_01.jpg);
	background-repeat:no-repeat;
	}
	
#container2{
	margin:0 auto;
	width:1920px;
	height:1269px;
	background-image:url(../images/bg_02.jpg);
	background-repeat:no-repeat;
	}
#container3{
	margin:0 auto;
	width:1920px;
	height:1267px;
	background-image:url(../images/bg_03.jpg);
	background-repeat:no-repeat;
	}
	
#container4{
	margin:0 auto;
	width:1920px;
	height:1278px;
	background-image:url(../images/bg_04.jpg);
	background-repeat:no-repeat;
	}
#container5{
	margin:0 auto;
	width:1920px;
	height:1271px;
	background-image:url(../images/bg_05.jpg);
	background-repeat:no-repeat;
	}
	
#container6{
	margin:0 auto;
	width:1920px;
	height:1278px;
	background-image:url(../images/bg_06.jpg);
	background-repeat:no-repeat;
	}
#container7{
	margin:0 auto;
	width:1920px;
	height:1261px;
	background-image:url(../images/bg_07.jpg);
	background-repeat:no-repeat;
	}
	
#container8{
	margin:0 auto;
	width:1920px;
	height:1278px;
	background-image:url(../images/bg_08.jpg);
	background-repeat:no-repeat;
	}
#container9{
	margin:0 auto;
	width:1920px;
	height:1320px;
	background-image:url(../images/bg_09.jpg);
	background-repeat:no-repeat;
	}
	


#container{
	margin:0 auto;
	width:960px;
	}
	
#container_werbung{
	margin:0 auto;
	width:960px;
	}
	
#container_onair{
	margin:0 auto;
	width:960px;
	}
	
#container_web{
	margin:0 auto;
	width:960px;
	}
	
#container_print{
	margin:0 auto;
	width:960px;
	}
	
#container_kontakt{
	margin:0 auto;
	width:960px;
	}
	
#container_philosophie{
	margin:0 auto;
	width:960px;
	}
	
#container_kunden{
	margin:0 auto;
	width:960px;
	}
	
#container_impressum{
	margin:0 auto;
	width:960px;
	}
#section_header{
	float:left;
	width:10%;
	margin: 66px 0 0 33px;
	position:fixed;
	}




footer{width:100%;background:#9ca34e;clear:both;position:fixed;bottom:0;}
#footer_centered{width:960px;margin:0px auto; color:#fff;font-family:Arial;font-size:10pt;text-transform:uppercase;text-decoration:none;text-shadow:1px 1px 1px #000;}
#footer_centered h3{font-weight:bold;float:left;padding:10px;}
#footer_centered p{font-weight:normal;float:left;padding:10px; margin:0 0 0 35px; width:750px;}
#footer_centered p li{list-style:none;}
#footer_centered p a{text-decoration:underline; color:#fff}
#footer_centered p a{text-decoration:none;}
.content_body {padding: 0; width:590px; margin-top: -0px; }
.item {margin-bottom: 600px; padding-top: 0px; clear: both;}

#menue_unten {
	height: 20px;
	width: 310px;
	position: inherit;
	padding-top:340px;
	padding-left:390px;
}


content.css

Code: 
@charset "UTF-8";
#c_home {
	position: inherit;
	height: 85px;
	width: 465px;
	padding-top:162px;
	padding-left:170px;

}

#c_werbung {
	position: inherit;
	height: 100px;
	width: 490px;
	padding-top:240px;
	padding-left:650px;

}

#c_onair {
	position: inherit;
	height: 100px;
	width: 490px;
	padding-top:240px;
	padding-left:170px;

}

#c_web {
	position: inherit;
	height: 100px;
	width: 490px;
	padding-top:380px;
	padding-left:170px;

}

#c_print {
	position: inherit;
	height: 100px;
	width: 540px;
	padding-top:320px;
	padding-left:170px;

}

#c_kontakt {
	position: inherit;
	height: 100px;
	width: 630px;
	padding-top:280px;
	padding-left:200px;

}

#c_philosophie {
	position: inherit;
	height: 100px;
	width: 490px;
	padding-top:380px;
	padding-left:170px;

}

#c_kunden {
	position: inherit;
	height: 100px;
	width: 490px;
	padding-top:380px;
	padding-left:170px;

}

#c_impressum {
	position: inherit;
	height: 100px;
	width: 540px;
	padding-top:550px;
	padding-left:170px;

}

h6 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal; }

h7 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 47px;
	font-style: normal; }
	
h8 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 37px;
	font-style: normal; }
	
h9 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 51px;
	font-style: normal; }
	
h10 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 21px;
	font-style: normal; }
h11 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 29px;
	font-style: normal; }
	
h12 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 35px;
	font-style: normal; }
h13 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 59px;
	font-style: normal; }
h14 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 41px;
	font-style: normal; }
	
h15 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 23px;
	font-style: normal; }
 
1. Frage, weil du von einem IE sprichst: Quirksmodus?
2. Schau mal in die Fehlerkonsole, du hast noch eine Reihe Fehler im CSS.
 
Hi...
oh ja.. du hast recht mit der Fehlerkonsole.. ich mach mich direkt an die Arbeit.

Ähm Quirksmodus ? :)
 
Ich habe ziemlich oft die Fehlermeldung:

Fehler: $ is not defined
Quelldatei: file:///!2011/test/index%20Kopie%204.html#container4
Zeile: 24

IN Zeile 24 Steht folgendes:

$(document).ready(function() {


Hier der ganze Code... ich weiss nicht was gemeint ist... ? :/ Weiss jemand Rat?


<script type="text/javascript">

$(document).ready(function() {
// Alle internen Links auswählen
$('a[href*=#]').bind("click", function(event) {
// Standard Verhalten unterdrücken
event.preventDefault();
// Linkziel in Variable schreiben
var ziel = $(this).attr("href");
//Scrollen der Seite animieren, body benötigt für Safari
$('html,body').animate({
//Zum Ziel scrollen (Variable)
scrollTop: $(ziel).offset().top
// Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
}, 1500 , function (){location.hash = ziel;});
});
return false;
});

</script>
 
Zumindest weiss ich jetz was der Quirks Modus ist... aber warum sollte ich was vorgaukeln von ner älteren Browser Version?

Funktioniert das was ich vorhabe mit den älteren Versionen besser?
:shock:


Was heisst ich binde jquery nicht richtig ein?
Ich glaube das funktioniert doch ... oder? :/
Ohje verzweiflung... :)
 
Lisa schrieb:
Zumindest weiss ich jetz was der Quirks Modus ist... aber warum sollte ich was vorgaukeln von ner älteren Browser Version?

Funktioniert das was ich vorhabe mit den älteren Versionen besser?
Zum Vergrößern anklicken....
Keine Ahnung. Du musst aber Wissen in welchem Modus der IE die Seite anzeigt, dazu müßte man den HTML Code kennen, der im Browser ankommt.
 
Hmm
hier mal mein HTML Code....
Wer findet den Fehler? :)

- Ich nicht :)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Cico</title>
  <meta name="description" content="Test">
  <meta name="description" content="Test">
  <meta name="author" content="Test">
<!-- jQuery enbinden von Google-->	
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // jQuery laden
  google.load("jquery", "1.3.2");
</script>

<!-- jQuery Code -->	
<script type="text/javascript"> 
	
	$(document).ready(function() {
		// Alle internen Links auswählen
		$('a[href*=#]').bind("click", function(event) {
			// Standard Verhalten unterdrücken
			event.preventDefault();
			// Linkziel in Variable schreiben
			var ziel = $(this).attr("href");
			//Scrollen der Seite animieren, body benötigt für Safari
			$('html,body').animate({
				//Zum Ziel scrollen (Variable)
				scrollTop: $(ziel).offset().top
			// Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
			}, 1500 , function (){location.hash = ziel;});
	   });
	return false;
	});

</script>
  


<script language="JavaScript">
<!--
<!-- Begin
function neueFarbe(farbe) {
  $("#top_strip").css("background-color", farbe);
  $("footer").css("background-color", farbe);
  $("#footer_centered").css("background-color", farbe);
}
//  End -->
//-->
</script>


   <!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="favicon.ico">

  <!-- CSS : implied media="all" -->
  <link rel="stylesheet" href="css/main.css">

  <!-- For the less-enabled mobile browsers like Opera Mini -->
  <link rel="stylesheet" media="handheld" href="css/handheld.css">


 
<link href="css/content.css" rel="stylesheet" type="text/css" />


<style type="text/css">
<!--
-->
</style>
</head>

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
<div id="top_strip"></div> <!-- For the top colored strip. Just set the background color for this in CSS -->
<div id="containeralles">
   
	<div id="container1">
 		 <div id="container" class="clearfix">
            <span class="reference">
                <a onclick="neueFarbe('#d44d8f');" href="#container2">Punkt1</a>
				<a onclick="neueFarbe('#e9d418');" href="#container3">Punkt2</a>
                <a onclick="neueFarbe('#c82c31');" href="#container4">Punkt3</a>
				<a onclick="neueFarbe('#2c0059');" href="#container5">Punkt4</a>
            </span>
            <div id="c_home">
              <h7>„UND JEDER ANFANG</h7><br /><h8>&nbsp;&nbsp;IST SCHWER“</h8>
              <div id="menue_unten"><span class="menueunten"><a onclick="neueFarbe('#d44d8f');" href="#container6">KONTAKT</a> <a onclick="neueFarbe('#d44d8f');" href="#container7">STREICHQUARTETT</a> <a onclick="neueFarbe('#d44d8f');" href="#container8">INSTRUMENTE</a> <a onclick="neueFarbe('#d44d8f');" href="#container9">IMPRESSUM</a></span></div>
              
            </div>
	    </div> <!--! end of #container -->
    </div> <!--! end of #container1 -->
    <div id="container2">
    <div id="c_werbung">
      <div id="container_werbung">
              <h9>„GOETHE ZITAT</h9><br /><h10>&nbsp;&nbsp;HIER“</h10>
             <div id="menue_unten"><span class="menueunten"><a href="#container6">KONTAKT</a> <a href="#container7">STREICHQUARTETT</a> <a href="#container8">TEST</a> <a href="#container9">IMPRESSUM</a></span></div>

            </div>
      </div> <!--! end of #container werbung-->
    </div>
    <div id="container3">
    <div id="container_onair">
     <div id="c_onair">
      <h11>„Es gibt keine zweite Chance</h11><br /><h12>&nbsp;&nbsp;f&uuml;r den ersten Eindruck“</h12>
     		<div id="menue_unten"><span class="menueunten"><a href="#container6">TEST</a> <a href="#container7">TEST</a> <a href="#container8">TEST</a> <a href="#container9">TEST</a></span></div>
      </div> 
      </div> <!--! end of #container on air -->
    </div>
    <div id="container4">
    <div id="container_web">
     <div id="c_web">
      <h12>„F&Uuml;R DAS NEUE SOLLEN</h12><br /><h13>&nbsp;WIR LEBEN“</h13>
     	<div id="menue_unten"><span class="menueunten"><a href="#container6">TEST</a> <a href="#container7">TEST</a> <a href="#container8">TEST</a> <a href="#container9">TEST</a></span></div>
      </div> 
          </div> <!--! end of #container web -->
    </div>
    <div id="container5">
    <div id="container_print">
     <div id="c_print">
      <h14>„TEST,</h14><br /><h15>&nbsp;&nbsp;&nbsp;&nbsp;TEST.“</h15>
     	<div id="menue_unten"><span class="menueunten"><a href="#container6">TEST</a> <a href="#container7">TEST</a> <a href="#container8">TEST</a> <a href="#container9">TEST</a></span></div>
      </div> 
     </div> <!--! end of #container print -->
    </div>
    <div id="container6">
     <div id="container_kontakt">
     <div id="c_kontakt">
      <h9>WIR FREUEN UNS AUF SIE.</h9>
     	<div id="menue_unten"><span class="menueunten"><a href="#container6">TEST</a> <a href="#container7">TEST</a> <a href="#container8">TEST</a> <a href="#container9">TEST</a></span></div>
      </div> 
     </div> <!--! end of #container kontakt -->
    </div>
    <div id="container7">
       <div id="container_philosophie">
     <div id="c_philosophie">
      <h14>STERNENSCHAU,</h14><br /><h15>GANZ IN DER NAEHE.</h15>
     	<div id="menue_unten"><span class="menueunten"><a href="#container6">TEST</a> <a href="#container7">TEST</a> <a href="#container8">TEST</a> <a href="#container9">TEST</a></span></div>
      </div> 
     </div> <!--! end of #container philosophie -->
    </div>
    <div id="container8">
       <div id="container_kunden">
     <div id="c_kunden">
      <h11>ICH BIN ENTZ&Uuml;CKT</h11><br /><h14>VON EURER HILFE...</h14>
     	<div id="menue_unten"><span class="menueunten"><a href="#container6">TEST</a> <a href="#container7">TEST</a> <a href="#container8">TEST</a> <a href="#container9">TEST</a></span></div>
      </div> 
     </div> <!--! end of #container kunden -->
    </div>
    <div id="container9">
       <div id="container_impressum">
     <div id="c_impressum">
      <h14>TEST</h14>
     	<div id="menue_unten"><span class="menueunten"><a href="#container6">TEST</a> <a href="#container7">TEST</a> <a href="#container8">TEST</a> <a href="#container9">TEST</a></span></div>
      </div> 
     </div> <!--! end of #container kontakt -->
    </div>
</div> <!--! end of #containeralles -->
	<footer>
		<div id="footer_centered">
    		<img src="images/kontakt.png" width="22" height="22" alt="kontakt" align="left"/> KONTAKT
		<p></p>
	  </div>
	</footer>

<script type="text/javascript" src="js/cufon-yui.js"></script>


</body>
</html>
 
Moin,

Du schliesst in XHTML die "inhaltsleeren" tags nicht.
Was ist ein "<meta charset="utf-8">" ?
<h14> ? Die hören doch schon bei <h6> auf.

Wenn Du mal schnell in den Validator schaust, wirst Du einen ganzen Sack an Fehlern finden, 37 an der Zahl.

Grüße
low
 
Was heisst denn ich schliesse "die inhaltsleeren tags" nicht ?
versteh das nicht so gut..
habe mir eben den quellcode von verschiedenen vorlagen zurechtgeschnipst...

Also H7 gibts schon gar nicht mehr?
Danke für den Tip!
Ich werd die Headlines dann wohl als transparente .png Dateien einbetten.
Dankeee :*
 
Lisa schrieb:
Was heisst denn ich schliesse "die inhaltsleeren tags" nicht ?
Zum Vergrößern anklicken....

Grundlagen XHTML:
SELFHTML: HTML/XHTML / XHTML und HTML / Unterschiede zwischen XHTML und HTML
Extensible Hypertext Markup Language

habe mir eben den quellcode von verschiedenen vorlagen zurechtgeschnipst...
Zum Vergrößern anklicken....

Du solltest aber auch verstehen was Du da zusammenschnippst. Denn ohne ein Verständnis dafür wird es dir nicht gelingen die Sprache zu erlernen und Probleme zu vermeiden.

Also H7 gibts schon gar nicht mehr?
Zum Vergrößern anklicken....

SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / berschriften

Ich werd die Headlines dann wohl als transparente .png Dateien einbetten.
Zum Vergrößern anklicken....

Wie schon gesagt: verwende dafür eher CSS und zeichne die Texte weiterhin als Überschriften aus - aber nur von <h1> bis <h6>. Informier dich auch mal darüber wie Texte unterteilt werden, das hat eigentlich fast schon nichts mit HTML zu tun ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben