Antworten auf deine Fragen:
Neues Thema erstellen

FF und IE unterschiedl. Anpassung

S

sounddesigner

Noch nicht viel geschrieben

Juten Tach, ich wieder...

Nachdem ich mich von komplizierten Spry Geschichten und JS verabschiedet habe kann ich mich nun den kleineren Details widmen:



Hier gibt es zwischen Firefox /Win und allen anderen Browsern (auch FF auf Mac - alles bestens) ein Anpassungsproblem welches sich in den Menüs als Verschiebung von ein bis zwei Pixeln äußert.
Ich habe schon ne Menge probiert, insbesondere die Margins auf null zu setzen.
Kann es auch an der Schriftgröße liegen? Weiß jemand etwas? Ich habe auch brav die Comic verbannt - nur von italic konnte ich mich noch nicht trennen...

Sorry, noch viel nicht relevantes (wegen meiner Menüexperimente)dabei...
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Unbenanntes Dokument</title>
<link href="styles/ava_style.css" rel="stylesheet" type="text/css">
<style type="text/css">
ul.men ul.erl {
	background-image: url(images/ka/ka_erl.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	left: 118px;
	top: 3px;
	width: 172px;
	font-size: 14px;
	height: 106px;
	position: absolute;
	text-align: left;
	right: 0px;
	bottom: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	overflow: visible;
}
ul.men ul.ang {
	background-repeat: no-repeat;
	left: 118px;
	top: 48px;
	width: 172px;
	font-size: 14px;
	height: 230px;
	position: absolute;
	text-align: left;
	right: 0px;
	bottom: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	background-image: url(images/ka/ka_ang.jpg);
}
ul.men_x ul.erl {
	background-image: url(images/ka/ka2_erl.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	left: 118px;
	top: 3px;
	width: 172px;
	font-size: 14px;
	height: 230px;
	position: absolute;
	text-align: left;
	margin: 0px;
	right: 0px;
	bottom: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
}
ul.men ul.coa {
	background-image: url(images/ka/ka_coa.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	left: 118px;
	top: 93px;
	width: 172px;
	font-size: 14px;
	height: 83px;
	position: absolute;
	text-align: left;
	margin: 0px;
	right: 0px;
	bottom: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
}
ul.men ul.uns {
	background-image: url(images/ka/ka_uns.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	left: 118px;
	top: 138px;
	width: 172px;
	font-size: 14px;
	height: 102px;
	position: absolute;
	text-align: left;
	margin: 0px;
	right: 0px;
	bottom: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
}
ul.men ul.kon {
	background-image: url(images/ka/ka_kon.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	left: 118px;
	top: 183px;
	width: 172px;
	font-size: 14px;
	height: 119px;
	position: absolute;
	text-align: left;
	right: 0px;
	bottom: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	margin: 0px;
}
ul.men a.erlebnis {
	padding-top: 8px;
	padding-right: 40px;
	padding-bottom: 9px;
	width: 120px;
	padding-left: 18px;
	background-repeat: no-repeat;
	}
	ul.men a.angebot {
	padding-top: 8px;
	padding-right: 40px;
	padding-bottom: 9px;
	width: 120px;
	padding-left: 18px;
	background-repeat: no-repeat;
	}
	ul.men a.coaching {
	padding-top: 8px;
	padding-right: 40px;
	padding-bottom: 9px;
	width: 120px;
	padding-left: 18px;
	}
	ul.men a.ueberuns {
	padding-top: 8px;
	padding-right: 40px;
	padding-bottom: 9px;
	width: 120px;
	padding-left: 18px;
	}
	ul.men a.kontakt{
	padding-top: 8px;
	padding-right: 40px;
	padding-bottom: 9px;
	width: 100px;
	padding-left: 18px;
	}

body {
	background-repeat: no-repeat;
}
li ul {display: none;}
li:hover ul {display: block;}
</style>
</head>

<body background="http://www.psd-tutorials.de/modules/Forum/images/av/av_li.jpg">


   <div id="apmen">
<ul id="menu" class="men">    
         
         	<li id="er"><a 
         class="erlebnis"
         href="erlebnis_tantramassage.html" target="_parent">Erlebnis</a>

<ul class="erl">
        
<li><a href="erlebnis_tantramassage.html" target="_parent">***Tantramassage</a></li>
              <li><a href="erlebnis_wellnessmassage.html" target="_parent">***Wellnessmassage</a></li>
              <li><a href="erlebnis_taomassage.html" target="_parent">***Taomassage</a></li>
              <li><a href="erlebnis_lomi_lomi_massage.html" target="_parent">***Lomi Lomi Massage</a></li>
              <li><a href="erlebnis_feedbacks.html" target="_parent">***Feedbacks</a></li>
         </ul>
       
		</li>
         	<li id="an"><a 
           class="angebot" 
           href="angebot_tantrische_massagen_fuer_frauen.html" target="_parent">Angebot</a>
            
            <ul class="ang">
              
              <li><a href=" angebot_wellnessmassagen_fuer_frauen.html" target="_parent">F&uuml;r Frauen</a></li>
              <li><a href=" angebot_tantrische_massagen_fuer_frauen.html" target="_parent">***Tantrische Massagen</a></li>
              <li><a href=" angebot_wellnessmassagen_fuer_frauen.html" target="_parent">***Wellnessmassagen</a></li>
              <li><a href=" angebot_rubensmassagen.html" target="_parent" >***Rubensmassagen</a></li>
              <li><a href=" angebot_lomi_lomi_massagen_fuer_frauen.html" target="_parent" >***Lomi Lomi Massagen</a></li>
              <li><a href=" angebot_tantrische_massagen_fuer_maenner.html" target="_parent" >F&uuml;r M&auml;nner</a></li>
              <li><a href=" angebot_tantrische_massagen_fuer_maenner.html" target="_parent" >**Tantrische Massagen</a></li>
              <li><a href=" angebot_wellnessmassagen_fuer_maenner.html" target="_parent" >***Wellnessmassagen</a></li>
              <li><a href=" angebot_lomi_lomi_massagen_fuer_maenner.html" target="_parent" >***Lomi Lomi Massagen</a></li>
              <li><a href=" angebot_tantrische_massagen_fuer_paare.html" target="_parent" >F&uuml;r Paare</a></li>
              <li><a href=" angebot_tantrische_massagen_fuer_paare.html" target="_parent" >***Tantrische Massagen</a></li>
              <li><a href=" angebot_wellnessmassagen_fuer_paare.html" target="_parent" >***Wellnessmassagen</a></li>
            </ul>
</li>
          <li id="co"><a 
          class="coaching" 
          href="coaching_tantra_experience.html" target="_parent">Coaching</a>
            <ul class="coa">
              
              <li><a href="coaching_tantra_experience.html" target="_parent">...and more</a></li>
              <li><a href="coaching_tantra_experience.html" target="_parent" >***Tantra Experience</a></li>
              <li><a href="coaching_rubensmassage.html" target="_parent">***Rubensmassage</a></li>
              <li><a href="coaching_einzelsessions.html" target="_parent">***Einzelsessions</a></li>
            </ul>
       	</li>
          
          <li id="uu"><a 
          	class="ueberuns"
          	href="unser_team.html" target="_parent">&Uuml;ber Uns</a>
            	<ul class="uns">
              
              <li><a href="unser_team.html" target="_parent">***Team</a></li>
              <li><a href="unser_ambiente.html" target="_parent">***Ambiente</a></li>
              <li><a href="unsere_historie.html" target="_parent">***Historie</a></li>
              <li><a href="unsere_vision.html" target="_parent">***Vision</a></li>
              <li><a href="uns_mitarbeit.html" target="_parent">***Mitarbeit</a></li>
            </ul>
    	</li>
              <li id="kt"><a 
              class="kontakt"              
              href="kontakt_termine.html" target="_parent" >Kontakt</a>
                <ul class="kon">
 
                  <li><a href="kontakt_termine.html" target="_parent">***Terminvereinbarung</a></li>
                  <li><a href="kontakt_blume.html" target="_parent">***Die Blume</a></li>
                  <li><a href="kontakt_*********html" target="_parent">***Anfahrtspl&auml;ne</a></li>
                  <li><a href="kontakt_fragen_antworten.html" target="_parent">***Fragen &amp; Antworten</a></li>
                  <li><a href="kontakt_empfehlungen.html" target="_parent">***Empfehlungen</a></li>
                  <li><a href="impressum.html" target="_parent" >***Impressum</a></li>
                </ul>
              </li>
    
   	</ul>
    		
     
  </div>


<!--HAUPTMENÜ-->



<div id="li_unten">
  <table width="288" border="0">
    <tr>
      <td width="5" height="47">&nbsp;</td>
      <td width="10">&nbsp;</td>
      <td width="259">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <br>
</div>

</body>
</html>

CSS:

HTML: 
@charset "UTF-8";
.sdpro #container {
	width: 966px;
	top: 90px;
	position: relative;
	height: 690px;
	right: 0px;
	z-index: 1;
	color: #FFF;
	margin-right: auto;
	margin-left: auto;
} 

h3 {
	color:#9FF;
	font-family: Tahoma, Geneva, sans-serif;
	font-style: italic;
	font-size: 18px;
	font-weight: normal;
	font-variant: normal;
}

#apmen {
	position:absolute;
	width:321px;
	height:309px;
	left: 4px;
	top: 242px;
	right: 0px;
	bottom: 0px;
	margin: 0px;
	padding: 0px;
	z-index: 10;
}
#apmen_x {
	position:absolute;
	width:321px;
	height:309px;
	left: 4px;
	top: 242px;
	right: 0px;
	bottom: 0px;
	margin: 0px;
	padding: 0px;
}

#menu {
	width:305px;
	height:308px;
	margin: 0px;
	padding: 0px;
}
#menu_x {
	width:305px;
	height:308px;
	margin: 0px;
	padding: 0px;
}
ul.men    {
	list-style-type: none;
	font-size: 18px;
	line-height: 45px;
	left: 14px;
	bottom: 0px;
	top: 0px;
	right: 0px;
	position: absolute;
	font-style: italic;
	font-weight: normal;
	font-variant: normal;
	font-family: Tahoma, Geneva, sans-serif;
	margin: 0px;
	padding: 0px;
	text-transform: none;
	text-decoration: none;
}
ul.men_x {
	list-style-type: none;
	font-size: 18px;
	line-height: 45px;
	left: 14px;
	bottom: 0px;
	top: 0px;
	right: 0px;
	position: absolute;
	font-family: Tahoma, Geneva, sans-serif;
	font-style: italic;
	font-weight: normal;
	font-variant: normal;
	margin: 0px;
	padding: 0px;
}
ul.men a  {
	color: #FFF;
	font-weight: normal;
	list-style-type: none;
	text-decoration: none;
	font-family: Tahoma, Geneva, sans-serif;
	margin: 0px;
	padding: 0px;	
}
ul.men_x a {
	font-family: Tahoma, Geneva, sans-serif;
	color: #FFF;
	font-style: italic;
	font-weight: normal;
	list-style-type: none;
	text-decoration: none;
	padding-top: 10px;
}

ul.men a:hover {
	color: #9FF;
}

ul.men a:active {
	color: #FF7F55;
}
ul.men ul li {
	list-style-type: none;
	line-height: 17px;
	font-size: 14px;
	padding-left: 0px;
}
ul.men_x ul li {
	list-style-type: none;
	line-height: 17px;
	font-size: 14px;
	padding-left: 0px;
}
	ul.men li:hover a.erlebnis {
		background-image: url(../images/hg/hg_erl.jpg);
		background-repeat: no-repeat;
		background-position: left top;
	}
	ul.men li:hover a.angebot {
		background-image: url(../images/hg/hg_ang.jpg);
		background-repeat: no-repeat;
		background-position: left top;
	}
	ul.men li:hover a.coaching {
		background-image: url(../images/hg/hg_coa.jpg);
		background-repeat: no-repeat;
		background-position: left top;
	}
	ul.men li:hover a.ueberuns {
		background-image: url(../images/hg/hg_uns.jpg);
		background-repeat: no-repeat;
		background-position: left top;
	}
	ul.men li:hover a.kontakt {
		background-image: url(../images/hg/hg_kon.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

#li_unten {
	position:absolute;
	width:303px;
	height:92px;
	z-index:20;
	background-image: url(../images/ka/untenlinks.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	color: #FFF;
	overflow: hidden;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	text-align: left;
	white-space: normal;
	font-style: italic;
	font-weight: normal;
	left: 18px;
	top: 582px;
}
#li_unten table tr td {
	font-size: 18px;
	text-align: right;
}

#links {
	position:absolute;
	width:336px;
	height:690px;
	z-index:10;
	left: 0px;
	top: 0px;
	visibility: visible;
	background-image: url(../images/av/av_li.jpg);
}


.hidepics {
	visibility: hidden;
}

Ganz zu schweigen von dem Umstand dass <=IE6 noch alles durcheinander bringt. Dürfte an fehlenden Z-Indexen liegen. Auch hier bin ich dankbar für Ratschläge.


Schonmal dankeschön fürs Reinschauen und herzliche Grüße!
 
Zuletzt bearbeitet:

N

noxhirsch

Guest

AW: FF und IE unterschiedl. Anpassung

Nun, ich würde die Seite für FF & Co designen und dann mit dem star-html-hack für IE anpassen - d.h. man setzt vor die CSS-Class/-ID ein Sternchen und ein "html" und die darin stehenden Anweisungen gelten nur für den IE. Beispiel:
Code: 
.class{
      width:500px;                    //für FF & Co
}

* html .class{
       width:500px;                    //für FF & Co
 }
Und den IE6 würde ich komplett vergessen, da er auf von großen Websites nicht mehr unterstützt wird.
 
S

sounddesigner

Noch nicht viel geschrieben

AW: FF und IE unterschiedl. Anpassung

IE 6 hatte ich schon voll im Griff, hab nur die Z´s durcheinander gebracht.
Nochmal:
Firefox unter Win(XP und 2000) ist der einzige Browser der die Bilder nicht wie gewünscht darstellt.
(Könnte das mal jemand bestätigen? Ich hab es hier nur unter Fusion auf dem Mac gesehen)
Safari, IE und FF Mac sowie die DW Vorschau machen alle das gleiche - in dem Fall hilft also kein IE Hack.

Ein FF Win Hack wäre gefragt.
Wobei ich denke dass es nur eine Angabe mehr oder weniger im css brauch, nur welche...
 
Zuletzt bearbeitet:
N

noxhirsch

Guest

AW: FF und IE unterschiedl. Anpassung

mhh... FF Win & Mac sollte kein Unterschied machen.... vll zwei verschiedene Versionen?
 
S

schnullerbacke

Aktives Mitglied

AW: FF und IE unterschiedl. Anpassung

Meinst du den 1px vertikalen Versatz wenn das Untermenü aufklappt?

Den habe ich auch: Im IE8 und FF3.6 unter Win7.
Opera10 ist ok.
 
S

sounddesigner

Noch nicht viel geschrieben

AW: FF und IE unterschiedl. Anpassung

Hoppala, IE8 Win 7 also auch. Das ist nicht gut.

Ich vermute ja dass es mit der Schrift in Verbindung mit line-height zu tun hat, weiß mir aber nicht anders zu helfen.
Falls jemand noch erhellendes hat würde ich mich sehr freuen.

Edit: Auch beim Skalieren ist ja ziemlich wildes Durcheinander auf allen Browsern und es scheint komplizierter zu sein als ich dachte.
Gibt es eine hilfreiche Sammlung von Tipps wie man so etwas verhindert? Muss ich schon wieder von vorne anfangen?
Kann jemand mit Gewissheit sagen ob es an den Boxmodell Interpretationen liegt oder nicht ? Ich glaube nämlich dass es etwas anderes ist...


Ich habs jetzt noch mal aufs Wesentliche reduziert:



HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Unbenanntes Dokument</title>
<link href="styles/ava_style.css" rel="stylesheet" type="text/css">
<style type="text/css">

#apmen {
	position:absolute;
	height:309px;
	top: 20px;
	margin: 0px;
	padding: 0px;
	z-index: 10;
}
ul.men    {
	list-style-type: none;
	font-size: 18px;
	line-height: 45px;
	left: 14px;
	bottom: 0px;
	right: 0px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-family: Tahoma, Geneva, sans-serif;
	margin: 0px;
	padding: 0px;
	text-transform: none;
	text-decoration: none;
	position: relative;
}
ul.men a  {
	color: #FFF;
	font-weight: normal;
	list-style-type: none;
	text-decoration: none;
	font-family: Tahoma, Geneva, sans-serif;
	margin: 0px;
	padding: 0px;	
}
ul.men ul li {
	list-style-type: none;
	line-height: 17px;
	font-size: 14px;
	margin: 0px;
	padding: 0px;
}
ul.men li a.kontakt  {
		background-image: url(images/hg/hg_kon.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

ul.men ul.kon {
	background-image: url(images/ka/ka_kon.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	left: 118px;
	top: 3px;
	width: 172px;
	font-size: 14px;
	height: 106px;
	position: absolute;
	text-align: left;
	right: 0px;
	bottom: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	overflow: visible;
}
	ul.men a.kontakt{
	padding-top: 8px;
	padding-right: 40px;
	padding-left: 18px;
	margin: 0px;
	padding-bottom: 10px;
	}

body {
	background-repeat: no-repeat;
	background-color: #808080;
}
</style>
</head>

<ul id="menu" class="men">    
   
              <li id="kt"><a 
              class="kontakt"              
              href="kontakt_termine.html" target="_parent" >Kontakt</a>
                <ul class="kon">
 
               
                </ul>
  </li>    
 
</body>
</html>




EDITEDIT:

OK - Es ist line-height. Wenn der weg genommen wird und der Versatz ausgeglichen dann stimmts. Nur was mach ich nun??#

LÖSUNG: Alle Hauptmenüeinträge mit absoluter Position versehen.
IE 6 läuft auch, sieht so aus als könnte ich mich nun endlich mal um den Content kümmern.

Viel los ist hier wohl nich...
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 81 (Mitglieder: 2, Gäste: 79)
Robots: 735

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben