ilch.de :: Forum :: Allgemein :: HTML, PHP, SQL,...

Hallo zusammen,

ich habe mal wieder ein Problem mit Browserkompabilität und Anzeige.

Ich habe eine neue Index erstellt und diese von anfang an sowohl in IE als auch FF richtig angezeigt gekriegt.

Jetzt aber das Problem:

Auf meinem hisigen PC wird alles korrekt angezeigt, sowohl in IE als auch in FF.

Auf meinem 1ten Laptop ist die Anordnung richtig, nicht aber die Schriftarten

Und auf dem letzten Laptop wird es in FF fast korrekt angezeigt, und im IE vollkommen verzogen.

Es sind auf allen Maschinen die selben Versionen von IE und FF installiert.

Hier mal die Index

<!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 Einträge -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="de" />
<meta name="description" content="Web-Area ist ein professionelles Einzelunternehmen im Privatebreich f&uuml;r Internetpr&auml;senzen sowie Grafikdesign" />
<meta name="keywords" content="web, area, www, site, seite, internet, global, design, theme, template, news, support, comment, article, tutorial, html, php, sql, ilch, webspell, drupal, joomla, wordpress, css, div, flash, adobe, photoshop, dreamweaver, referenzen, portfolio, kontakt, impressum, michel, auftritt, schweiz, suisse, switzerland, g&uuml;nstig, corporate, gaming, premium" />
<meta name="page-type" content="information" />
<meta name="doc-type" content="Web Page" />
<meta name="distribution" content="global" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="7 days" />
<meta name="resource-type" content="document" />
<meta name="language" content="de" />
<!-- Meta Einträge Ende -->
<title>Web-Area | Professionelle Webauftritte!</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
  <link href="css/iefix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- Slider -->
<script language="javascript" type="text/javascript" src="js/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="js/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript" src="js/sliding_options.js"></script>
<!-- Slider Ende -->
</head>

<body>
<div id="design">
<!-- Navigationsbereich -->
  <div id="navigation">
    <ul>
      <li class="active"><a href="#" class="active">home</a><br /><span>STARTSEITE</span></li>
      <li><a href="#">angebote</a><br /><span>MEINE LEISTUNGEN</span></li>
      <li><a href="#">portfolio</a><br /><span>BISHERIGE ARBEITEN</span></li>
      <li><a href="#">shop</a><br /><span>SOFORT KAUFEN</span></li>
      <li><a href="#">kontakt</a><br /><span>MELDEN SIE SICH</span></li>
    </ul>
    <br style="clear: left;" />
  </div>
  <!-- Contentbereich -->
  <div id="content">
    <div id="slider">
      <!-- Slider -->
      <div id="SlideItMoo_info_outer">	
	    <div id="SlideItMoo_info_inner">			
		  <div id="SlideItMoo_info_items">
		    <!-- 1 -->
            <div class="info_item">
              <h1>Redox Gaming</h1>
              <img src="images/slider.png" width="802" height="200" alt="radox" />
              <a href="#" class="more">Ansehen!</a>
            </div>
            <!-- 1 Ende -->	
            <!-- 2 -->
            <div class="info_item">
              <h1>DarkBlue Portfolio</h1>
              <img src="images/slider_2.png" width="802" height="200" alt="radox" />
              <a href="#" class="more">Ansehen!</a>
            </div>
            <!-- 2 Ende -->	
            <!-- 3 -->
            <div class="info_item">
              <h1>CartonGrunge Porfolio</h1>
              <img src="images/slider_3.png" width="802" height="200" alt="radox" />
              <a href="#" class="more">Ansehen!</a>
            </div>
            <!-- 3 Ende -->			
		  </div>            		
		</div>
	  </div>
      <div id="announce">
        <div id="prev_title">Vorherige: DarkBlue Portfolio</div>
        <div id="next_title">Folgende: CartonGrunge Porfolio</div>
        <a href="#" title="" id="pause_play" class="playing"></a>
      </div>
      <!-- Slider Ende -->
    </div>
    <div class="panel_1">
      <div id="panel_icon_1" class="panel_icon"><h1>herzlich willkommen</h1></div>
      <p>&quot;Ich begr&uuml;sse Sie ganz herzlich auf Web-Area, meinem privaten Portfolio!<br />Seit 2009 nutze ich Web-Area als pers&ouml;nliches Aush&auml;ngeschild f&uuml;r meine Arbeiten und biete zugleich einige Dienstleistungen im Bereich Webdesign &amp; -anpassung an.<br />Zudem sollen Sie einen Eindruck davon bekommen k&ouml;nnen, welche Dienste ich auch Ihnen erweisen k&ouml;nnte.&quot;</p>
      <div class="panel_button"><a href="#">Mehr erfahren!</a></div>
    </div>
    <div class="panel_2">
      <div id="panel_icon_2" class="panel_icon"><h1>jung &amp; dynamisch</h1></div>
      <p>&quot;Durch das selbstst&auml;ndige Arbeiten f&uuml;r und an Web-Area, sind sowohl die Leistungen als auch der Support optimal gew&auml;hrt. <br />Dadurch wird garantiert, dass Ihre Ansprechperson jederzeit in das Projekt eingeweiht ist und bei Fragen dynamisch handeln kann, wodurch die aufgebrachte Zeit vollumf&auml;nglich genutzt wird und Sie sich eine Menge Zeit ersparen k&ouml;nnen.&quot;</p>
      <div class="panel_button"><a href="#">Mehr erfahren!</a></div>
    </div>
    <br style="clear: both;" />
    <div class="panel_1">
      <div id="panel_icon_3" class="panel_icon"><h1>g&uuml;nstige angebote</h1></div>
      <p>&quot;Da ich Web-Area ausschliesslich in meiner Freizeit vertrete und weder Lohn an Mitarbeiter noch Miete f&uuml;r Gesch&auml;ftsr&auml;ume bezahlen muss, kann ich Ihnen besonders attraktive Preise anbieten.<br />Anders als bei vielen anderen Unternehmen, bezahlen Sie hier auch wirklich nur das Ergebnis und nicht den ben&ouml;tigten Zeitaufwand.<br />Damit haben Sie jederzeit Transparenz und Einsicht in die Kosten.&quot;</p>
      <div class="panel_button"><a href="#">Mehr erfahren!</a></div>
    </div>
    <div class="panel_2">
      <div id="panel_icon_4" class="panel_icon"><h1>sicher bezahlen</h1></div>
      <p>&quot;Bei Bestellungen und Sofortk&auml;ufen auf Web-Area haben Sie die einfache, sichere und weltweit verbreitete M&ouml;glichkeit via Paypal zu bezahlen.<br />Dabei werden keinerlei Bankkontodaten o.&auml;. preisgegeben.<br />Durch die Kontrolle einer Drittgesellschaft sind sie jederzeit rechtlich gesch&uuml;tzt und k&ouml;nnen im Falle einer Beschwerde mit der kompletten R&uuml;ckerstattung rechnen.&quot;</p>
      <div class="panel_button"><a href="#">Mehr erfahren!</a></div>
    </div>
    <br style="clear: both;" />
  </div>
</div>
</body>
</html>

und hier die main.css

@charset "utf-8";
/* CSS Document */

@import url('style.css');
@import url('slider.css');

body {
background-image: url(../images/bg.png);
background-repeat: no-repeat;
background-position:center;
background-color: #ffffff;
}

#design {
width: 800px;
height: auto;
margin: 0 auto;
}

/* Navigationsbereich */
#navigation {
width: 100%;
height: 94px;
background-color: #272c2e;
position: absolute;
top: 0;
left: 0;
}

#navigation ul {
padding-top: 21px;
margin: 0 auto;
display: table;
}

#navigation ul li {
display: inline;
float: left;
margin-right: 1px;
padding-bottom: 15px;
border-bottom: 3px solid #7d7d7d;
}

#navigation ul li:hover {
border-bottom: 3px solid #22a7d8;
}

#navigation ul li.active {
border-bottom: 3px solid #a3d102;
}

#navigation ul li a {
font-family: "Arial Narrow";
font-size: 30px;
color: #ffffff;
text-decoration: none;
padding-left: 12px;
padding-right: 38px;
}

#navigation ul li a:hover {
color: #22a7d8;
}

#navigation ul li a.active {
color: #a3d102;
}

#navigation ul li span {
font-family: "Arial Narrow";
font-size: 14px;
color: #b2b2b2;
padding-left: 12px;
padding-right: 38px;
}

/* Contentbereich */
#content {
width: 810px;
height: auto;
margin: 0 auto;
margin-top: 110px;
padding-left: 35px;
}

#slider {
width: 802px;
height: auto;
float: left;
margin-top: 10px;
margin-bottom: 15px;
border: 4px solid #f0f0f0;
}

.panel_1 {
width: 377px;
height: auto;
float: left;
margin-bottom: 5px;
}

.panel_2 {
width: 377px;
height: auto;
float: left;
margin-bottom: 5px;
margin-left: 50px;
}

.panel_icon {
width: 377px;
height: 50px;
background-color: #272c2e;
position: relative;
top: 0px;
left: 0px;
margin-right: 15px;
margin-bottom: 15px;
}

#panel_icon_1 {
background-image: url(../images/home/willkommen.png);
background-repeat: no-repeat;
position: relative;
top: 0;
left: 0;
}

#panel_icon_2 {
background-image: url(../images/home/jung_dynamisch.png);
background-repeat: no-repeat;
position: relative;
top: 0;
left: 0;
}

#panel_icon_3 {
background-image: url(../images/home/angebote.png);
background-repeat: no-repeat;
position: relative;
top: 0;
left: 0;
}

#panel_icon_4 {
background-image: url(../images/home/sicher.png);
background-repeat: no-repeat;
position: relative;
top: 0;
left: 0;
}

.panel_icon h1 {
font-family: "Arial Narrow";
font-size: 22px;
font-weight: bold;
color: #a3d102;
font-style: italic;
padding-left: 70px;
padding-top: 13px;
}

.panel_button {
float: left;
position: relative;
bottom: 0px;
font-family: Arial;
font-size: 11px;
color: #a3d102;
font-style: italic;
margin-top: -2px;
}

und die slider.css

#SlideItMoo_info_outer, #SlideItMoo_info_inner, #SlideItMoo_info_items .info_item {
width: 800px;
height: 200px;
background-color: #272c2e;
}

#SlideItMoo_info_outer {
width: 800px;
}

#SlideItMoo_info_outer { 
display: block; 
position: relative; 
margin: 0px auto 0px; 
}

#SlideItMoo_info_inner { 
position: relative; 
overflow: hidden; 
margin: 0px auto 0px;  
}

#SlideItMoo_info_items { 
display: block; 
position: relative; 
}

/* remember after styling to set the itemWidth parameter on class instance */
#SlideItMoo_info_items .info_item {
display: block; 
position: relative;
float: left;
font-family: Arial;
font-size: 14px;
color: #c3ccd0;
font-style: italic;
text-align: justify;
}

#SlideItMoo_info_items .info_item a.more {
display: block;
position: absolute;
bottom: 10px;
right: 15px;
text-decoration: none;
text-transform: uppercase;
background-color: #000000;
padding: 3px 10px;
}

#SlideItMoo_info_items .info_item a img {
border: 3px #000 solid;
padding: 3px;
background: #ffffff;
margin: 20px 10px;
margin-left: 0px;
}

#SlideItMoo_info_items .info_item img {
float: left;	
margin-right: 15px;
}

#SlideItMoo_info_items .info_item h1 {
display: none;
padding: 15px 0px 20px;
}

/* next prev article announce */
#announce{
display: block;
position: relative;
clear: both;
height: 40px;
width: 800px;
margin: 0px auto;
background-color: #272c2e;
}

#prev_title, next_title{
display: block;
position: relative;
float: left;
font-family: Arial;
font-size: 15px;
color: #c3ccd0;
font-style: italic;
padding: 0px 10px;
line-height: 40px;
}
	
#next_title {
float: right;
margin-left: auto;
margin-right: 10px;
margin-top: 12px;
font-family: Arial;
font-size: 15px;
color: #c3ccd0;
font-style: italic;
}

#announce a.playing {
display: block;
position: absolute;
left: 400px;
top: 5px;
width: 29px;
height: 29px;
background:url(../images/slider/pause.png) center center;	
}

#announce a.paused {
background: url(../images/slider/play.png) center center;	
}

Die Auflösungen der Rechner sind jeweils

PC: 1280x1024
LPs: 1280x800

Und damit ihr es beurteilen könnt, ob es bei euch richtig ist, hier wie es sein sollte:

externer Link

betroffene Homepage: web-area.ch/

Geschlossen

	Zurück zu HTML, PHP, SQL,...

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » HTML, PHP, SQL,... » IE + Auflösung