CSS Browserabweichung

Ador

Ador

Erfahrenes Mitglied
Hallo,

ich setze gerade ein Design mit CSS um. Arbeiten tu ich immer mit dem Firefox, aber ab und an gucke ich auch im IE, Opera, Chrom und Safari nach. Nun stelle ich gerade fest, dass es zwischen den Browsern zum Teil zu Milimeter abweichungen kommt. Also es stimmt alles, aber die Browser zeigen verschiedene Divs um ganz wenig (1-2 pixel) unterschiedlich an. Leider zerstört das in meinem Fall gerade das gesamte Design, was kann ich tun?

mfg
ad0r
 
ok hier mal das CSS und HTML
Steht noch am Anfang, ist nicht viel und das HTML besteht bisher nur aus DIVS (siehe css).

Am meisten störend ist es bei nem Bild, dass sich im div #bild_rechts befindet

Code: 
* {
	padding:0;
	margin:0;
}



body a {
	color:#db9534;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	text-decoration:none;
	font-weight:bold;
}

body a:hover, body a:active, #footer a:hover, #footer a:active {
	color: red;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	text-decoration:none;
}

body p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:160%;
	color:black;
}




body {
	background-image:url(../images/bgr.jpg);
	background-repeat:repeat-x;
}

#wrapper {
	margin:auto;
	width:620px;

}

/*Top bereich */
#bereich_top {
	margin:auto;
	padding-left:20px;
	margin-top:-65px;
}

#bild_top {
	margin:auto;
	height:346px;
}

h1 {
	color:#fab42e;
	font-family: Arial, Helvetica, sans-serif;
	font-size:45px;
	text-decoration:none;
	font-weight: normal;
	letter-spacing:1px;
}

/*Nav main */
#nav_top {
}

#nav_top a {
	font-size:13px;
}

#nav_top ul {
	margin-top:5px;
	padding-top:0px;
}

#nav_top li {
	list-style:none;
	display:inline;
}

.moduletable_menu .item1 {
	padding-right:15px;
	border-right:1px solid black;
}

.moduletable_menu .item2 {
	padding-left:15px;
	padding-right:15px;
	border-right:1px solid black;
}

.moduletable_menu .item3 {
	padding-left:15px;
	padding-right:15px;
}

.moduletable_menu a {
	color:black;
}

#nav_top li#current a {
	color:#db9534;
}

/*content bereich */
#content_bereich {
	padding-left:20px;
	margin-top:30px;
	width:740px;
}

#content {
	text-align:justify;
	width:300px;
	height:365px;
	overflow: hidden;
	float:left;
}

#content .contentheading {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:160%;
	color:black;
	font-weight:bold;
	padding-top:10px;
}	

#bild_rechts {
	float:right;
	width:424px;
	height:389px;
	overflow:hidden;
}

Code: 
<?php



/*

 *

 * Brief Info

 *

 */

defined( '_JEXEC' ) or die( 'Access to this location is RESTRICTED.' );

?>

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>

    <jdoc:include type="head" />

        <link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />

        <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
        
        <meta name="verify-v1" content="S/BEqdhMJ/Vqv0sBmktZnLPEWSusilnjZ8USyHO9a2o=" >

</head>


<body class="seite<?php echo $Itemid ?>">

	<div id="wrapper">	
    
        <div id="bild_top">
          	<jdoc:include type="modules" name="bild_top" style="xhtml" />
        </div>
    
        <div id="bereich_top">
                    
            <div id="nav_top">
            	<h1>Kabc</h1>
            	<jdoc:include type="modules" name="nav_top" style="xhtml" />
            </div>
        
        </div>
        
        <div id="content_bereich">
        	<div id="content">
        		<jdoc:include type="component" style="xhtml" />
            </div>
            
            <div id="bild_rechts">
        		<jdoc:include type="modules" name="bild_rechts" style="xhtml" />
            </div>
        </div>

	</div>	<!--ENDE wrapper-->  

</body>

</html>

ok, hab den Code aktualisiert

hier noch ein Screen von der Abwichung im Opera.
 

Anhänge

  • fehler.jpg
    fehler.jpg
    39,2 KB · Aufrufe: 10
Sagst du mir bitte, wo hier in einem dieser Browser eine Abweichung, geschweige denn ein zerstörtes Design zu erkennen ist?

ff.jpg ie.jpg safari.jpg chrome.jpg

(v.l.n.r.: FF, IE, Safari, Chrome)

Lediglich Opera interpretiert da deine diskrepante Breitenangabe für #wrapper (width:620px) und den inneren Block #content_bereich (width:740px + padding-left:20px = 760px) zu deinem Nachteil, und schneidet 140px vom rechten Block #bild_rechts ab:

opera.jpg

mfg Maik
 
Wenn du mein Bild anguckst, müsste es (wie im Mozilla) genau zwischen den Balken oben und unten sein. Es ragt aber oben etwas über.
Verstehste?
Beim Opera ist die Abweichung am stärksten (screenshot), im IE ganz wenig und im Chrome sowie Mozilla passt es genau.

ps: Wieso is die Angabe diskrepant?

mfg
 
Zuletzt bearbeitet:
Abgesehen von meinem illustrierten Anzeigefehler bzgl. des abgeschnittenen Blocks kann ich ansonsten soweit keinen Unterschied im Opera ausmachen. Der vertikale Abstand ist bei mir in den Browsern pixelgleich.

Ist die Seite online erreichbar, um dort mal einen Blick drauf werfen zu können?

Du fragst, wieso die beiden Angaben widersprüchlich sind?

Nun, dann versuch halt einfach mal, einen 120kg-Mann in ein T-Shirt der Größe "S" zu zwängen :suspekt:

CSS: 
#wrapper {
	margin:auto;
	width:620px; /* setz hier mal 760px ein */
}

mfg Maik
 
Das Problem bei deinen Tests ist, dass du den Background nicht hast. Genau mit dem besteht aber das Problem, wie du auf meinem Screenshot sehen kannst, also der Grauverlauf oben und unten. Das Bild sollte halt wie im Mozilla oben und unten genau dran sitzen.
Code: 
body {
	background-image:url(../images/bgr.jpg);
	background-repeat:repeat-x;
}

ps: achso nein, die Seite läuft local.



Also ich hab das mal mit 2 Screens überprüft, es ist alles haargenau gleich, bis auf die Navigation (#nav_top). Die sitzt im Opera einfach nen Stückchen tiefer (exakt 5 px tiefer), aber ich hab keine Ahnung warum?
Der Rest, sowie davor als auch danach passt genau bei beiden Browsern.



Also ich hab das Problem gefunden. Es liegt an der im Browser eingestelten Schriftgröße.
Mozilla hat dort als Standart 16, der IE hat "Mittel" (stellt man auf "Größer" passt es perfekt) und Chrome hat ebenfals 16 und bei Opera hab ich es nicht verstanden, aber auch etwas anderes als 16.
16 Soll ja die Stanadartgröße sein und ich habs bei meinen Browsern auch nie geändert, aber offenbar ist es ja kein Standart. Gibt es ne Möglichkeit, dass Problem zu umgehen?

mfg
 
Ador hat gesagt.:
Das Problem bei deinen Tests ist, dass du den Background nicht hast.
Zum Vergrößern anklicken....
Darum hatte ich auch nach der Online-Version gefragt, um in den vollen Genuß des Seitendesigns zu kommen :p

Ador hat gesagt.:
Also ich hab das Problem gefunden. Es liegt an der im Browser eingestelten Schriftgröße.
Zum Vergrößern anklicken....
Sollte es tatsächlich mit der Schriftgröße zusammenhängen, seh ich da keine Möglichkeiten, dem Problem Herr zu werden.

Oder willst du die Seitenbesucher darauf aufmerksam machen, die "Standardschriftgröße" in ihrem Browser zu nutzen, und sie auf keinem Fall zu skalieren, damit sie die Seite korrekt angezeigt bekommen?

mfg Maik
 
Ne das geht natürlich garnicht, den User zu etwas zu "zwingen".
Ich weiß es zwar nicht, aber ich kann mir irgendwie nicht vorstellen, dass es einfach nicht geht, auf das Problem müssten doch schon viele gestoßen sein.

mfg
 
Stell die Seite mal online, damit ich sie in ihrem vollständigen Erscheinungsbild begutachten kann. Ansonsten kann ich dir hier im Blindflug nicht weiterhelfen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück