[Erledigt] CSS: Probleme zwischen IE und FF

vita · 24.10.2008, 15:24

Hallo,
Ich hab folgendes Problem: Das hier ( High Society )ist die Seite, die ich angefangen habe zu bauen. Alles schön mit Div-Layern und halt CSS basiertes Design.
Nun hab ich aber das Problem, dass beim Internet Explorer alles irgendwie verschoben angezeigt wird. Ich weis nicht womit es zusammenhängt, aber es wird wahrscheinlich an einer anderen Interpretation, bzw. einer anderen Ausgangslage der Standardkonfig beider Browser liegen.
Im Firefox wird alles richtig angezeigt. So wie es sein soll. Im Internet Explorer siehts einfach nur blöd aus

.
An Code hab ich bisher nicht viel.

Index-PHP:

PHP-Code:

  <?php

//Ladezeit
function getmicrotime() {
   list($msec, $sec) = explode(" ",microtime());
   return ($msec + $sec);
}

$time_start = getmicrotime();

//Eigentliche Seite
echo "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>\n";
echo "<html xmlns='http://www.w3.org/1999/xhtml'>\n";

echo "   <head>\n";
echo "      <title>High Society</title>\n";
echo "      <meta name='author' content='vita' />\n";
echo "      <meta name='description' content='High Society Guild Homepage' />\n";
echo "      <link rel='stylesheet' type='text/css' href='hs.css' />\n";
echo "      <link rel='shortcut icon' href='images/hs_mini.gif' />\n";
echo "   </head>\n";

echo "   <body>\n";

//maincontent Div-Layer Start
echo "      <div class='maincontent'>\n";
echo "         <div id='banner'></div>\n";
echo "         <hr id='topline' />\n";

echo "         <div id='pic_small'>\n";
                  //Algorithmus für RANDOM BILD eintragen.
                  //Testweise statisches Bild.
echo "            <img src='images/veins_small.png' alt='' />\n";
echo "         </div>\n";
echo "         <hr id='midline' />\n";

echo "         <hr id='bottomline' />\n";

echo "         <p id='header_font'>Copyright by © \n";
echo "            <a href='http://www.highsociety-guild.net'>www.highsociety-guild.net</a>.\n";
echo "            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n";
echo "            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n";
echo "            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n";
echo "            Design by <a href='#'>vita</a> and <a href='#'>elex</a>.\n";
echo "         </p>\n";

//Ladezeit
$time_end = getmicrotime();
$time = $time_end - $time_start;
echo "         <p id='header_font2'>Page loaded in: " . number_format($time, 5, '.', '') . " seconds.</p>\n";

//maincontent Div-Layer Ende
echo "      </div>\n";


echo "   </body>\n";
echo "</html>\n";
?>

CSS-Datei:

Code:

.navi a:link {
   color: #000000;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   line-height: 50px;
}

.navi a:visited {
   color: #000000;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   line-height: 50px;
}

.navi a:hover {
   color: #7492C1;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   line-height: 50px;
}

.navi a:active {
   color: #000000;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   line-height: 50px;
}

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

.maincontent {
   background-image: url(images/content_window.jpg);
   background-repeat: no-repeat;
   position: absolute;
   width: 500px;
   height: 650px;
   top: 50%;
   left: 50%;
   margin-top: -220px;
   margin-left: -250px;
}

.maincontent #topline {
   border: 0px;
   border-bottom: solid 1px #000000;
   height: 1px;
   width: 470px;
   margin-top: 40px;
}

.maincontent #midline {
   border: 0px;
   border-bottom: solid 1px #000000;
   height: 1px;
   width: 470px;
   margin-top: 215px;
}

.maincontent #bottomline {
   border: 0px;
   border-bottom: solid 1px #000000;
   height: 1px;
   width: 470px;
   margin-top: 345px;
}

.maincontent a:link {
   color: #7492C1;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   line-height: 10px;
}

.maincontent a:visited {
   color: #7492C1;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   line-height: 10px;
}

.maincontent a:hover {
   color: red;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   line-height: 10px;
}

.maincontent a:active {
   color: #7492C1;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   line-height: 10px;
}

.maincontent #header_font {
   color: #000000;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   line-height: 5px;
   padding-left: 15px;
}

.maincontent #header_font2 {
   text-align: center;
   color: #000000;
   text-decoration: none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   line-height: 5px;
   padding-left: 15px;
}

.maincontent #banner {
   background-image: url(images/hs_banner_test.gif);
   background-repeat: no-repeat;
   position: absolute;
   width: 350px;
   height: 100px;
   top: 7px;
   left: 299px;
}

.maincontent #pic_small {
   position: absolute;
   width: 242px;
   height: 186px;
   top: 55px;
   left: 249px;
}

Ich wäre für jede Hilfe dankbar.

Ach ja: Google hat mir gesagt ich soll mal ein wenig mit "position: absolute; padding: 0; margin: 0;" rumspielen, aber irgendwie klappt das alles nicht wirklich.

cycap · 24.10.2008, 15:26

Setz erstmal den doctype auf strict und validiere das HTML. Dann kann man sich an evtl. CSS-Bugs machen

vita · 24.10.2008, 15:35

Done.

Zitat:

This document was successfully checked as XHTML 1.0 Strict!

Hab den Code im ersten Post aktualisiert.

cycap · 24.10.2008, 15:40

Also im FF3 sieht das schon sehr merkwürdig bei mir aus, mit scrollbalken und so.

vita · 24.10.2008, 15:47

Liegt wohl daran, dass es ein einziges großes Hintergrundbild ist, welches 500px breit und 650px hoch ist.
Darum gehts mir aber eigentlich gar nicht.
Innerhalb dieses Bildes sind die Linien und bisher geschriebenen Zeilen im IE komplett anders als im FF. Im IE ist die Fußzeile sogar komplett aus dem Bild rausgesprungen.

phpdummi · 24.10.2008, 17:22

Übernimm das hier in deinen Code und leg für den IE76/7 neue Stylesheets an in denen du die Fehler behebst.

Code:

<!--[if lte IE 7]>
        <link href="frontend/css/ie7.css" rel="stylesheet" media="screen" type="text/css" />
    <![endif]-->

    <!--[if lte IE 6]>
        <link href="frontend/css/ie6.css" rel="stylesheet" media="screen" type="text/css" />
    <![endif]-->

Die IE rendert nun mal anders als alle anderen Browser. Das wird sich erst in Version 8 ändern.

vita · 24.10.2008, 19:14

Aus einem HTML Kommentar wird automatisch der Browser ausgelesen, oder wie?

Vielen dank, btw.

nikosch · 24.10.2008, 20:01

Selfhtml.org

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Firefox / IE - Probleme		HTML, Usability und Barrierefreiheit	5	20.07.2009 17:04
Kommunikation zwischen IFRAME und Hauptseite	R4v3r	HTML, Usability und Barrierefreiheit	1	02.04.2007 13:57
Probleme bei Speicherung von serialize() Strings	Manni2k	PHP Tipps 2006	13	15.10.2006 15:06
Probleme mit mbstring extension unter Debian	HStev	Server, Hosting und Workstations	3	30.08.2006 20:55
Probleme bei Abständen mit DIV's	snatch-ic	HTML, Usability und Barrierefreiheit	11	29.06.2006 22:02
Probleme mit Rechteverteilung chmod() per script!!!???	Funky_	PHP Tipps 2006	7	17.06.2006 17:10
zeit zwischen 2 datetime	jens76	Datenbanken	13	08.06.2006 14:15
[MSSQL + PHP] Konflikt zwischen Datentypen / Probleme bei IN	winfo_cologne	PHP Tipps 2006	3	29.03.2006 14:05
Probleme mit Sonderzeichen...		Datenbanken	1	02.08.2005 23:37
Text zwischen zwei zechen löschen		PHP Tipps 2005-2	2	08.07.2005 19:21
[Erledigt] hilfe! probleme mit...		PHP Tipps 2005	4	12.04.2005 22:55
abstrakte unterschiede zwischen ie und opera		HTML, Usability und Barrierefreiheit	8	12.03.2005 19:54
Probleme mit [php] und [/php]	Corvin	Off-Topic Diskussionen	10	11.02.2005 13:43
[Erledigt] Technische Probleme mit Sessions		PHP-Fortgeschrittene	4	18.11.2004 14:45
PHP Bilder in DB / Probleme bei Änderung		PHP-Fortgeschrittene	1	05.06.2004 11:20

24.10.2008, 15:24
vita Neuer Benutzer Registriert seit: 14.07.2008 Beiträge: 25	[Erledigt] CSS: Probleme zwischen IE und FF Hallo, Ich hab folgendes Problem: Das hier ( High Society )ist die Seite, die ich angefangen habe zu bauen. Alles schön mit Div-Layern und halt CSS basiertes Design. Nun hab ich aber das Problem, dass beim Internet Explorer alles irgendwie verschoben angezeigt wird. Ich weis nicht womit es zusammenhängt, aber es wird wahrscheinlich an einer anderen Interpretation, bzw. einer anderen Ausgangslage der Standardkonfig beider Browser liegen. Im Firefox wird alles richtig angezeigt. So wie es sein soll. Im Internet Explorer siehts einfach nur blöd aus . An Code hab ich bisher nicht viel. Index-PHP: PHP-Code: <?php //Ladezeit function getmicrotime() { list($msec, $sec) = explode(" ",microtime()); return ($msec + $sec); } $time_start = getmicrotime(); //Eigentliche Seite echo "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>\n"; echo "<html xmlns='http://www.w3.org/1999/xhtml'>\n"; echo " <head>\n"; echo " <title>High Society</title>\n"; echo " <meta name='author' content='vita' />\n"; echo " <meta name='description' content='High Society Guild Homepage' />\n"; echo " <link rel='stylesheet' type='text/css' href='hs.css' />\n"; echo " <link rel='shortcut icon' href='images/hs_mini.gif' />\n"; echo " </head>\n"; echo " <body>\n"; //maincontent Div-Layer Start echo " <div class='maincontent'>\n"; echo " <div id='banner'></div>\n"; echo " <hr id='topline' />\n"; echo " <div id='pic_small'>\n"; //Algorithmus für RANDOM BILD eintragen. //Testweise statisches Bild. echo " <img src='images/veins_small.png' alt='' />\n"; echo " </div>\n"; echo " <hr id='midline' />\n"; echo " <hr id='bottomline' />\n"; echo " <p id='header_font'>Copyright by © \n"; echo " <a href='http://www.highsociety-guild.net'>www.highsociety-guild.net</a>.\n"; echo "               \n"; echo "               \n"; echo "               \n"; echo " Design by <a href='#'>vita</a> and <a href='#'>elex</a>.\n"; echo " </p>\n"; //Ladezeit $time_end = getmicrotime(); $time = $time_end - $time_start; echo " <p id='header_font2'>Page loaded in: " . number_format($time, 5, '.', '') . " seconds.</p>\n"; //maincontent Div-Layer Ende echo " </div>\n"; echo " </body>\n"; echo "</html>\n"; ?> CSS-Datei: Code: .navi a:link { color: #000000; text-decoration: none; font-family: tahoma; font-size: 10px; font-weight: bold; line-height: 50px; } .navi a:visited { color: #000000; text-decoration: none; font-family: tahoma; font-size: 10px; font-weight: bold; line-height: 50px; } .navi a:hover { color: #7492C1; text-decoration: none; font-family: tahoma; font-size: 10px; font-weight: bold; line-height: 50px; } .navi a:active { color: #000000; text-decoration: none; font-family: tahoma; font-size: 10px; font-weight: bold; line-height: 50px; } body { background-image: url(images/bg_body.jpg); background-repeat: repeat-x; } .maincontent { background-image: url(images/content_window.jpg); background-repeat: no-repeat; position: absolute; width: 500px; height: 650px; top: 50%; left: 50%; margin-top: -220px; margin-left: -250px; } .maincontent #topline { border: 0px; border-bottom: solid 1px #000000; height: 1px; width: 470px; margin-top: 40px; } .maincontent #midline { border: 0px; border-bottom: solid 1px #000000; height: 1px; width: 470px; margin-top: 215px; } .maincontent #bottomline { border: 0px; border-bottom: solid 1px #000000; height: 1px; width: 470px; margin-top: 345px; } .maincontent a:link { color: #7492C1; text-decoration: none; font-family: tahoma; font-size: 10px; font-weight: bold; line-height: 10px; } .maincontent a:visited { color: #7492C1; text-decoration: none; font-family: tahoma; font-size: 10px; font-weight: bold; line-height: 10px; } .maincontent a:hover { color: red; text-decoration: none; font-family: tahoma; font-size: 10px; font-weight: bold; line-height: 10px; } .maincontent a:active { color: #7492C1; text-decoration: none; font-family: tahoma; font-size: 10px; font-weight: bold; line-height: 10px; } .maincontent #header_font { color: #000000; text-decoration: none; font-family: tahoma; font-size: 10px; font-weight: bold; line-height: 5px; padding-left: 15px; } .maincontent #header_font2 { text-align: center; color: #000000; text-decoration: none; font-family: tahoma; font-size: 10px; font-weight: bold; line-height: 5px; padding-left: 15px; } .maincontent #banner { background-image: url(images/hs_banner_test.gif); background-repeat: no-repeat; position: absolute; width: 350px; height: 100px; top: 7px; left: 299px; } .maincontent #pic_small { position: absolute; width: 242px; height: 186px; top: 55px; left: 249px; } Ich wäre für jede Hilfe dankbar. Ach ja: Google hat mir gesagt ich soll mal ein wenig mit "position: absolute; padding: 0; margin: 0;" rumspielen, aber irgendwie klappt das alles nicht wirklich. Geändert von vita (24.10.2008 um 15:35 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

24.10.2008, 15:26
cycap Moderator Registriert seit: 13.02.2008 Beiträge: 6.816 PHP-Kenntnisse: Fortgeschritten	Setz erstmal den doctype auf strict und validiere das HTML. Dann kann man sich an evtl. CSS-Bugs machen

24.10.2008, 15:40
cycap Moderator Registriert seit: 13.02.2008 Beiträge: 6.816 PHP-Kenntnisse: Fortgeschritten	Also im FF3 sieht das schon sehr merkwürdig bei mir aus, mit scrollbalken und so.

24.10.2008, 15:47
vita Neuer Benutzer Registriert seit: 14.07.2008 Beiträge: 25	Liegt wohl daran, dass es ein einziges großes Hintergrundbild ist, welches 500px breit und 650px hoch ist. Darum gehts mir aber eigentlich gar nicht. Innerhalb dieses Bildes sind die Linien und bisher geschriebenen Zeilen im IE komplett anders als im FF. Im IE ist die Fußzeile sogar komplett aus dem Bild rausgesprungen.

24.10.2008, 17:22
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	Übernimm das hier in deinen Code und leg für den IE76/7 neue Stylesheets an in denen du die Fehler behebst. Code: <!--[if lte IE 7]> <link href="frontend/css/ie7.css" rel="stylesheet" media="screen" type="text/css" /> <![endif]--> <!--[if lte IE 6]> <link href="frontend/css/ie6.css" rel="stylesheet" media="screen" type="text/css" /> <![endif]--> Die IE rendert nun mal anders als alle anderen Browser. Das wird sich erst in Version 8 ändern. __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

24.10.2008, 19:14
vita Neuer Benutzer Registriert seit: 14.07.2008 Beiträge: 25	Aus einem HTML Kommentar wird automatisch der Browser ausgelesen, oder wie? Vielen dank, btw.

24.10.2008, 20:01
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Selfhtml.org __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --