✔ Extreme Boxgrößen unterschiede Linux/Windows FF3

ByeBye 177919 · 17. August 2008

Danke für die weiteren infos.

Ich hab noch eine kleine frage.

Wenn ich z.b gut alles mit % angebe, dann wird unter Windows und Linux, jeweils beide mit Firefox, alles richtig angezeigt.

Wenn ich aber, zumindest die "outline" box, also den Rahmen mit z.b "width:900px;" begrenze, ist die page unter Windows breiter als unter Linux. Wenn ich es per % mache, ist alles richtig.

Wieso ist das so?

Ich möchte wenigstens die Breite per px festlegen, da mein header z.b nur 900px breit ist, bzw breit sein soll.

Und unter Windows wird auch der Header in volle größe angezeigt. Unter Linux ist er kleiner, und wenn ich per lupe auf 100% vergrößere, ist es so groß, das ich nach rechts scrollen kann.

Bei beiden Systemen hab ich eine Auflösung von 1024x786

Edit:

Hab wieder 2 Fehler gefunden =/

Unter Linux:
http://www.abload.de/img/2008-08-17-182253_100rj.png
http://www.abload.de/img/2008-08-17-182243_10rv9.png

Unter Windows:
http://www.abload.de/img/2008-08-17-182418_10z8x.png

Auch wenn ich die VM auf Vollbild mache, oder Linux beende und nach Windows boote, sieht die Seite genau so aus!

Ich glaube man sieht die unterschiede...

Hier ist auch mal das CSS file... >

Code:

body {
	background-color:#2f2f2f;
}

input {width:160px;}

div#outline {
	 width:980px;
	 background-color:#eaeaea;
	 left:50%;
	 position:absolute;
	 margin:0px 0px 0px -490px;
	 float:left;
	 padding:0px 0px 0px 0px;
}

div#register {
	font: 90% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
}

div#register > a:link {
	color:#FFFFFF;
	text-decoration:none;
}
div#register > a:visited {
	color:#FFFFFF;
	text-decoration:none;
}
div#register > a:active {
	text-decoration:none;
	}
div#register > a:hover {
	color:#cfe3ff;
	text-decoration:underline;
}

div#criticalerror {
	font: 130% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	color:#cf2929;
	font-weight:bold;
}

div#criticalerror > a:link {
	color:#cf2929;
	text-decoration:none;
}
div#criticalerror > a:visited {
	color:#cf2929;
	text-decoration:none;
}
div#criticalerror > a:active {
	text-decoration:none;
}
div#criticalerror > a:hover {
	color:#cf2929;
	text-decoration:underline;
}

div#errorheader {
	font: 120% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	color:#315fe4;
	font-weight:bold;
}

div#errortitle {
	font: 100% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	color:#cf2929;
	font-weight:bold;
}

div#errortext {
	font: 100% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	color:#000000;
	font-style:italic;
}

div#error {
	font: 90% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	color:#cf2929;
	font-weight:bold;
}

div#error > a:link {
	color:#cf2929;
	text-decoration:none;
}
div#error > a:visited {
	color:#cf2929;
	text-decoration:none;
}
div#error > a:active {
	text-decoration:none;
	}
div#error > a:hover {
	color:#cf2929;
	text-decoration:underline;
}

div#success {
	font: 90% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	color:#01b143;
	font-weight:bold;
}

div#success > a:link {
	color:#01b143;
	text-decoration:none;
}
div#success > a:visited {
	color:#01b143;
	text-decoration:none;
}
div#success > a:active {
	text-decoration:none;
	}
div#success > a:hover {
	color:#01b143;
	text-decoration:underline;
}


div#header { 
	 width:980px;
	 height:120px;
	 background:url(img/header.jpg) no-repeat;
	 font: 100% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	 text-align:center;
}
	 
div#nav {
	 width:200px;
	 float:left;
}

div#boxtop {
	width:190px;
	height:30px;
	font: 16px "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	background:url('img/boxtop.png') no-repeat;
	margin:-5px 0px 0px 5px;
	color:#FFFFFF;
	text-align:center;
}

div#boxfooter {
	width:190px;
	height:30px;
	background:url('img/boxfooter.png') no-repeat;
	margin:-5px 0px 10px 5px;
}

div#boxcontent {
	width:185px;
	margin:0px 0px 0px 5px;
	background-color:#a4a4a4;
}

div#boxtext {
	width:185px;
	margin:0px 0px 0px 5px;
	color:#FFFFFF;
	font: 90% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;	
}

div#boxtext > a:link {
	color:#FFFFFF;
	text-decoration:none;
}
div#boxtext > a:visited {
	color:#FFFFFF;
	text-decoration:none;
}
div#boxtext > a:active {
	text-decoration:none;
	}
div#boxtext > a:hover {
	color:#cfe3ff;
	text-decoration:none;
}

div#content {
	 width:760px;
	 float:left;
	 font: 80% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	 color:#000000;
}

div#side {
	 color:#000000;
	 width:150px;
	 float:left;
}

Maik · 17. August 2008

Das wäre mir neu, dass absolute CSS-Breitenangaben unter Linux anders (kleiner) interpretiert werden, als unter Windows.

Eine entsprechende "Umrechnungstabelle" für Linux-Systeme ist mir da bislang auch noch nicht begegnet. :suspekt:

mfg Maik

ByeBye 177919 · 17. August 2008

Maik hat gesagt.:
Das wäre mir neu, dass absolute CSS-Breitenangaben unter Linux anders (kleiner) interpretiert werden, als unter Windows.

Eine entsprechende "Umrechnungstabelle" für Linux-Systeme ist mir da bislang auch noch nicht begegnet. :suspekt:

mfg Maik

Siehe mein letzten Post. Da hab ich 3 Bilder gepostet wo man es vergleichen kann.

kuddeldaddeldu · 17. August 2008

Hi,

nur den zugehörigen HTML-Code bist Du uns schuldig geblieben...

LG

ByeBye 177919 · 17. August 2008

Index.php :

PHP:

<?php
echo <<<MAIN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>EviCms</title>
<link rel="stylesheet" type="text/css" href="template/base.css">
<meta name="author" content="Tomekk">
<meta name="editor" content="scite/notepad++">
</head>
<body id="main">
<div id="outline">
<div id="header">
</div>
MAIN;

//Defines 
define('HOME', dirname(__FILE__).'/'); 
// /Defines

// NAVBAR
echo <<<NAV
<div id="nav">
NAV;
include (HOME.'/modules/sidebar.php');
echo <<<NAV1
</div>
NAV1;
// /NAVBAR

// CONTENT: Die Seiten aufrufe incl Checkup ob es sie gibt oder nicht 
echo <<<CONTENT1
<div id="content">
CONTENT1;
if ($_GET['site']) {
	if (ereg("../", $_GET['site'])) {
		include (HOME.'/modules/errorpages/401.html');
		} else {
		if (file_exists(HOME.'/modules/'.$_GET['site'].".php")) {
			include (HOME.'/modules/'.$_GET['site'].".php");
			} else {
			include (HOME.'/modules/errorpages/404.html');
			}
		}
}
echo <<<CONTENT2
</div>
CONTENT2;
// /CONTENT

echo <<<MAINEND
</div>
</body>
</html>
MAINEND;
?>

sidebar.php

PHP:

<?php
if (!$_COOKIE['name']) {
echo <<<LOGINBOX
<div id="boxtop">
Login
</div>
<div id="boxcontent">
<div id="boxtext">
LOGINBOX;

include ("modules/login.php");

echo <<<LOGINBOX1
</div>
</div>
<div id="boxfooter">
</div>
LOGINBOX1;

} else {

echo <<<INFOBOX
<div id="boxtop">
Kontrollzentrum
</div>
<div id="boxcontent">
<div id="boxtext">
INFOBOX;

include ("modules/sidebarinfo.php");

echo <<<INFOBOX1
</div>
</div>
<div id="boxfooter">
</div>
INFOBOX1;
}

echo <<<SIDE
<div id="boxtop">
Menu
</div>
<div id="boxcontent">
<div id="boxtext">
<a href="index.php?site=test">Testlink</a><br>
<a href="index.php?site=../test/link">Testlink 2</a><br>
<a href="index.php?site=abctest">Testlink 3</a><br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Status
</div>
<div id="boxcontent">
<div id="boxtext">
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Menu
</div>
<div id="boxcontent">
<div id="boxtext">
<a href="index.php?site=test">Testlink</a><br>
<a href="index.php?site=../test/link">Testlink 2</a><br>
<a href="index.php?site=abctest">Testlink 3</a><br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Status
</div>
<div id="boxcontent">
<div id="boxtext">
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Menu
</div>
<div id="boxcontent">
<div id="boxtext">
<a href="index.php?site=test">Testlink</a><br>
<a href="index.php?site=../test/link">Testlink 2</a><br>
<a href="index.php?site=abctest">Testlink 3</a><br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Status
</div>
<div id="boxcontent">
<div id="boxtext">
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
</div>
</div>
<div id="boxfooter">
</div>
SIDE;
?>

Das wären die 2 die gut 99% des Templates ausgeben.

Maik · 17. August 2008

Da wir uns hier nicht im PHP-Board befinden, wäre der PHP-geparste Quellcode, also der vom Browser ausgegebene HTML-Code wesentlich interessanter bzw. aufschlussreicher.

mfg Maik

ByeBye 177919 · 17. August 2008

Maik hat gesagt.:
Da wir uns hier nicht im PHP-Board befinden, wäre der PHP-geparste Quellcode, also der vom Browser ausgegebene HTML-Code wesentlich interessanter bzw. aufschlussreicher.

mfg Maik

Achso.

Linux:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>EviCms</title>
<link rel="stylesheet" type="text/css" href="template/base.css">
<meta name="author" content="Tomekk">
<meta name="editor" content="scite/notepad++">
</head>
<body id="main">
<div id="outline">
<div id="header">
</div><div id="nav"><div id="boxtop">
Login
</div>
<div id="boxcontent">
<div id="boxtext"><form id="form1" name="form1" method="post" action="index.php">     
  <table>   
    <tr>

	<td>Benutzername</td>
	</tr>
	<tr>     
      <td><input name="user" type="text" class="liteoption" id="user" size="23" maxlength="25" /></td>     
    </tr>     
    <tr>
	<td>Passwort</td>
	</tr>
    <tr>     
      <td><input name="pass" type="password" class="liteoption" id="pass" size="23" maxlength="25" /></td> 
    </tr>

    <tr>
	<td><input name="submit" type="submit" id="login" value="LogIn" /></td>
	</tr>  
	<tr>
	<td><div id="register"><a href="index.php?site=registration">Nicht Registriert?<br>Melde dich jetzt an!</a></div></td>
	</tr>    
</form></table></div>
</div>
<div id="boxfooter">
</div><div id="boxtop">

Menu
</div>
<div id="boxcontent">
<div id="boxtext">
<a href="index.php?site=test">Testlink</a><br>
<a href="index.php?site=../test/link">Testlink 2</a><br>
<a href="index.php?site=abctest">Testlink 3</a><br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

Platzhalter<br>

</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Status
</div>
<div id="boxcontent">
<div id="boxtext">
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Menu
</div>
<div id="boxcontent">
<div id="boxtext">
<a href="index.php?site=test">Testlink</a><br>
<a href="index.php?site=../test/link">Testlink 2</a><br>
<a href="index.php?site=abctest">Testlink 3</a><br>
Platzhalter<br>

Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Status
</div>
<div id="boxcontent">

<div id="boxtext">
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Menu
</div>
<div id="boxcontent">
<div id="boxtext">
<a href="index.php?site=test">Testlink</a><br>

<a href="index.php?site=../test/link">Testlink 2</a><br>
<a href="index.php?site=abctest">Testlink 3</a><br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

</div>
</div>

<div id="boxfooter">
</div>
<div id="boxtop">
Status
</div>
<div id="boxcontent">
<div id="boxtext">
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
</div>
</div>
<div id="boxfooter">
</div></div><div id="content"></div></div>

</body>
</html>

Windows:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>EviCms</title>
<link rel="stylesheet" type="text/css" href="template/base.css">
<meta name="author" content="Tomekk">
<meta name="editor" content="scite/notepad++">
</head>
<body id="main">
<div id="outline">
<div id="header">
</div><div id="nav"><div id="boxtop">
Login
</div>
<div id="boxcontent">
<div id="boxtext"><form id="form1" name="form1" method="post" action="index.php">     
  <table>   
    <tr>

	<td>Benutzername</td>
	</tr>
	<tr>     
      <td><input name="user" type="text" class="liteoption" id="user" size="23" maxlength="25" /></td>     
    </tr>     
    <tr>
	<td>Passwort</td>
	</tr>
    <tr>     
      <td><input name="pass" type="password" class="liteoption" id="pass" size="23" maxlength="25" /></td> 
    </tr>

    <tr>
	<td><input name="submit" type="submit" id="login" value="LogIn" /></td>
	</tr>  
	<tr>
	<td><div id="register"><a href="index.php?site=registration">Nicht Registriert?<br>Melde dich jetzt an!</a></div></td>
	</tr>    
</form></table></div>
</div>
<div id="boxfooter">
</div><div id="boxtop">

Menu
</div>
<div id="boxcontent">
<div id="boxtext">
<a href="index.php?site=test">Testlink</a><br>
<a href="index.php?site=../test/link">Testlink 2</a><br>
<a href="index.php?site=abctest">Testlink 3</a><br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

Platzhalter<br>

</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Status
</div>
<div id="boxcontent">
<div id="boxtext">
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Menu
</div>
<div id="boxcontent">
<div id="boxtext">
<a href="index.php?site=test">Testlink</a><br>
<a href="index.php?site=../test/link">Testlink 2</a><br>
<a href="index.php?site=abctest">Testlink 3</a><br>
Platzhalter<br>

Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Status
</div>
<div id="boxcontent">

<div id="boxtext">
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
</div>
</div>
<div id="boxfooter">
</div>
<div id="boxtop">
Menu
</div>
<div id="boxcontent">
<div id="boxtext">
<a href="index.php?site=test">Testlink</a><br>

<a href="index.php?site=../test/link">Testlink 2</a><br>
<a href="index.php?site=abctest">Testlink 3</a><br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>

</div>
</div>

<div id="boxfooter">
</div>
<div id="boxtop">
Status
</div>
<div id="boxcontent">
<div id="boxtext">
Platzhalter<br>
Platzhalter<br>
Platzhalter<br>
</div>
</div>
<div id="boxfooter">
</div></div><div id="content"></div></div>

</body>
</html>

Maik · 17. August 2008

Tut mir leid, aber ich kann da via "browserpool.de" unter Linux erwartungsgemäß keine diskrepante Interpretation bei der Breitendeklaration für #outline feststellen.

Übrigens muß ein ID-Bezeichner innerhalb des Dokumentenbaums einer HTML-Datei eindeutig sein, darf darin also nicht mehrmals vergeben werden - hierfür ist die CSS-Klasse vorgesehen.

Und noch ein Tipp: Wenn das Formular vor der Tabelle geöffnet wird, gehört es auch erst nach der Tabelle geschlossen.

Achja, weshalb postest du hier eigentlich den identischen HTML-Code explizit für beide Betriebssysteme? :suspekt:

mfg Maik

ByeBye 177919 · 17. August 2008

Maik hat gesagt.:
Achja, weshalb postest du hier eigentlich den identischen HTML-Code explizit für beide Betriebssysteme? :suspekt:

mfg Maik

Weil der unter Linux ja kleiner ist und einige Fehler existieren wie man auf den Bildern sieht.

Maik · 17. August 2008

tomekk228 hat gesagt.:
Weil der unter Linux ja kleiner ist

Seltsam, die Dateigröße, Zeichen- und Zeilenanzahl ist aber in beiden Quellcodes gleich.

Und dass man für die Betriebssysteme unterschiedliche Quellcodes bereitstellt, wäre mir auch eine neue Anwendung in der HTML-Praxis.

mfg Maik

✔ Extreme Boxgrößen unterschiede Linux/Windows FF3

ByeBye 177919

Maik

ByeBye 177919

kuddeldaddeldu

Erfahrenes Mitglied

ByeBye 177919

Maik

ByeBye 177919

Maik

ByeBye 177919

Maik

Neue Beiträge