Probleme mit darstellung einer Internetseite im Firefox und IE

sdech · 15.03.2009

Guten Abend zusammen,

ich bin momentan dabei eine neue seite auszuarbeiten. Leider habe ich da noch 1-2 Probleme wo ich nicht weiter komme.

Hier mal der Link zum aktuellen Status.

Wenn ihr euch mal die Interntseite im IE und im Firefox betrachtet kommen euch schon die Fehler auf. Leider weiß ich nicht an was es liegen kann. Da ich nicht unbedingt der Profi im CSS-Programmieren bin.

Ich denke vom Ansatz her bin ich nicht falsch, wo ich die 3 Divs nebeneinander haben möchte. Einmal die ersten 2 Divs in einen Rahmen und dann der andere mit float:right daneben. Im FF sieht es mal nicht schlecht aus wobei da der Rand nicht angezeigt wird und im IE geht nix. Da is alles zu spät

Hättet ihr Tipps für mich wie ich es anders realiesieren könnte?

Hier mal der HTML-Code:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<title></title> 
<LINK href="css/fire.css" type=text/css rel=stylesheet>
</head>
<body>
<div align="center">

<div id="main">
    <div id="shadow_left">
        <div id="shadow_right">
            <div id="wrapper">
                <div id="header">
                    <div id="wappen">
                        <img src="image/wappen_adelshofen.png">
                        <img src="image/wappen_elsenz.png">
                        <img src="image/wappen_eppingen.png">
                        <img src="image/wappen_kleingartach.png">
                        <img src="image/wappen_muehlbach.png">
                        <img src="image/wappen_richen.png">
                        <img src="image/wappen_rohrbachag.png">
                        <div id="wappen_text">Kontakt | Impressum | Login</div>
                    </div>
                </div>
                    <div id="pfad">Startseite &gt; Gesamtwehr </div>
                    <div id="wrapper1_left">
                    <div id="wrapper_left">Wrapper Left</div>
                    <div id="wrapper_content">Wrapper Content</div>
                    </div>
                    <div id="wrapper_right">Wrapper Right</div>
                <div id="footer">test
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Hier der CSS-Code:

Code:

/* Grundeinstellungen */

body {background: #E4E3E3 url(../image/bg.png) repeat-y; font: 10px/14px verdana,arial,helvetica,sans-serif; color: #000000; margin:0px; cursor: crosshair;}
#main {width: 910px; height: 200px;}     
#wrapper {}    /* nimmt die vorhandenen Seitenbereiche aud */
#shadow_left {background: url(../image/shadow_left.gif) repeat-y left;}    /* linker Schatten */
#shadow_right {background: url(../image/shadow_right.gif) repeat-y right;}    /* rechter Schatten */


/* Headerbereich */

#header         {height: 180px; width: 900px; background: url(../image/header_eppingen_groß.jpg) #fff no-repeat center;}
#wappen         {height: 55px; width: 900px; background: #fff; filter:alpha(opacity=65); -moz-opacity:0.65; background-color:#FFFFFF; position: absolute; top: 125px;} /* Positionieren der Wappen inerhalb vom #header */
#wappen img     {height: 50px; background: #fff; margin-left: 5px; margin-right: 5px; margin-top: 3px; float: left; table: none;}
#wappen_text     {height: 20px width: 100%; background: #fff; position: absolute; bottom: 5px; right: 5px;}

/* Pfadleiste */

#pfad    {height: 15px; width: 895px; background: #ffffff; padding-left: 5px; text-align: left; color: #999999;}

/* Navigation */

#wrapper_left        {height: 100%; width: 200px; background: #ffffff; float: left;}
#wrapper_content    {height: 100%; width: 500px; background: #ffffff; float: right;}
#wrapper1_left        {height: 100%; float: left;}
#wrapper_right        {height: 100%; width: 200px; background: #ffffff; float: right;}

#footer    {height: 15px; width: 900px; background: #ffffff; font: 8px/12px verdana,arial,sans-serif; color: #000000; clear: left;}

Sage schon mal danke für eure Tipps

H1VE · 15.03.2009

AW: Probleme mit darstellung einer Internetseite im Firefox und IE

Hi,
ich habe die besten Erfahrungen mit tables gemacht. Divs werden vom IE6 & 7 schon unterschiedlich interpretiert, ganz zu schweigen von Mozilla oder Opera.

Hier noch ein Tipp:

knispel · 15.03.2009

AW: Probleme mit darstellung einer Internetseite im Firefox und IE

Ganz schö DIVig!

Ein erster Tipp auf die Schnelle: Gib mal dem

Code:

<div id="wrapper1_left">

eine Breite.

Den Code bitte hier passend darstellen. Verwende den Modus "Erweitert", dann "Code einfügen".

@
Vergiss das mit den tables!

sdech · 15.03.2009

AW: Probleme mit darstellung einer Internetseite im Firefox und IE

Sorry hatte nicht den erweiterten Editor eingeschaltet.

Nun das im IE sieht schon einmal besser aus. Wobei Links und Rechts der Schatten immer noch nicht eingefügt wird. Mit was könnte dies zusammen liegen?

knispel · 15.03.2009

AW: Probleme mit darstellung einer Internetseite im Firefox und IE

Code:

<div id="wrapper1_left">

und

Code:

<div id="wrapper_right">

verdecken jeweils den Rahmen. Mit einem passenden padding von 5px sollte das behoben werden können.

tomtom · 15.03.2009

AW: Probleme mit darstellung einer Internetseite im Firefox und IE

muss mich mal einklinken. wo finde ich den erweiterten editor? möchte es mal gerne nachvollziehen. danke.

sdech · 15.03.2009

AW: Probleme mit darstellung einer Internetseite im Firefox und IE

unter Kontrollzentrum -> Verschiedene Einstellungen

o0Andy0o · 15.03.2009

AW: Probleme mit darstellung einer Internetseite im Firefox und IE

Beim Editor unter dem Post auf "Erweitert" klicken

sdech · 16.03.2009

AW: Probleme mit darstellung einer Internetseite im Firefox und IE

Dud noch ned sooo ganz

Sieht im IE und FF wieder total anderst aus. Ich verzweifle noch egal wie ich es hinstelle es geht nicht. Hat noch jemand ne kleine Hilfestellung was ich versuchen könnte?

knispel · 18.03.2009

AW: Probleme mit darstellung einer Internetseite im Firefox und IE

Tipp: Nimm doch mal für

Code:

<div id="wrapper1_left">

ein padding-left und für

Code:

<div id="wrapper_right">

ein margin-right - jeweils von 5px. Du musst die Beite der DIVs jeweils um 5px reduzieren.

Sieh doch den Tipp nicht unbedingt als Dogma, sondern schau dir bitte diese Seite an und beschäftige dich mit dem Box-Modell.
Wenn du das Prinzip verstanden hast, kannst du es spielerisch umsetzen!