kostenloser Webspace werbefrei: lima-city

Internet Explorer - Positionsprobleme

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   r***o

   12:29, 11.4.2011

   Hey Leute, ich arbeite derzeit an einer Website mit YAML im Hintergrund. Bei der Positionierung der Hauptleiste in der sich Logos befinden, habe ich nun ein Problem mit dem Internet Explorer 6 & 7.
   
   Und zwar stellt dieser den Menübereicht nicht korrekt dar, bzw. irgnoriert die CSS Vorlagen.
   
   Hier mal der Code:
   
   

   #logo {
   		float:left;
   	}
   	
   		#logo_left {
   		float:right;
   		padding-right:-150px;
   		padding-bottom:2px;
   		margin-left:40px;
   	}
   	
   	#header h1  {
   		padding-top:35px;
   		padding-left:10px;
   		float:left;
   }
   
   	#header span {
   		position:absolute;  
   		left:116px; 
   		float:left;
   		padding-top:61px;
   		margin-right: -1px;
   		position-left:25px;
   	
   	}

   
   
   Im Safari, Chrome, Firefox wird alles korrekt angezeigt nur der Internet Explorer macht Mucken. Ich bin mit meinem Latein am Ende, habt ihr vielleicht einen Tipp für mich.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. tdm

   tdm hat kostenlosen Webspace.

   12:33, 11.4.2011

   Woran das Problem konkret liegt, weiß ich nicht, aber ich weiß, dass der IE generell einige Probleme mit der Darstellung im Browser hat.

4. sneppa

   

   sneppa hat kostenlosen Webspace.

   12:38, 11.4.2011

   Ich würde generell nicht versuchen mit dem gleichen CSS alle Browser zu bedienen, da machst du dich kaputt ;)
   Versuche es für die zwei Versionen von Internet Explorer mit einer Browserweiche:
   http://de.selfhtml.org/css/layouts/browserweichen.htm
5. Autor dieses Themas

   r***o

   13:23, 11.4.2011

   Okay das mit der Browserweiche könnte ich probieren, aber ich hab nicht wirklich die Ahnung wie ich das umsetzen kann ausser so.
   Die HTML Datei wird ja dynamisch erzeugt, bzw. darauf habe ich keinen Zugriff...
   
   
   Mucken macht genau dieser Eintrag in der CSS
   
   

   #header span {
   		position:absolute;  
   		left:116px; 
   		float:left;
   		padding-top:61px;
   		margin-right: -1px;
   		position-left:25px;

   
   
   Also ist CSS nun die einzige Möglichkeit, bin mit meinem Latein nun auch am Ende...
   Die Website ist übrigens http://membran.gecoc-projects.de/de/home.html
   
   Beitrag zuletzt geändert: 11.4.2011 13:29:58 von renjo

6. k*********h

   11:02, 14.4.2011

   Hi renjo,
   
   
   also das dieser CSS-Code zu Problemen führt ist nicht besonders verwunderlich.
   Wenn ich dich richtig verstanden habe möchtest du das der kurze Satz im Header unter und nicht neben dem Titel angezeigt wird. (wie es im firefox der Fall ist)
   
   Da vom Layout die div-Container in denen sich die Elemente befinden bereits mit der Eigenschaft float ausgestattet sind um die nebeneinander-positionierung zu erreichen brauche die elemente an sich nicht nocheinmal gefloatet werden. soll heissen die span (die ja auch die probleme verursacht) muss weder mittels float, noch mittels position:absolute positioniert werden - und beides zusammen sowieso nicht. der ganz normal html-textfluss reicht hier aus um die span innerhalb des divs unter die h1 zu bringen. im grunde könntest du die span einfach ganz entfernen und es sollte gehn da eine h1 ja sowieso ein block-element ist und somit die oberste zeile innerhlab des div für sich beansprucht und nachfolgende elemente innerhalb des div also in die nächste zeile gesetzt werden.
   solltest du zb die h1 mittels CSS als inline-element ausgezeichnet haben musst du natürlich das br selbst noch einfügen.
   
   noch eine sache könnte problematisch werden:
   da in deinem header die divs gefloatet werden, und zwar sowohl left als auch right, könnte es in den verschiedenen browsern zu darstellungsfehlern kommen sobald diese gefloateten divs nicht mehr nebeneinanderpassen würden (also wenn zb der satz länger ist) - manche browser lassen dann nämlich die float-right und float-left divs überlappen :( eine feste breite (zb width:500px) für das div mit dem satz drinne wäre eine möglichkeit dies zu umgehen.
   
   

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?