• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Browserkrampf

ZeitGeist

ZeitGeist

Lounge-Member
Hab mal wieder nen Problem mit der Darstellung in unterschiedlichen Browsern. Besser gesagt zwei Probleme:

das erste macht FireFox.
Ich habe ein div mit einer festen Breite, padding und einer Border. Wenn ich jetzt overflow:hidden benutze, dann wird das div im FireFox auf einmal kleiner (um circa 10 pixel). In allen anderen Browsern bleibt die größe bestehen. Ich hab das padding jetzt schon rausgenohmen (muss ich dann halt irgenwie mit margin machen), allerdings stellt der FireFox das div immer noch kleiner als ohne overflow:hidden da (um 1px) und das sieht ein wenig scheisse aus.

Das zweite Problem macht Opera.
Ich möchte einen Rahmen um zwei untereinanderliegende divs machen, wobei das untere Breiter als das obere ist. Damit dort wo sich die beiden divs überlagern kein Rahmen ist, hab ich das untere einfach ein Pixel nach oben verschoben und das obere per z-index drüber gelegt. Jetzt muss ich aber für den weiteren Aufbau dem oberen ein float:left und dem unteren ein clear:left geben und schwupps ist im Opera der Rahmen wieder da. Warum? Bug? oder kann ich das irgendwie wegkriegen?

das entsprechende css:
HTML: 
#content	{widht:100%; margin-top:10px;}
.bild
{
	float:left; position:relative; z-index:5;
	width:460px; max-width:458px; height:272px;
	border:1px solid black; border-bottom:0px;
	background-color:white;
}

.text
{
	clear:left; position:relative; z-index:1; top:-1px;
	width:798px; max-width:788px;
	border:1px solid black; 
	padding:4px;
}

#news
{
	float:left; 
	width:333px; max-width:331px; height:262px; max-height:262px; 
	margin-left:5px; 
	border:1px solid black; 
	color:#858585; font-size:80%; 
	overflow:hidden;
}
und der html code:
HTML: 
<div id="content">
	<div class="bild">
		<br style="line-height:4px"/>
		<img src="images/ausdemregen.jpg" alt="Ein Foto der Band" height="268" width="450" style="margin:0px 4px 0px 4px;"/>
	</div>		
	<div id="news"> +++24.04.2006+++<br/>
     		 "Aus dem Regen" spielt zur Jugendfeier der Freien Humanisten Hannover im Theater am Aegi. Vollbesetztes Haus.<br/>
  		 <br/>
     		 +++22.06.2005+++<br/>
      		Und das es recht nicht. "Aus dem Regen" auf Platz eins der meist verkauften Platten weltweit.<br/>
      		<br/>
      		+++15.06.2005+++<br/>
     		 Man glaubt es kaum. Das erste Album von "Aus dem Regen" ab jetzt im Handel.<br/>
      		<br/>
      		+++23.03.2005+++<br/>
      		Die Homegape der sagen umwobenen Band "Aus dem Regen" ist soeben online gegangen.<br/>
      		<br/>
    	</div>
	<div class="text">
		Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li 
		existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico 
		dit me que Occidental es.<br/><br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 
		nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel 
		illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
	</div>
</div>

achja: anschauen kann man sich das unter:
http://www.aus-dem-regen.de/design1.php
 
Zuletzt bearbeitet:
Hab leider keine Zeit im Moment aber ich komm drauf zurück falls es sich inzwischen nicht erledigen sollte.

Nur mal allgemein aber ein Tip. Wenn man um Inhalte immer noch ein extra div setzt, erleichtert das so manche Positionierung derselben. So mit padding z.B.

z.B. mach ich immer

#left
und darin nochmal
#contenleft

Das Erleichtert Vieles.
 
Zuletzt bearbeitet:
kein Problem, ich lass das jetzt erstmal so, sieht für mich aus wie nen Browserbug, bzw 2 Browser Bugs. Das mit dem padding hab ich genau so gelöst wie du es vorsgeschlagen hast, zumindest in dem einen Fall.
trotzdem Danke.
 
so dass zweite Problem (Opera und der Rahmen) hat sich erledigt, leider nicht weil ich ne Lösung gefunden habe, sondern weil sich das Design ein wenig geändert hat.

Das FireFox aber das Box-Problem vom IE nachmacht, sobald ich nen overflow:hidden reinsetzte ist immer noch so. Hab auch schon versucht in die news Box eine weiteres divs zusetzten und dem den overflow:hidden zu geben, dann wird das overflow allerdings nicht richtig dargestellt.
 
das mit dem width ändert nix, aber danke.

Durch die kleineren max-width/height werte sind dafür da das Box-Problem vom IE zu umgehen. Der interpretiert nämlich max-width/height.
Aber tatsächlich wenn ich das max-width raus nehme zeigts der FireFox richtig an, nur der IE dann halt nicht mehr. Ansonsten funktioniert das mit dem kleineren max-width Werten tadelos, nur nicht im Fall mit overflow:hidden.
In dem Fall hat der FireFox leider Pech.
Es sei denn irgendwer hat noch ne gute Idee wie ich mit den 2 Pixel umgehe die der IE zuviel drauf haut.
 
max-width wird soweit ich weiß vom IE ignoriert evtl. verursachst du einfach einen Fehler der zufälligerweise zu dem von dir gewünschten Verhalten im IE führt.

Auf jeden Fall ist es unsinnig einen kleiner maximalen Wert anzugeben als der Bereich Breit ist.

Durch den XML Prolog in deiner Seite wird der IE in den Quirks mode versetzt. Wenn du den IE in den Standard Mode versetzt hat er den Boxbug nicht mehr, aber es gibt auch workarounds musste einfach mal suchen.
 
ehrlich gesagt nein. Aber google sollte helfen (ich hatte gestern mal kurz gesucht, aber das Thema interessiert mich nicht so - ich hatte bisher noch keinen Grund eine Internetseite mit XHTML auszuliefern)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben